On the docs site and the sandbox, we use postcss-rtlcss, which prefixes selectors for direction-specific rules with [dir="ltr"] or [dir="rtl"]. It also prefixes selectors for potentially direction-sensitive rules with [dir], to avoid a specificity issue where a flipped rule accidentally has a higher specificity than a non-flipped rule. However, in https://gerrit.wikimedia.org/r/c/design/codex/+/1029216 we discovered another issue, where adding /*rtl:ignore*/ can also cause specificity issues.

To reduce specificity issues and also reduce how our CSS is mangled in general, we should consider using :where(). Specifically, we would configure postcss-rtlcss to:

• Use :where( [dir="ltr"] ) instead of [dir="ltr"]
• Use :where( [dir="rtl"] ) instead of [dir="rtl"]
• Not use [dir] at all

This should eliminate specificity issues, since the specificity of a :where() expression is 0. MDN says that :where() is supported in all browsers released after January 2021, so there shouldn't be any browser support issues (and also this only affects the doc site and the sandbox, not the library itself).