-
|
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 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 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 <html dir="rtl">
<article dir="ltr">
<h3 className=".some-stylex-class">Title</h3>
</article>
</html>Asides
|
Beta Was this translation helpful? Give feedback.
Replies: 2 comments
-
Beta Was this translation helpful? Give feedback.
-
|
After further investigation I don't believe it is currently possible to polly-fill
So this has nothing to do with StyleX. As @chbybnwr mentioned if a StyleX can use |
Beta Was this translation helpful? Give feedback.
After further investigation I don't believe it is currently possible to polly-fill
:dir()psuedo selector behaviour (and this problem isn't limited to stylex). This limitation shows up in how CSS processing tools handle this, for example::dirselectors to[dir]attribute selectors (mentioned in original question):dirto:langselectorsSo this has nothing to do with StyleX. As @chbybnwr mentioned if a StyleX can use
stylex.when.*if they desire to conditionally apply styles based on an ancestor element.