Skip to content

Commit 166d441

Browse files
mellyeliumellyeliu
committed
[babel-plugin] group css rules by media query
1 parent 71f164c commit 166d441

File tree

2 files changed

+196
-44
lines changed

2 files changed

+196
-44
lines changed

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

Lines changed: 113 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -222,14 +222,14 @@ describe('@stylexjs/babel-plugin', () => {
222222
.margin-xymmreb:not(#\\#){margin:10px 20px}
223223
.padding-xss17vw:not(#\\#){padding:var(--large-x1ec7iuc)}
224224
.borderColor-x1bg2uv5:not(#\\#):not(#\\#){border-color:green}
225-
@media (max-width: 1000px){.borderColor-x5ugf7c.borderColor-x5ugf7c:not(#\\#):not(#\\#){border-color:var(--blue-xpqh4lw)}}
226-
@media (max-width: 500px){@media (max-width: 1000px){.borderColor-xqiy1ys.borderColor-xqiy1ys.borderColor-xqiy1ys:not(#\\#):not(#\\#){border-color:yellow}}}
227225
.animationName-xckgs0v:not(#\\#):not(#\\#):not(#\\#){animation-name:xi07kvp-B}
228226
.backgroundColor-xrkmrrc:not(#\\#):not(#\\#):not(#\\#){background-color:red}
229227
.color-x14rh7hd:not(#\\#):not(#\\#):not(#\\#){color:var(--x-color)}
230228
html:not([dir='rtl']) .float-x1kmio9f:not(#\\#):not(#\\#):not(#\\#){float:left}
231229
html[dir='rtl'] .float-x1kmio9f:not(#\\#):not(#\\#):not(#\\#){float:right}
232230
.textShadow-x1skrh0i:not(#\\#):not(#\\#):not(#\\#){text-shadow:1px 2px 3px 4px red}
231+
@media (max-width: 1000px){.borderColor-x5ugf7c.borderColor-x5ugf7c:not(#\\#):not(#\\#){border-color:var(--blue-xpqh4lw)}}
232+
@media (max-width: 500px){@media (max-width: 1000px){.borderColor-xqiy1ys.borderColor-xqiy1ys.borderColor-xqiy1ys:not(#\\#):not(#\\#){border-color:yellow}}}
233233
@media (min-width:320px){.textShadow-x1cmij7u.textShadow-x1cmij7u:not(#\\#):not(#\\#):not(#\\#){text-shadow:10px 20px 30px 40px green}}"
234234
`);
235235
});
@@ -425,5 +425,116 @@ describe('@stylexjs/babel-plugin', () => {
425425
.x57uvma.x57uvma, .x57uvma.x57uvma:root{--large-x1ec7iuc:20px;--medium-xypjos2:10px;--small-x19twipt:5px;}"
426426
`);
427427
});
428+
429+
test('media query grouping - rules with same media query are grouped together', () => {
430+
const { _code, metadata } = transform(
431+
`
432+
import * as stylex from '@stylexjs/stylex';
433+
export const styles = stylex.create({
434+
container: {
435+
'@media (max-width: 768px)': {
436+
width: '10px',
437+
height: '20px',
438+
},
439+
color: {
440+
default: 'black',
441+
'@media (max-width: 308px)': 'white',
442+
'@media (max-width: 768px)': 'red',
443+
},
444+
backgroundColor: {
445+
default: 'white',
446+
'@media (max-width: 768px)': 'blue',
447+
'@media (min-width: 1024px)': 'yellow',
448+
},
449+
fontSize: {
450+
default: '16px',
451+
'@media (max-width: 768px)': '14px',
452+
},
453+
padding: {
454+
default: '10px',
455+
'@media (min-width: 1024px)': '20px',
456+
},
457+
margin: {
458+
default: '5px',
459+
'@media (min-width: 1024px)': '10px',
460+
}
461+
}
462+
});
463+
`,
464+
);
465+
466+
const css = stylexPlugin.processStylexRules(metadata);
467+
468+
expect(css).toMatchInlineSnapshot(`
469+
":root, .xsg933n{--blue-xpqh4lw:blue;}
470+
:root, .xbiwvf9{--small-x19twipt:2px;--medium-xypjos2:4px;--large-x1ec7iuc:8px;}
471+
.margin-x16zck5j:not(#\\#){margin:5px}
472+
.padding-x7z7khe:not(#\\#){padding:10px}
473+
.backgroundColor-x12peec7:not(#\\#):not(#\\#){background-color:white}
474+
.color-x1mqxbix:not(#\\#):not(#\\#){color:black}
475+
.fontSize-x1j61zf2:not(#\\#):not(#\\#){font-size:16px}
476+
@media (min-width: 1024px){
477+
.margin-x1nff4mz.margin-x1nff4mz:not(#\\#){margin:10px}
478+
.padding-x1glw0n9.padding-x1glw0n9:not(#\\#){padding:20px}
479+
.backgroundColor-xkbfoqe.backgroundColor-xkbfoqe:not(#\\#):not(#\\#){background-color:yellow}
480+
}
481+
@media (max-width: 768px){
482+
.backgroundColor-xycim1f.backgroundColor-xycim1f:not(#\\#):not(#\\#){background-color:blue}
483+
.color-x9i7o1z.color-x9i7o1z:not(#\\#):not(#\\#){color:red}
484+
.fontSize-xt5ov9y.fontSize-xt5ov9y:not(#\\#):not(#\\#){font-size:14px}
485+
.height-x12z8348.height-x12z8348:not(#\\#):not(#\\#):not(#\\#){height:20px}
486+
.width-x7lwmry.width-x7lwmry:not(#\\#):not(#\\#):not(#\\#){width:10px}
487+
}
488+
@media (max-width: 308px){.color-x1760m8v.color-x1760m8v:not(#\\#):not(#\\#){color:white}}"
489+
`);
490+
});
491+
492+
test('media query grouping with layers - rules with same media query are grouped together', () => {
493+
const { _code, metadata } = transform(
494+
`
495+
import * as stylex from '@stylexjs/stylex';
496+
export const styles = stylex.create({
497+
container: {
498+
color: {
499+
default: 'black',
500+
'@media (max-width: 768px)': 'red',
501+
},
502+
backgroundColor: {
503+
default: 'white',
504+
'@media (max-width: 768px)': 'blue',
505+
},
506+
fontSize: {
507+
default: '16px',
508+
'@media (max-width: 768px)': '14px',
509+
}
510+
}
511+
});
512+
`,
513+
{
514+
useLayers: true,
515+
},
516+
);
517+
518+
const css = stylexPlugin.processStylexRules(metadata, true);
519+
520+
expect(css).toMatchInlineSnapshot(`
521+
"
522+
@layer priority1, priority2;
523+
@layer priority1{
524+
:root, .xsg933n{--blue-xpqh4lw:blue;}
525+
:root, .xbiwvf9{--small-x19twipt:2px;--medium-xypjos2:4px;--large-x1ec7iuc:8px;}
526+
}
527+
@layer priority2{
528+
.backgroundColor-x12peec7{background-color:white}
529+
.color-x1mqxbix{color:black}
530+
.fontSize-x1j61zf2{font-size:16px}
531+
@media (max-width: 768px){
532+
.backgroundColor-xycim1f.backgroundColor-xycim1f{background-color:blue}
533+
.color-x9i7o1z.color-x9i7o1z{color:red}
534+
.fontSize-xt5ov9y.fontSize-xt5ov9y{font-size:14px}
535+
}
536+
}"
537+
`);
538+
});
428539
});
429540
});

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

Lines changed: 83 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -470,58 +470,99 @@ function processStylexRules(
470470
';\n'
471471
: '';
472472

473-
const collectedCSS = grouped
473+
const globalMediaQueryGroups: Map<string, Array<string>> = new Map();
474+
const globalNonMediaRules: Array<string> = [];
475+
476+
const perGroupOutput = grouped
474477
.map((group, index) => {
475478
const pri = group[0][2];
476-
const collectedCSS = Array.from(
477-
new Map(group.map(([a, b]) => [a, b])).values(),
478-
)
479-
.flatMap((rule) => {
480-
const { ltr, rtl } = rule;
481-
let ltrRule = ltr,
482-
rtlRule = rtl;
483-
484-
if (!useLayers) {
485-
ltrRule = addSpecificityLevel(ltrRule, index);
486-
rtlRule = rtlRule && addSpecificityLevel(rtlRule, index);
487-
}
479+
const rules = Array.from(new Map(group.map(([a, b]) => [a, b])).values());
480+
481+
const mediaQueryGroups = useLayers ? new Map() : globalMediaQueryGroups;
482+
const nonMediaRules = useLayers ? [] : globalNonMediaRules;
483+
484+
rules.forEach((rule) => {
485+
const { ltr, rtl } = rule;
486+
let ltrRule = ltr,
487+
rtlRule = rtl;
488488

489-
// check if the selector looks like .xtrlmmh, .xtrlmmh:root
490-
// if so, turn it into .xtrlmmh.xtrlmmh, .xtrlmmh.xtrlmmh:root
491-
// This is to ensure the themes always have precedence over the
492-
// default variable values
493-
ltrRule = ltrRule.replace(
489+
if (!useLayers) {
490+
ltrRule = addSpecificityLevel(ltrRule, index);
491+
rtlRule = rtlRule && addSpecificityLevel(rtlRule, index);
492+
}
493+
494+
ltrRule = ltrRule.replace(
495+
/\.([a-zA-Z0-9]+), \.([a-zA-Z0-9]+):root/g,
496+
'.$1.$1, .$1.$1:root',
497+
);
498+
if (rtlRule) {
499+
rtlRule = rtlRule.replace(
494500
/\.([a-zA-Z0-9]+), \.([a-zA-Z0-9]+):root/g,
495501
'.$1.$1, .$1.$1:root',
496502
);
497-
if (rtlRule) {
498-
rtlRule = rtlRule.replace(
499-
/\.([a-zA-Z0-9]+), \.([a-zA-Z0-9]+):root/g,
500-
'.$1.$1, .$1.$1:root',
501-
);
502-
}
503+
}
503504

504-
return rtlRule
505-
? enableLTRRTLComments
506-
? [
507-
`/* @ltr begin */${ltrRule}/* @ltr end */`,
508-
`/* @rtl begin */${rtlRule}/* @rtl end */`,
509-
]
510-
: [
511-
addAncestorSelector(ltrRule, "html:not([dir='rtl'])"),
512-
addAncestorSelector(rtlRule, "html[dir='rtl']"),
513-
]
514-
: [ltrRule];
515-
})
516-
.join('\n');
517-
518-
// Don't put @property, @keyframe, @position-try in layers
519-
return useLayers && pri > 0
520-
? `@layer priority${index + 1}{\n${collectedCSS}\n}`
521-
: collectedCSS;
505+
const processedRules = rtlRule
506+
? enableLTRRTLComments
507+
? [
508+
`/* @ltr begin */${ltrRule}/* @ltr end */`,
509+
`/* @rtl begin */${rtlRule}/* @rtl end */`,
510+
]
511+
: [
512+
addAncestorSelector(ltrRule, "html:not([dir='rtl'])"),
513+
addAncestorSelector(rtlRule, "html[dir='rtl']"),
514+
]
515+
: [ltrRule];
516+
517+
processedRules.forEach((processedRule) => {
518+
const mediaQueryMatch = processedRule.match(
519+
/^(@media[^{]+)\{([\s\S]*)\}$/m,
520+
);
521+
if (mediaQueryMatch) {
522+
const [, rawMQ, innerContent] = mediaQueryMatch;
523+
const mq = rawMQ.trim().replace(/\s+/g, ' ');
524+
if (!mediaQueryGroups.has(mq)) mediaQueryGroups.set(mq, []);
525+
const arr = mediaQueryGroups.get(mq);
526+
if (arr) arr.push(innerContent.trim());
527+
} else {
528+
nonMediaRules.push(processedRule);
529+
}
530+
});
531+
});
532+
533+
if (useLayers) {
534+
const allRules = [
535+
...nonMediaRules,
536+
...Array.from(mediaQueryGroups.entries())
537+
.filter(([, inner]) => inner.length > 0)
538+
.map(([mq, inner]) =>
539+
inner.length === 1
540+
? `${mq}{${inner[0]}}`
541+
: `${mq}{\n${inner.join('\n')}\n}`,
542+
),
543+
];
544+
const collected = allRules.join('\n');
545+
return pri > 0
546+
? `@layer priority${index + 1}{\n${collected}\n}`
547+
: collected;
548+
}
549+
return '';
522550
})
523551
.join('\n');
524552

553+
const collectedCSS = useLayers
554+
? perGroupOutput
555+
: [
556+
...globalNonMediaRules,
557+
...Array.from(globalMediaQueryGroups.entries())
558+
.filter(([, inner]) => inner.length > 0)
559+
.map(([mq, inner]) =>
560+
inner.length === 1
561+
? `${mq}{${inner[0]}}`
562+
: `${mq}{\n${inner.join('\n')}\n}`,
563+
),
564+
].join('\n');
565+
525566
return header + collectedCSS;
526567
}
527568

0 commit comments

Comments
 (0)