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

Improve relative precedence of rtl, ltr, forced-colors and dark variants #12584

Merged
merged 2 commits into from
Dec 16, 2023

Conversation

adamwathan
Copy link
Member

Reduce specificity of rtl, ltr, and dark variants (when using darkMode: 'class') to make them the same as other variants.

This also sorts the ltr, rtl, dark, and forced-colors variants later in the variant plugin list to ensure that the reduced specificity doesn't cause them to start "losing" to other variants to keep things as backwards compatible as possible.

Resolves a long-standing issue where darkMode: 'media' and darkMode: 'class' had different specificity, which meant switching your dark mode strategy could break your site.

Variant Old New
dark :is(.dark &) :is(:where(.dark) &)
ltr :is([dir=ltr] &) :is(:where([dir=ltr]) &)
rtl :is([dir=rtl] &) :is(:where([dir=rtl]) &)

Reduce specificity of `rtl`, `ltr`, and `dark` variants (when using `darkMode: 'class'`) to make them the same as other variants. This also sorts the LTR/RTL and dark variants later in the variant plugin list to ensure that the reduced specificity doesn't cause them to start "losing" to other variants to keep things as backwards compatible as possible.

Resolves a long-standing issue where `darkMode: 'media'` and `darkMode: 'class'` had different specificity, which meant switching your dark mode strategy could break your site.
@adamwathan adamwathan merged commit af7e610 into master Dec 16, 2023
10 checks passed
@adamwathan adamwathan deleted the fix-dark-rtl-specificity branch December 16, 2023 23:53
thecrypticace pushed a commit that referenced this pull request Dec 18, 2023
…k` variants (#12584)

* Reduce specificity of `rtl`, `ltr`, and `dark` variants

Reduce specificity of `rtl`, `ltr`, and `dark` variants (when using `darkMode: 'class'`) to make them the same as other variants. This also sorts the LTR/RTL and dark variants later in the variant plugin list to ensure that the reduced specificity doesn't cause them to start "losing" to other variants to keep things as backwards compatible as possible.

Resolves a long-standing issue where `darkMode: 'media'` and `darkMode: 'class'` had different specificity, which meant switching your dark mode strategy could break your site.

* Update changelog

---------

Co-authored-by: Adam Wathan <[email protected]>
thecrypticace pushed a commit that referenced this pull request Dec 18, 2023
…k` variants (#12584)

* Reduce specificity of `rtl`, `ltr`, and `dark` variants

Reduce specificity of `rtl`, `ltr`, and `dark` variants (when using `darkMode: 'class'`) to make them the same as other variants. This also sorts the LTR/RTL and dark variants later in the variant plugin list to ensure that the reduced specificity doesn't cause them to start "losing" to other variants to keep things as backwards compatible as possible.

Resolves a long-standing issue where `darkMode: 'media'` and `darkMode: 'class'` had different specificity, which meant switching your dark mode strategy could break your site.

* Update changelog

---------

Co-authored-by: Adam Wathan <[email protected]>
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.

1 participant