Skip to content

Don't generate color opacity code in color plugins if not necessary #1680

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

Merged
merged 2 commits into from
May 1, 2020

Conversation

adamwathan
Copy link
Member

The new color opacity plugins add a lot of new code to the existing color plugins in order to make the color opacity stuff actually work:

  .bg-red-100 {
+   --bg-opacity: 1;
    background-color: #fff5f5;
+   background-color: rgba(255, 245, 245, var(--bg-opacity));
  }

This sucks if you are disabling the color opacity plugins because now your CSS is bigger, and in a way that PurgeCSS can't help you with.

This PR adds a check to each color plugin to see if the relevant color opacity plugin is disabled, and if so optimizes the output:

  .bg-red-100 {
-   --bg-opacity: 1;
    background-color: #fff5f5;
-   background-color: rgba(255, 245, 245, var(--bg-opacity));
  }

Closes #1670.

@adamwathan adamwathan merged commit 9aa201f into master May 1, 2020
@adamwathan adamwathan deleted the disable-color-opacity-optimization branch May 1, 2020 19:20
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[v1.4] Turning off opacity in corePlugins config still generates CSS variables
1 participant