What is the recommended approach for handling RTL for CSS properties/values that do NOT have logical equivalents? #1720

mjames-c · 2026-06-16T07:43:27Z

mjames-c
Jun 16, 2026

Examples:

/* ltr */
.foo {
  transform: translateX(10px);
  background-image: url('./some-ltr-image.svg');
}

/* rtl */
.foo:dir(rtl) {
  transform: translateX(-10px);
  background-image: url('./some-rtl-image.svg');
}

Now, based on my example, the obvious choice is to use :dir() pseudo class:

import * as stylex from '@stylexjs/stylex';

const styles = stylex.create({
  backgroundImage: {
    default: 'url("./some-ltr-image.svg")',
    ':dir(rtl)': 'url("./some-rtl-image.svg")',
  },
  transform: {
    default: 'translateX(10px)',
    ':dir(rtl)': 'translateX(-10px)',
  },
});

However, at Canva, the :dir() pseudo class is NOT available in all browsers we support (e.g. we support Chrome versions as old as v89). What is the recommended approach for handling this?

I initially thought we could use the postcss-dir-pseudo-class plugin to post process the stylex generated CSS however I'm not confident that this will correctly handle cases where nested HTML elements contain dir attributes with different values:

<html dir="rtl">
  <article dir="ltr">
    <h3 className=".some-stylex-class">Title</h3>
  </article>
</html>

Asides

postcss-dir-pseudo-class should not break stylex specificity assumptions/correctness:

Using PostCSS Dir Pseudo Class will not impact selector weight, but it will require having at least one [dir] attribute in your HTML

chbybnwr · 2026-06-16T08:56:45Z

chbybnwr
Jun 16, 2026

Observing attribute selectors

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

What is the recommended approach for handling RTL for CSS properties/values that do NOT have logical equivalents? #1720

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

What is the recommended approach for handling RTL for CSS properties/values that do NOT have logical equivalents? #1720

Uh oh!

Uh oh!

mjames-c Jun 16, 2026

Asides

Replies: 1 comment

Uh oh!

chbybnwr Jun 16, 2026

mjames-c
Jun 16, 2026

chbybnwr
Jun 16, 2026