Skip to content

Commit 22973bd

Browse files
author
Anay Bhakat
committed
Auto-flipping CSS custom properties for logical float/clear
Replaces LTR/RTL polyfill with universal preprocessing that converts logical float/clear values to CSS custom properties. Eliminates separate RTL rules - one value auto-flips across all styleResolution modes.
1 parent c49d1a3 commit 22973bd

File tree

6 files changed

+61
-133
lines changed

6 files changed

+61
-133
lines changed

‎packages/@stylexjs/babel-plugin/__tests__/legacy/transform-legacy-polyfills-test.js‎

Lines changed: 32 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -255,10 +255,10 @@ describe('@stylexjs/babel-plugin', () => {
255255
{
256256
"stylex": [
257257
[
258-
"xodj72a",
258+
"x1s2rbg3",
259259
{
260-
"ltr": ".xodj72a{clear:right}",
261-
"rtl": ".xodj72a{clear:var(--1t497je)}",
260+
"ltr": ".x1s2rbg3{clear:var(--1t497je)}",
261+
"rtl": null,
262262
},
263263
3000,
264264
],
@@ -276,10 +276,10 @@ describe('@stylexjs/babel-plugin', () => {
276276
{
277277
"stylex": [
278278
[
279-
"x390i0x",
279+
"xnaenqf",
280280
{
281-
"ltr": ".x390i0x{clear:left}",
282-
"rtl": ".x390i0x{clear:var(--1bs9lmi)}",
281+
"ltr": ".xnaenqf{clear:var(--1bs9lmi)}",
282+
"rtl": null,
283283
},
284284
3000,
285285
],
@@ -297,10 +297,10 @@ describe('@stylexjs/babel-plugin', () => {
297297
{
298298
"stylex": [
299299
[
300-
"x1guec7k",
300+
"x1vdj7i2",
301301
{
302-
"ltr": ".x1guec7k{float:right}",
303-
"rtl": ".x1guec7k{float:var(--1t497je)}",
302+
"ltr": ".x1vdj7i2{float:var(--1t497je)}",
303+
"rtl": null,
304304
},
305305
3000,
306306
],
@@ -318,10 +318,10 @@ describe('@stylexjs/babel-plugin', () => {
318318
{
319319
"stylex": [
320320
[
321-
"xrbpyxo",
321+
"x3e4l88",
322322
{
323-
"ltr": ".xrbpyxo{float:left}",
324-
"rtl": ".xrbpyxo{float:var(--1bs9lmi)}",
323+
"ltr": ".x3e4l88{float:var(--1bs9lmi)}",
324+
"rtl": null,
325325
},
326326
3000,
327327
],
@@ -628,10 +628,10 @@ describe('@stylexjs/babel-plugin', () => {
628628
{
629629
"stylex": [
630630
[
631-
"xodj72a",
631+
"x1s2rbg3",
632632
{
633-
"ltr": ".xodj72a{clear:right}",
634-
"rtl": ".xodj72a{clear:var(--1t497je)}",
633+
"ltr": ".x1s2rbg3{clear:var(--1t497je)}",
634+
"rtl": null,
635635
},
636636
3000,
637637
],
@@ -652,10 +652,10 @@ describe('@stylexjs/babel-plugin', () => {
652652
{
653653
"stylex": [
654654
[
655-
"x390i0x",
655+
"xnaenqf",
656656
{
657-
"ltr": ".x390i0x{clear:left}",
658-
"rtl": ".x390i0x{clear:var(--1bs9lmi)}",
657+
"ltr": ".xnaenqf{clear:var(--1bs9lmi)}",
658+
"rtl": null,
659659
},
660660
3000,
661661
],
@@ -676,10 +676,10 @@ describe('@stylexjs/babel-plugin', () => {
676676
{
677677
"stylex": [
678678
[
679-
"x1guec7k",
679+
"x1vdj7i2",
680680
{
681-
"ltr": ".x1guec7k{float:right}",
682-
"rtl": ".x1guec7k{float:var(--1t497je)}",
681+
"ltr": ".x1vdj7i2{float:var(--1t497je)}",
682+
"rtl": null,
683683
},
684684
3000,
685685
],
@@ -700,10 +700,10 @@ describe('@stylexjs/babel-plugin', () => {
700700
{
701701
"stylex": [
702702
[
703-
"xrbpyxo",
703+
"x3e4l88",
704704
{
705-
"ltr": ".xrbpyxo{float:left}",
706-
"rtl": ".xrbpyxo{float:var(--1bs9lmi)}",
705+
"ltr": ".x3e4l88{float:var(--1bs9lmi)}",
706+
"rtl": null,
707707
},
708708
3000,
709709
],
@@ -1010,9 +1010,9 @@ describe('@stylexjs/babel-plugin', () => {
10101010
{
10111011
"stylex": [
10121012
[
1013-
"xodj72a",
1013+
"x1s2rbg3",
10141014
{
1015-
"ltr": ".xodj72a{clear:end}",
1015+
"ltr": ".x1s2rbg3{clear:var(--1t497je)}",
10161016
"rtl": null,
10171017
},
10181018
3000,
@@ -1034,9 +1034,9 @@ describe('@stylexjs/babel-plugin', () => {
10341034
{
10351035
"stylex": [
10361036
[
1037-
"x390i0x",
1037+
"xnaenqf",
10381038
{
1039-
"ltr": ".x390i0x{clear:start}",
1039+
"ltr": ".xnaenqf{clear:var(--1bs9lmi)}",
10401040
"rtl": null,
10411041
},
10421042
3000,
@@ -1058,9 +1058,9 @@ describe('@stylexjs/babel-plugin', () => {
10581058
{
10591059
"stylex": [
10601060
[
1061-
"x1guec7k",
1061+
"x1vdj7i2",
10621062
{
1063-
"ltr": ".x1guec7k{float:end}",
1063+
"ltr": ".x1vdj7i2{float:var(--1t497je)}",
10641064
"rtl": null,
10651065
},
10661066
3000,
@@ -1082,9 +1082,9 @@ describe('@stylexjs/babel-plugin', () => {
10821082
{
10831083
"stylex": [
10841084
[
1085-
"xrbpyxo",
1085+
"x3e4l88",
10861086
{
1087-
"ltr": ".xrbpyxo{float:start}",
1087+
"ltr": ".x3e4l88{float:var(--1bs9lmi)}",
10881088
"rtl": null,
10891089
},
10901090
3000,

‎packages/@stylexjs/babel-plugin/__tests__/legacy/transform-logical-values-test.js‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -43,8 +43,8 @@ describe('@stylexjs/babel-plugin', () => {
4343
"import _inject from "@stylexjs/stylex/lib/stylex-inject";
4444
var _inject2 = _inject;
4545
import stylex from 'stylex';
46-
_inject2(".xof8tvn{clear:right}", 3000, ".xof8tvn{clear:var(--1t497je)}");
47-
const classnames = "xof8tvn";"
46+
_inject2(".x1s2rbg3{clear:var(--1t497je)}", 3000);
47+
const classnames = "x1s2rbg3";"
4848
`);
4949
});
5050

@@ -59,8 +59,8 @@ describe('@stylexjs/babel-plugin', () => {
5959
"import _inject from "@stylexjs/stylex/lib/stylex-inject";
6060
var _inject2 = _inject;
6161
import stylex from 'stylex';
62-
_inject2(".x18lmvvi{clear:left}", 3000, ".x18lmvvi{clear:var(--1bs9lmi)}");
63-
const classnames = "x18lmvvi";"
62+
_inject2(".xnaenqf{clear:var(--1bs9lmi)}", 3000);
63+
const classnames = "xnaenqf";"
6464
`);
6565
});
6666

@@ -75,8 +75,8 @@ describe('@stylexjs/babel-plugin', () => {
7575
"import _inject from "@stylexjs/stylex/lib/stylex-inject";
7676
var _inject2 = _inject;
7777
import stylex from 'stylex';
78-
_inject2(".x1h0q493{float:right}", 3000, ".x1h0q493{float:var(--1t497je)}");
79-
const classnames = "x1h0q493";"
78+
_inject2(".x1vdj7i2{float:var(--1t497je)}", 3000);
79+
const classnames = "x1vdj7i2";"
8080
`);
8181
});
8282

@@ -91,8 +91,8 @@ describe('@stylexjs/babel-plugin', () => {
9191
"import _inject from "@stylexjs/stylex/lib/stylex-inject";
9292
var _inject2 = _inject;
9393
import stylex from 'stylex';
94-
_inject2(".x1kmio9f{float:left}", 3000, ".x1kmio9f{float:var(--1bs9lmi)}");
95-
const classnames = "x1kmio9f";"
94+
_inject2(".x3e4l88{float:var(--1bs9lmi)}", 3000);
95+
const classnames = "x3e4l88";"
9696
`);
9797
});
9898

‎packages/@stylexjs/babel-plugin/__tests__/transform-process-test.js‎

Lines changed: 18 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -199,7 +199,7 @@ describe('@stylexjs/babel-plugin', () => {
199199
"textShadow-kKMj4B": "textShadow-x1skrh0i textShadow-x1cmij7u",
200200
"padding-kmVPX3": "padding-xss17vw",
201201
"margin-kogj98": "margin-xymmreb",
202-
"float-kyUFMd": "float-x1kmio9f",
202+
"float-kyUFMd": "float-x3e4l88",
203203
$$css: "app/main.js:31"
204204
},
205205
overrideColor: {
@@ -222,12 +222,12 @@ describe('@stylexjs/babel-plugin', () => {
222222
).toMatchInlineSnapshot(`
223223
"
224224
:root, [dir="ltr"] {
225-
--1t497je: left;
226-
--1bs9lmi: right;
225+
--1bs9lmi: left;
226+
--1t497je: right;
227227
}
228228
[dir="rtl"] {
229-
--1t497je: right;
230-
--1bs9lmi: left;
229+
--1bs9lmi: right;
230+
--1t497je: left;
231231
}
232232
@property --x-color { syntax: "*"; inherits: false;}
233233
@keyframes x35atj5-B{0%{box-shadow:1px 2px 3px 4px red;color:yellow;}100%{box-shadow:10px 20px 30px 40px green;color:var(--orange-theme-color);}}
@@ -244,8 +244,7 @@ describe('@stylexjs/babel-plugin', () => {
244244
.animationName-x13ah0pd:not(#\\#):not(#\\#):not(#\\#){animation-name:x35atj5-B}
245245
.backgroundColor-xrkmrrc:not(#\\#):not(#\\#):not(#\\#){background-color:red}
246246
.color-x14rh7hd:not(#\\#):not(#\\#):not(#\\#){color:var(--x-color)}
247-
html:not([dir='rtl']) .float-x1kmio9f:not(#\\#):not(#\\#):not(#\\#){float:left}
248-
html[dir='rtl'] .float-x1kmio9f:not(#\\#):not(#\\#):not(#\\#){float:var(--1bs9lmi)}
247+
.float-x3e4l88:not(#\\#):not(#\\#):not(#\\#){float:var(--1bs9lmi)}
249248
.textShadow-x1skrh0i:not(#\\#):not(#\\#):not(#\\#){text-shadow:1px 2px 3px 4px red}
250249
@media (min-width:320px){.textShadow-x1cmij7u.textShadow-x1cmij7u:not(#\\#):not(#\\#):not(#\\#){text-shadow:10px 20px 30px 40px green}}"
251250
`);
@@ -289,7 +288,7 @@ describe('@stylexjs/babel-plugin', () => {
289288
"textShadow-kKMj4B": "textShadow-x1skrh0i textShadow-x1cmij7u",
290289
"padding-kmVPX3": "padding-xss17vw",
291290
"margin-kogj98": "margin-xymmreb",
292-
"float-kyUFMd": "float-x1kmio9f",
291+
"float-kyUFMd": "float-x3e4l88",
293292
$$css: "app/main.js:31"
294293
},
295294
overrideColor: {
@@ -312,12 +311,12 @@ describe('@stylexjs/babel-plugin', () => {
312311
).toMatchInlineSnapshot(`
313312
"
314313
:root, [dir="ltr"] {
315-
--1t497je: left;
316-
--1bs9lmi: right;
314+
--1bs9lmi: left;
315+
--1t497je: right;
317316
}
318317
[dir="rtl"] {
319-
--1t497je: right;
320-
--1bs9lmi: left;
318+
--1bs9lmi: right;
319+
--1t497je: left;
321320
}
322321
323322
@layer priority1, priority2, priority3, priority4;
@@ -341,8 +340,7 @@ describe('@stylexjs/babel-plugin', () => {
341340
.animationName-x13ah0pd{animation-name:x35atj5-B}
342341
.backgroundColor-xrkmrrc{background-color:red}
343342
.color-x14rh7hd{color:var(--x-color)}
344-
html:not([dir='rtl']) .float-x1kmio9f{float:left}
345-
html[dir='rtl'] .float-x1kmio9f{float:var(--1bs9lmi)}
343+
.float-x3e4l88{float:var(--1bs9lmi)}
346344
.textShadow-x1skrh0i{text-shadow:1px 2px 3px 4px red}
347345
@media (min-width:320px){.textShadow-x1cmij7u.textShadow-x1cmij7u{text-shadow:10px 20px 30px 40px green}}
348346
}"
@@ -395,7 +393,7 @@ describe('@stylexjs/babel-plugin', () => {
395393
"paddingInlineEnd-kwRFfy": "paddingInlineEnd-x1q3ajuy",
396394
"paddingBottom-kGO01o": "paddingBottom-xs9asl8",
397395
"paddingInlineStart-kZCmMZ": "paddingInlineStart-x1gx403c",
398-
"float-kyUFMd": "float-x1kmio9f",
396+
"float-kyUFMd": "float-x3e4l88",
399397
$$css: "app/main.js:23"
400398
}
401399
};"
@@ -409,17 +407,16 @@ describe('@stylexjs/babel-plugin', () => {
409407
).toMatchInlineSnapshot(`
410408
"
411409
:root, [dir="ltr"] {
412-
--1t497je: left;
413-
--1bs9lmi: right;
410+
--1bs9lmi: left;
411+
--1t497je: right;
414412
}
415413
[dir="rtl"] {
416-
--1t497je: right;
417-
--1bs9lmi: left;
414+
--1bs9lmi: right;
415+
--1t497je: left;
418416
}
419417
:root, .xsg933n{--blue-xpqh4lw:blue;}
420418
:root, .xbiwvf9{--small-x19twipt:2px;--medium-xypjos2:4px;--large-x1ec7iuc:8px;}
421-
/* @ltr begin */.float-x1kmio9f:not(#\\#){float:left}/* @ltr end */
422-
/* @rtl begin */.float-x1kmio9f:not(#\\#){float:var(--1bs9lmi)}/* @rtl end */
419+
.float-x3e4l88:not(#\\#){float:var(--1bs9lmi)}
423420
/* @ltr begin */.marginInlineStart-xqsn43r:not(#\\#){margin-left:20px}/* @ltr end */
424421
/* @rtl begin */.marginInlineStart-xqsn43r:not(#\\#){margin-right:20px}/* @rtl end */
425422
/* @ltr begin */.marginInlineEnd-x3aesyq:not(#\\#){margin-right:20px}/* @ltr end */

‎packages/@stylexjs/babel-plugin/src/shared/physical-rtl/generate-ltr.js‎

Lines changed: 0 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,6 @@
1010
import type { StyleXOptions } from '../common-types';
1111
import { defaultOptions } from '../utils/default-options';
1212

13-
const logicalToPhysical: $ReadOnly<{ [string]: string }> = {
14-
start: 'left',
15-
end: 'right',
16-
'inline-start': 'left',
17-
'inline-end': 'right',
18-
};
19-
2013
// These properties are kept for a polyfill that is only used with `legacy-expand-shorthands`
2114
const inlinePropertyToLTR: $ReadOnly<{
2215
[key: string]: ($ReadOnly<[string, string]>) => $ReadOnly<[string, string]>,
@@ -159,14 +152,6 @@ const propertyToLTR: $ReadOnly<{
159152
'border-bottom-right-radius',
160153
val,
161154
],
162-
float: ([key, val]: $ReadOnly<[string, string]>) => [
163-
key,
164-
logicalToPhysical[val] ?? val,
165-
],
166-
clear: ([key, val]: $ReadOnly<[string, string]>) => [
167-
key,
168-
logicalToPhysical[val] ?? val,
169-
],
170155
start: ([_key, val]: $ReadOnly<[string, string]>) => ['left', val],
171156
// 'inset-inline-start': ([key, val]: $ReadOnly<[string, string]>) => ['left', val],
172157
end: ([_key, val]: $ReadOnly<[string, string]>) => ['right', val],

‎packages/@stylexjs/babel-plugin/src/shared/physical-rtl/generate-rtl.js‎

Lines changed: 0 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,6 @@
1010
import type { StyleXOptions } from '../common-types';
1111
import { defaultOptions } from '../utils/default-options';
1212
import parser from 'postcss-value-parser';
13-
import {
14-
LOGICAL_FLOAT_START_VAR,
15-
LOGICAL_FLOAT_END_VAR,
16-
} from '../preprocess-rules/legacy-expand-shorthands';
1713

1814
const cursorFlip: $ReadOnly<{ [string]: string }> = {
1915
'e-resize': 'w-resize',
@@ -80,13 +76,6 @@ function flipShadow(value: string) {
8076
}
8177
}
8278

83-
const logicalToPhysical: $ReadOnly<{ [string]: string }> = {
84-
start: `var(${LOGICAL_FLOAT_END_VAR})`,
85-
end: `var(${LOGICAL_FLOAT_START_VAR})`,
86-
'inline-start': `var(${LOGICAL_FLOAT_END_VAR})`,
87-
'inline-end': `var(${LOGICAL_FLOAT_START_VAR})`,
88-
};
89-
9079
// These properties are kept for a polyfill that is only used with `legacy-expand-shorthands`
9180
const inlinePropertyToRTL: $ReadOnly<{
9281
[key: string]: ($ReadOnly<[string, string]>) => $ReadOnly<[string, string]>,
@@ -232,10 +221,6 @@ const propertyToRTL: $ReadOnly<{
232221
'border-bottom-left-radius',
233222
val,
234223
],
235-
float: ([key, val]) =>
236-
logicalToPhysical[val] != null ? [key, logicalToPhysical[val]] : null,
237-
clear: ([key, val]) =>
238-
logicalToPhysical[val] != null ? [key, logicalToPhysical[val]] : null,
239224
start: ([_key, val]) => ['right', val],
240225
// 'inset-inline-start': ([key, val]) => ['right', val],
241226
end: ([_key, val]) => ['left', val],

0 commit comments

Comments
 (0)