Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
1 task done
mgrsskls opened this issue Jan 14, 2022 · 0 comments
Closed
1 task done
Labels
Milestone

Comments

@mgrsskls
Copy link

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

  • I agree to follow this project's Code of Conduct
@mgrsskls mgrsskls added the bug label Jan 14, 2022
@Ffloriel Ffloriel added this to the 5.0.0 milestone Feb 23, 2022
@mgrsskls 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants