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

Add PostCSS root increasing specificity plugin #247

Merged
merged 3 commits into from
May 17, 2020

Conversation

yhatt
Copy link
Member

@yhatt yhatt commented May 17, 2020

To increase the specificity of replaced :root selector, I've added PostCSS root increasing specificity plugin and apply it while packaging style.

Now a below theme shows yellow background to follow the CSS specification.

/* @theme example */
:root { --bg: yellow; }
section { --bg: aqua; background-color: var(--bg); }

The added plugin will add pseudo-class :not(\9) to increase specificity.

This pseudo-class can increase the specificity of a rule. For example, #foo:not(#bar) will match the same element as the simpler #foo, but has a higher specificity.

https://developer.mozilla.org/en-US/docs/Web/CSS/:not

\9 (hard tab) is not matched into any elements so section:not(\9) has just same meaning as section.

Fix #245.


By this change, we'll revert the alias added in #246 to keep :root selector in added theme (Update the section size detection to parse :root directly instead of aliasing to section).

@yhatt yhatt merged commit 09034b3 into master May 17, 2020
@yhatt yhatt deleted the root-increasing-specificity branch May 17, 2020 13:34
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.

:root selector in Marpit is not following the specification of specificity
1 participant