purgecss icon indicating copy to clipboard operation
purgecss copied to clipboard

[Bug]: Custom property in vue apps are removed even though they are used

Open mgrsskls opened this issue 3 years ago • 0 comments

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 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.

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:

  1. "should be blue"
  2. "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

  • [X] I agree to follow this project's Code of Conduct

mgrsskls avatar Jan 14 '22 18:01 mgrsskls