-
Notifications
You must be signed in to change notification settings - Fork 4.2k
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
Make dark
and rtl
/ltr
variants insensitive to DOM order
#10766
Conversation
This feels a bit soon -- Safari 13 still has a lot of users, and many devs are still obligated to support it. With |
please tell me what tool do you use to create a fallback in the form of :matches? |
I made a custom PostCSS plugin. Looks like this: /*
This custom PostCSS plugin makes `:matches()` fallback rules for every
rule that uses `:is()` (mainly to support Safari < 14).
*/
/** @returns {import('postcss').Plugin} */
module.exports = () => {
return {
postcssPlugin: 'postcss-matches-fallback-for-is',
OnceExit(root) {
root.walkRules((rule) => {
if (!rule.selector.includes(':is(')) return;
const clone = rule.clone();
clone.selectors = clone.selectors.map((selector) =>
selector.replaceAll(':is(', ':matches(')
);
rule.before(clone);
});
},
};
};
module.exports.postcss = true; (I'm not a PostCSS expert, but this seems to work.) |
Thanks a lot! |
This PR tweaks the
rtl
/ltr
variants and thedark
variant (when using theclass
strategy) to use the:is()
pseudo-class to make it possible to stack these variants, while declaring both thedir
attribute and the.dark
parent class on the same element, or on parent elements in any order.Prior to this PR, stacking variants like
rtl:dark:italic
would create a selector like this:With this selector, only HTML using this structure would work:
This is inconvenient because what you really want to do is put both markers right on the
html
tag, like this:...but there was no easy way for us to make that work with how variants compose, other than to generate every combination of selectors like this:
Once this PR is merged, that same class would generate this CSS instead:
The
:is()
pseudo-class is the perfect solution here as it handles this sort of thing by design. Using:is()
, all three of these DOM structures just work:Browser support for
:is()
is very good at this point, with support back to Safari 14 which is close to three years old.Tailwind already uses CSS features that rely on even newer browsers (like native
aspect-ratio
support, as well as:where()
in Preflight), so it feels reasonable to me to start relying on:is()
in core as well.