Skip to content

Commit ca7e2f8

Browse files
abhakatAnay Bhakat
authored and
hiteshshetty-dev
committed
[babel-plugin][legacy] Polyfill logical float values (facebook#1237)
* addressed Melissa' suggestions * More changes that are hopefully correct * Version that doesn't check for float and clear * The first version is probably correct as it passes all the other suites, going to use it * last bit of changes missed + updating tests --------- Co-authored-by: Anay Bhakat <[email protected]>
1 parent 1b461ff commit ca7e2f8

File tree

6 files changed

+88
-53
lines changed

6 files changed

+88
-53
lines changed

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

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -628,10 +628,10 @@ describe('@stylexjs/babel-plugin', () => {
628628
{
629629
"stylex": [
630630
[
631-
"xodj72a",
631+
"x1wx8h15",
632632
{
633-
"ltr": ".xodj72a{clear:right}",
634-
"rtl": ".xodj72a{clear:left}",
633+
"ltr": ".x1wx8h15{clear:var(--stylex-logical-end)}",
634+
"rtl": null,
635635
},
636636
3000,
637637
],
@@ -652,10 +652,10 @@ describe('@stylexjs/babel-plugin', () => {
652652
{
653653
"stylex": [
654654
[
655-
"x390i0x",
655+
"x1fhb4fj",
656656
{
657-
"ltr": ".x390i0x{clear:left}",
658-
"rtl": ".x390i0x{clear:right}",
657+
"ltr": ".x1fhb4fj{clear:var(--stylex-logical-start)}",
658+
"rtl": null,
659659
},
660660
3000,
661661
],
@@ -676,10 +676,10 @@ describe('@stylexjs/babel-plugin', () => {
676676
{
677677
"stylex": [
678678
[
679-
"x1guec7k",
679+
"xtrg13t",
680680
{
681-
"ltr": ".x1guec7k{float:right}",
682-
"rtl": ".x1guec7k{float:left}",
681+
"ltr": ".xtrg13t{float:var(--stylex-logical-end)}",
682+
"rtl": null,
683683
},
684684
3000,
685685
],
@@ -700,10 +700,10 @@ describe('@stylexjs/babel-plugin', () => {
700700
{
701701
"stylex": [
702702
[
703-
"xrbpyxo",
703+
"xj87blo",
704704
{
705-
"ltr": ".xrbpyxo{float:left}",
706-
"rtl": ".xrbpyxo{float:right}",
705+
"ltr": ".xj87blo{float:var(--stylex-logical-start)}",
706+
"rtl": null,
707707
},
708708
3000,
709709
],
@@ -1010,10 +1010,10 @@ describe('@stylexjs/babel-plugin', () => {
10101010
{
10111011
"stylex": [
10121012
[
1013-
"xodj72a",
1013+
"x1wx8h15",
10141014
{
1015-
"ltr": ".xodj72a{clear:right}",
1016-
"rtl": ".xodj72a{clear:left}",
1015+
"ltr": ".x1wx8h15{clear:var(--stylex-logical-end)}",
1016+
"rtl": null,
10171017
},
10181018
3000,
10191019
],
@@ -1034,10 +1034,10 @@ describe('@stylexjs/babel-plugin', () => {
10341034
{
10351035
"stylex": [
10361036
[
1037-
"x390i0x",
1037+
"x1fhb4fj",
10381038
{
1039-
"ltr": ".x390i0x{clear:left}",
1040-
"rtl": ".x390i0x{clear:right}",
1039+
"ltr": ".x1fhb4fj{clear:var(--stylex-logical-start)}",
1040+
"rtl": null,
10411041
},
10421042
3000,
10431043
],
@@ -1058,10 +1058,10 @@ describe('@stylexjs/babel-plugin', () => {
10581058
{
10591059
"stylex": [
10601060
[
1061-
"x1guec7k",
1061+
"xtrg13t",
10621062
{
1063-
"ltr": ".x1guec7k{float:right}",
1064-
"rtl": ".x1guec7k{float:left}",
1063+
"ltr": ".xtrg13t{float:var(--stylex-logical-end)}",
1064+
"rtl": null,
10651065
},
10661066
3000,
10671067
],
@@ -1082,10 +1082,10 @@ describe('@stylexjs/babel-plugin', () => {
10821082
{
10831083
"stylex": [
10841084
[
1085-
"xrbpyxo",
1085+
"xj87blo",
10861086
{
1087-
"ltr": ".xrbpyxo{float:left}",
1088-
"rtl": ".xrbpyxo{float:right}",
1087+
"ltr": ".xj87blo{float:var(--stylex-logical-start)}",
1088+
"rtl": null,
10891089
},
10901090
3000,
10911091
],

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

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -498,7 +498,7 @@ describe('@stylexjs/babel-plugin', () => {
498498
"paddingInlineEnd-kwRFfy": "paddingInlineEnd-x1q3ajuy",
499499
"paddingBottom-kGO01o": "paddingBottom-xs9asl8",
500500
"paddingInlineStart-kZCmMZ": "paddingInlineStart-x1gx403c",
501-
"float-kyUFMd": "float-x1kmio9f",
501+
"float-kyUFMd": "float-xj87blo",
502502
$$css: "app/main.js:25"
503503
}
504504
};"
@@ -510,13 +510,20 @@ describe('@stylexjs/babel-plugin', () => {
510510
enableLTRRTLComments: true,
511511
}),
512512
).toMatchInlineSnapshot(`
513-
":root, .xsg933n{--blue-xpqh4lw:blue;--marginTokens-x8nt2k2:10px;--colorTokens-xkxfyv:red;}
513+
":root, [dir="ltr"] {
514+
--stylex-logical-start: left;
515+
--stylex-logical-end: right;
516+
}
517+
[dir="rtl"] {
518+
--stylex-logical-start: right;
519+
--stylex-logical-end: left;
520+
}
521+
:root, .xsg933n{--blue-xpqh4lw:blue;--marginTokens-x8nt2k2:10px;--colorTokens-xkxfyv:red;}
514522
:root, .xbiwvf9{--small-x19twipt:2px;--medium-xypjos2:4px;--large-x1ec7iuc:8px;}
515523
@media (prefers-color-scheme: dark){:root, .xsg933n{--colorTokens-xkxfyv:lightblue;}}
516524
@media (min-width: 600px){:root, .xsg933n{--marginTokens-x8nt2k2:20px;}}
517525
@supports (color: oklab(0 0 0)){@media (prefers-color-scheme: dark){:root, .xsg933n{--colorTokens-xkxfyv:oklab(0.7 -0.3 -0.4);}}}
518-
/* @ltr begin */.float-x1kmio9f:not(#\\#){float:left}/* @ltr end */
519-
/* @rtl begin */.float-x1kmio9f:not(#\\#){float:right}/* @rtl end */
526+
.float-xj87blo:not(#\\#){float:var(--stylex-logical-start)}
520527
/* @ltr begin */.marginInlineStart-xqsn43r:not(#\\#){margin-left:20px}/* @ltr end */
521528
/* @rtl begin */.marginInlineStart-xqsn43r:not(#\\#){margin-right:20px}/* @rtl end */
522529
/* @ltr begin */.marginInlineEnd-x3aesyq:not(#\\#){margin-right:20px}/* @ltr end */

‎packages/@stylexjs/babel-plugin/src/index.js‎

Lines changed: 33 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,10 @@ import transformStylexProps from './visitors/stylex-props';
3333
import { skipStylexPropsChildren } from './visitors/stylex-props';
3434
import transformStyleXViewTransitionClass from './visitors/stylex-view-transition-class';
3535
import transformStyleXDefaultMarker from './visitors/stylex-default-marker';
36+
import {
37+
LOGICAL_FLOAT_START_VAR,
38+
LOGICAL_FLOAT_END_VAR,
39+
} from './shared/preprocess-rules/legacy-expand-shorthands';
3640

3741
const NAME = 'stylex';
3842

@@ -357,6 +361,32 @@ export type Rule = [
357361
},
358362
number,
359363
];
364+
365+
function getLogicalFloatVars(rules: Array<Rule>): string {
366+
const hasLogicalFloat = rules.some(([, { ltr, rtl }]) => {
367+
const ltrStr = String(ltr);
368+
const rtlStr = rtl ? String(rtl) : '';
369+
return (
370+
ltrStr.includes(LOGICAL_FLOAT_START_VAR) ||
371+
ltrStr.includes(LOGICAL_FLOAT_END_VAR) ||
372+
rtlStr.includes(LOGICAL_FLOAT_START_VAR) ||
373+
rtlStr.includes(LOGICAL_FLOAT_END_VAR)
374+
);
375+
});
376+
377+
return hasLogicalFloat
378+
? `:root, [dir="ltr"] {
379+
${LOGICAL_FLOAT_START_VAR}: left;
380+
${LOGICAL_FLOAT_END_VAR}: right;
381+
}
382+
[dir="rtl"] {
383+
${LOGICAL_FLOAT_START_VAR}: right;
384+
${LOGICAL_FLOAT_END_VAR}: left;
385+
}
386+
`
387+
: '';
388+
}
389+
360390
function processStylexRules(
361391
rules: Array<Rule>,
362392
config?:
@@ -491,6 +521,8 @@ function processStylexRules(
491521
return acc;
492522
}, []);
493523

524+
const logicalFloatVars = getLogicalFloatVars(nonConstantRules);
525+
494526
const header = useLayers
495527
? '\n@layer ' +
496528
grouped.map((_, index) => `priority${index + 1}`).join(', ') +
@@ -549,7 +581,7 @@ function processStylexRules(
549581
})
550582
.join('\n');
551583

552-
return header + collectedCSS;
584+
return logicalFloatVars + header + collectedCSS;
553585
}
554586

555587
styleXTransform.processStylexRules = processStylexRules;

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

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -17,14 +17,6 @@ const logicalToPhysical: $ReadOnly<{ [string]: string }> = {
1717
'inline-end': 'right',
1818
};
1919

20-
// These values are polyfilled to LTR/RTL equivalents due to incomplete browser support, regardless of `enableLogicalStylesPolyfill`
21-
const legacyValuesPolyfill: $ReadOnly<{
22-
[key: string]: ($ReadOnly<[string, string]>) => $ReadOnly<[string, string]>,
23-
}> = {
24-
float: ([key, val]) => [key, logicalToPhysical[val] ?? val],
25-
clear: ([key, val]) => [key, logicalToPhysical[val] ?? val],
26-
};
27-
2820
// These properties are kept for a polyfill that is only used with `legacy-expand-shorthands`
2921
const inlinePropertyToLTR: $ReadOnly<{
3022
[key: string]: ($ReadOnly<[string, string]>) => $ReadOnly<[string, string]>,
@@ -203,9 +195,6 @@ export default function generateLTR(
203195

204196
if (styleResolution === 'legacy-expand-shorthands') {
205197
if (!enableLogicalStylesPolyfill) {
206-
if (legacyValuesPolyfill[key]) {
207-
return legacyValuesPolyfill[key](pair);
208-
}
209198
return pair;
210199
}
211200

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

Lines changed: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -83,14 +83,6 @@ const logicalToPhysical: $ReadOnly<{ [string]: string }> = {
8383
'inline-end': 'left',
8484
};
8585

86-
// These values are polyfilled to LTR/RTL equivalents due to incomplete browser support, regardless of `enableLogicalStylesPolyfill`
87-
const legacyValuesPolyfill: $ReadOnly<{
88-
[key: string]: ($ReadOnly<[string, string]>) => $ReadOnly<[string, string]>,
89-
}> = {
90-
float: ([key, val]) => [key, logicalToPhysical[val] ?? val],
91-
clear: ([key, val]) => [key, logicalToPhysical[val] ?? val],
92-
};
93-
9486
// These properties are kept for a polyfill that is only used with `legacy-expand-shorthands`
9587
const inlinePropertyToRTL: $ReadOnly<{
9688
[key: string]: ($ReadOnly<[string, string]>) => $ReadOnly<[string, string]>,
@@ -295,13 +287,8 @@ export default function generateRTL(
295287

296288
if (styleResolution === 'legacy-expand-shorthands') {
297289
if (!enableLogicalStylesPolyfill) {
298-
if (legacyValuesPolyfill[key]) {
299-
return legacyValuesPolyfill[key](pair);
300-
}
301-
302290
return null;
303291
}
304-
305292
if (inlinePropertyToRTL[key]) {
306293
return inlinePropertyToRTL[key](pair);
307294
}

‎packages/@stylexjs/babel-plugin/src/shared/preprocess-rules/legacy-expand-shorthands.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,9 @@ import type { TStyleValue } from '../common-types';
1111

1212
import splitValue from '../utils/split-css-value';
1313

14+
export const LOGICAL_FLOAT_START_VAR = '--stylex-logical-start';
15+
export const LOGICAL_FLOAT_END_VAR = '--stylex-logical-end';
16+
1417
// TODO: to be added later.
1518
// const aliases = {
1619
// marginInlineStart: (rawValue) => [['marginStart', rawValue]],
@@ -515,6 +518,23 @@ const aliases = {
515518
scrollMarginBlockEnd: (value: TStyleValue): TReturn => [
516519
['scrollMarginBottom', value],
517520
],
521+
float: (value: TStyleValue): TReturn => {
522+
if (value === 'inline-start' || value === 'start') {
523+
return [['float', `var(${LOGICAL_FLOAT_START_VAR})`]];
524+
} else if (value === 'inline-end' || value === 'end') {
525+
return [['float', `var(${LOGICAL_FLOAT_END_VAR})`]];
526+
}
527+
return [['float', value]];
528+
},
529+
530+
clear: (value: TStyleValue): TReturn => {
531+
if (value === 'inline-start' || value === 'start') {
532+
return [['clear', `var(${LOGICAL_FLOAT_START_VAR})`]];
533+
} else if (value === 'inline-end' || value === 'end') {
534+
return [['clear', `var(${LOGICAL_FLOAT_END_VAR})`]];
535+
}
536+
return [['clear', value]];
537+
},
518538
};
519539

520540
const expansions = {

0 commit comments

Comments
 (0)