You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I have a tokens.css which imports a CSS file from a node module. In this tokens.css I assign custom properties from the node module to my own custom properties (mapping).
When I then import this tokens.css in some Vue component, in which I use that custom property defined in my tokens.css, it works fine.
But if I import the tokens.css in the App.vue for example, which uses that Vue component, purgecss removes the custom property from the node module.
variables is set to true as I want unused custom properties to be removed.
None of the style tags use scoped.
I have also tried to safelist the selector in which I assign the custom properties and I have tried to safelist the custom property directly, none of it worked.
The only thing that worked for me is to safelist (via CSS comments) the whole node module import + custom property mapping in my tokens.css. But then variables: true has no effect of course.
You can check out that repository and start the Vue application. You will see two strings:
"should be blue"
"should be orange
There first one is styled with a custom property imported in App.vue, the second one is styled with a custom property imported in the Vue component directly.
When you start the Vue app in development mode (without purgecss), both strings are styled correctly.
When you start the Vue app in production mode (with purgecss), the first string is black (unstyled), the second string is orange. You can see in the devtools that custom property from the imported node module is missing.
Expected Behavior
The custom property should be in production mode. If purgecss is not able to achieve that, at least using safelist.variables should be respected.
Environment
macOS 11.6.1
vue 3.2.25
vite 2.7.12
@fullhuman/postcss-purgecss 4.1.3
@fullhuman/vue-cli-plugin-purgecss 2.0.0
Add any other context about the problem here
No response
Code of Conduct
I agree to follow this project's Code of Conduct
The text was updated successfully, but these errors were encountered:
mgrsskls
changed the title
[Bug]: Custom property in vue apps are removed even thought they are used
[Bug]: Custom property in vue apps are removed even though they are used
Jul 10, 2022
Describe the bug
Hi, first of all thank you for the project! :)
I have a
tokens.css
which imports a CSS file from a node module. In thistokens.css
I assign custom properties from the node module to my own custom properties (mapping).When I then import this
tokens.css
in some Vue component, in which I use that custom property defined in mytokens.css
, it works fine.But if I import the
tokens.css
in theApp.vue
for example, which uses that Vue component,purgecss
removes the custom property from the node module.variables
is set totrue
as I want unused custom properties to be removed.None of the style tags use
scoped
.I have also tried to safelist the selector in which I assign the custom properties and I have tried to safelist the custom property directly, none of it worked.
The only thing that worked for me is to safelist (via CSS comments) the whole node module import + custom property mapping in my
tokens.css
. But thenvariables: true
has no effect of course.To Reproduce
Minimal repository to reproduce the issue: https://github.com/mgrsskls/purgecss-issue-repo
You can check out that repository and start the Vue application. You will see two strings:
There first one is styled with a custom property imported in
App.vue
, the second one is styled with a custom property imported in the Vue component directly.When you start the Vue app in development mode (without purgecss), both strings are styled correctly.
When you start the Vue app in production mode (with purgecss), the first string is black (unstyled), the second string is orange. You can see in the devtools that custom property from the imported node module is missing.
Expected Behavior
The custom property should be in production mode. If
purgecss
is not able to achieve that, at least usingsafelist.variables
should be respected.Environment
Add any other context about the problem here
No response
Code of Conduct
The text was updated successfully, but these errors were encountered: