Make `dark` and `rtl`/`ltr` variants insensitive to DOM order #10766

adamwathan · 2023-03-10T16:48:01Z

This PR tweaks the rtl/ltr variants and the dark variant (when using the class strategy) to use the :is() pseudo-class to make it possible to stack these variants, while declaring both the dir 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:

[dir="rtl"] .dark .rtl\:dark\:italic {
  font-style: italic;
}

With this selector, only HTML using this structure would work:

<div dir="rtl">
  <div class="dark">
    <p class="rtl:dark:italic">Hello world.</p>
  </div>
</div>

This is inconvenient because what you really want to do is put both markers right on the html tag, like this:

<html dir="rtl" class="dark">
  <!-- ... -->
    <p class="rtl:dark:italic">Hello world.</p>
  <!-- ... -->
</html>

...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:

[dir="rtl"] .dark .rtl\:dark\:italic,
.dark [dir="rtl"] .rtl\:dark\:italic,
.dark[dir="rtl"] .rtl\:dark\:italic {
  font-style: italic;
}

Once this PR is merged, that same class would generate this CSS instead:

:is([dir="rtl"] :is(.dark .rtl\:dark\:italic)) {
  font-style: italic;
}

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:

<html dir="rtl" class="dark">
  <!-- ... -->
    <p class="rtl:dark:italic">Hello world.</p>
  <!-- ... -->
</html>

<div dir="rtl">
  <div class="dark">
    <p class="rtl:dark:italic">Hello world.</p>
  </div>
</div>

<div class="dark">
  <div dir="rtl">
    <p class="rtl:dark:italic">Hello world.</p>
  </div>
</div>

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.

MichaelAllenWarner · 2023-03-11T02:50:10Z

This feels a bit soon -- Safari 13 still has a lot of users, and many devs are still obligated to support it.

With :is(), though, one can still include a :matches() fallback-rule to cover Safari 13. I wonder if it might be possible to include such a fallback here (on an opt-in basis, say). I've been doing this with custom variants of my own, for precisely the same reason (stacking multiple variants that use the descendant combinator). Just a thought.

7iomka · 2023-05-19T13:05:12Z

This feels a bit soon -- Safari 13 still has a lot of users, and many devs are still obligated to support it.

With :is(), though, one can still include a :matches() fallback-rule to cover Safari 13. I wonder if it might be possible to include such a fallback here (on an opt-in basis, say). I've been doing this with custom variants of my own, for precisely the same reason (stacking multiple variants that use the descendant combinator). Just a thought.

please tell me what tool do you use to create a fallback in the form of :matches?

MichaelAllenWarner · 2023-05-19T14:46:54Z

@7iomka

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.)

7iomka · 2023-05-20T16:33:12Z

@7iomka

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!

adamwathan added 3 commits March 10, 2023 11:27

Make dark and rtl/ltr variants insensitive to DOM order

19be3e2

Add explicit test for stacking dark and rtl variants

bd4c2fd

Update changelog

03ecc07

adamwathan merged commit e40b73a into master Mar 10, 2023

adamwathan deleted the dark-rtl-is branch March 10, 2023 17:03

dcastil mentioned this pull request Mar 28, 2023

Add support for Tailwind CSS v3.3 except line-height shorthand dcastil/tailwind-merge#210

Merged

27 tasks

rigor789 mentioned this pull request Apr 2, 2023

dark: not working NativeScript/tailwind#187

Open

reinink mentioned this pull request Apr 26, 2023

Dark mode doesn't work in v3.3.1 #11064

Closed

gbl08ma mentioned this pull request Aug 31, 2023

Dark mode stopped working in Qutebrowser tnyim/jungletv#75

Closed

adamwathan mentioned this pull request Feb 20, 2024

fix(corePlugins): more browser compatibility for rtl/ltr #12895

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Make `dark` and `rtl`/`ltr` variants insensitive to DOM order #10766

Make `dark` and `rtl`/`ltr` variants insensitive to DOM order #10766

adamwathan commented Mar 10, 2023

MichaelAllenWarner commented Mar 11, 2023

7iomka commented May 19, 2023

MichaelAllenWarner commented May 19, 2023

7iomka commented May 20, 2023

Make dark and rtl/ltr variants insensitive to DOM order #10766

Make dark and rtl/ltr variants insensitive to DOM order #10766

Conversation

adamwathan commented Mar 10, 2023

MichaelAllenWarner commented Mar 11, 2023

7iomka commented May 19, 2023

MichaelAllenWarner commented May 19, 2023

7iomka commented May 20, 2023

Make `dark` and `rtl`/`ltr` variants insensitive to DOM order #10766

Make `dark` and `rtl`/`ltr` variants insensitive to DOM order #10766