Skip to content

Commit 7fd08df

Browse files
mellyeliumellyeliu
committed
fix: add stylex transform tests for debug mode
1 parent ed54f53 commit 7fd08df

File tree

3 files changed

+413
-0
lines changed

3 files changed

+413
-0
lines changed

‎packages/babel-plugin/__tests__/stylex-transform-call-test.js

+40
Original file line numberDiff line numberDiff line change
@@ -2057,6 +2057,46 @@ describe('@stylexjs/babel-plugin', () => {
20572057
stylex.props(styles.unknown);"
20582058
`);
20592059
});
2060+
test('debug mode enabled with debug classnames disabled with many styles', () => {
2061+
expect(
2062+
transform(
2063+
`
2064+
import * as stylex from '@stylexjs/stylex';
2065+
const styles = stylex.create({
2066+
tileHeading: {
2067+
marginRight: 12,
2068+
},
2069+
content: {
2070+
gridArea: 'content',
2071+
},
2072+
root: {
2073+
display: 'grid',
2074+
gridTemplateRows: '100%',
2075+
gridTemplateAreas: '"content"',
2076+
},
2077+
});
2078+
stylex.props(styles.unknown);
2079+
`,
2080+
{
2081+
dev: true,
2082+
debug: true,
2083+
enableDebugClassNames: false,
2084+
genConditionalClasses: true,
2085+
},
2086+
),
2087+
).toMatchInlineSnapshot(`
2088+
"import _inject from "@stylexjs/stylex/lib/stylex-inject";
2089+
var _inject2 = _inject;
2090+
import * as stylex from '@stylexjs/stylex';
2091+
_inject2(".x1wsuqlk{margin-right:12px}", 4000);
2092+
_inject2(".x1fdo2jl{grid-area:content}", 1000);
2093+
_inject2(".xrvj5dj{display:grid}", 3000);
2094+
_inject2(".x7k18q3{grid-template-rows:100%}", 3000);
2095+
_inject2(".x5gp9wm{grid-template-areas:\\"content\\"}", 2000);
2096+
const styles = {};
2097+
stylex.props(styles.unknown);"
2098+
`);
2099+
});
20602100
test('debug mode classnames enabled with dev disabled', () => {
20612101
expect(
20622102
transform(

‎packages/babel-plugin/__tests__/stylex-transform-stylex-attrs-test.js

+175
Original file line numberDiff line numberDiff line change
@@ -1423,5 +1423,180 @@ describe('@stylexjs/babel-plugin', () => {
14231423
}[!!(sidebar == null && !isSidebar) << 2 | !!isSidebar << 1 | !!isContent << 0];"
14241424
`);
14251425
});
1426+
test('Stylex call in debug mode', () => {
1427+
expect(
1428+
transform(
1429+
`
1430+
import * as stylex from '@stylexjs/stylex';
1431+
const styles = stylex.create({
1432+
sidebar: {
1433+
boxSizing: 'border-box',
1434+
gridArea: 'sidebar',
1435+
},
1436+
content: {
1437+
gridArea: 'content',
1438+
},
1439+
root: {
1440+
display: 'grid',
1441+
gridTemplateRows: '100%',
1442+
gridTemplateAreas: '"content"',
1443+
},
1444+
withSidebar: {
1445+
gridTemplateColumns: 'auto minmax(0, 1fr)',
1446+
gridTemplateRows: '100%',
1447+
gridTemplateAreas: '"sidebar content"',
1448+
'@media (max-width: 640px)': {
1449+
gridTemplateRows: 'minmax(0, 1fr) auto',
1450+
gridTemplateAreas: '"content" "sidebar"',
1451+
gridTemplateColumns: '100%',
1452+
},
1453+
},
1454+
noSidebar: {
1455+
gridTemplateColumns: 'minmax(0, 1fr)',
1456+
},
1457+
});
1458+
const complex = stylex.attrs([
1459+
styles.root,
1460+
sidebar == null && !isSidebar ? styles.noSidebar : styles.withSidebar,
1461+
isSidebar && styles.sidebar,
1462+
isContent && styles.content,
1463+
]);
1464+
`,
1465+
{ dev: true, debug: true, genConditionalClasses: true },
1466+
),
1467+
).toMatchInlineSnapshot(`
1468+
"import _inject from "@stylexjs/stylex/lib/stylex-inject";
1469+
var _inject2 = _inject;
1470+
import * as stylex from '@stylexjs/stylex';
1471+
_inject2(".boxSizing-x9f619{box-sizing:border-box}", 3000);
1472+
_inject2(".gridArea-x1yc5d2u{grid-area:sidebar}", 1000);
1473+
_inject2(".gridArea-x1fdo2jl{grid-area:content}", 1000);
1474+
_inject2(".display-xrvj5dj{display:grid}", 3000);
1475+
_inject2(".gridTemplateRows-x7k18q3{grid-template-rows:100%}", 3000);
1476+
_inject2(".gridTemplateAreas-x5gp9wm{grid-template-areas:\\"content\\"}", 2000);
1477+
_inject2(".gridTemplateColumns-x1rkzygb{grid-template-columns:auto minmax(0,1fr)}", 3000);
1478+
_inject2(".gridTemplateAreas-x17lh93j{grid-template-areas:\\"sidebar content\\"}", 2000);
1479+
_inject2("@media (max-width: 640px){.gridTemplateRows-xmr4b4k.gridTemplateRows-xmr4b4k{grid-template-rows:minmax(0,1fr) auto}}", 3200);
1480+
_inject2("@media (max-width: 640px){.gridTemplateAreas-xesbpuc.gridTemplateAreas-xesbpuc{grid-template-areas:\\"content\\" \\"sidebar\\"}}", 2200);
1481+
_inject2("@media (max-width: 640px){.gridTemplateColumns-x15nfgh4.gridTemplateColumns-x15nfgh4{grid-template-columns:100%}}", 3200);
1482+
_inject2(".gridTemplateColumns-x1mkdm3x{grid-template-columns:minmax(0,1fr)}", 3000);
1483+
const complex = {
1484+
0: {
1485+
class: "display-xrvj5dj gridTemplateColumns-x1rkzygb gridTemplateRows-x7k18q3 gridTemplateAreas-x17lh93j gridTemplateRows-xmr4b4k gridTemplateAreas-xesbpuc gridTemplateColumns-x15nfgh4"
1486+
},
1487+
4: {
1488+
class: "display-xrvj5dj gridTemplateRows-x7k18q3 gridTemplateAreas-x5gp9wm gridTemplateColumns-x1mkdm3x"
1489+
},
1490+
2: {
1491+
class: "display-xrvj5dj gridTemplateColumns-x1rkzygb gridTemplateRows-x7k18q3 gridTemplateAreas-x17lh93j gridTemplateRows-xmr4b4k gridTemplateAreas-xesbpuc gridTemplateColumns-x15nfgh4 boxSizing-x9f619 gridArea-x1yc5d2u"
1492+
},
1493+
6: {
1494+
class: "display-xrvj5dj gridTemplateRows-x7k18q3 gridTemplateAreas-x5gp9wm gridTemplateColumns-x1mkdm3x boxSizing-x9f619 gridArea-x1yc5d2u"
1495+
},
1496+
1: {
1497+
class: "display-xrvj5dj gridTemplateColumns-x1rkzygb gridTemplateRows-x7k18q3 gridTemplateAreas-x17lh93j gridTemplateRows-xmr4b4k gridTemplateAreas-xesbpuc gridTemplateColumns-x15nfgh4 gridArea-x1fdo2jl"
1498+
},
1499+
5: {
1500+
class: "display-xrvj5dj gridTemplateRows-x7k18q3 gridTemplateAreas-x5gp9wm gridTemplateColumns-x1mkdm3x gridArea-x1fdo2jl"
1501+
},
1502+
3: {
1503+
class: "display-xrvj5dj gridTemplateColumns-x1rkzygb gridTemplateRows-x7k18q3 gridTemplateAreas-x17lh93j gridTemplateRows-xmr4b4k gridTemplateAreas-xesbpuc gridTemplateColumns-x15nfgh4 boxSizing-x9f619 gridArea-x1fdo2jl"
1504+
},
1505+
7: {
1506+
class: "display-xrvj5dj gridTemplateRows-x7k18q3 gridTemplateAreas-x5gp9wm gridTemplateColumns-x1mkdm3x boxSizing-x9f619 gridArea-x1fdo2jl"
1507+
}
1508+
}[!!(sidebar == null && !isSidebar) << 2 | !!isSidebar << 1 | !!isContent << 0];"
1509+
`);
1510+
});
1511+
test('Stylex call in debug mode with debug classnames disabled', () => {
1512+
expect(
1513+
transform(
1514+
`
1515+
import * as stylex from '@stylexjs/stylex';
1516+
const styles = stylex.create({
1517+
sidebar: {
1518+
boxSizing: 'border-box',
1519+
gridArea: 'sidebar',
1520+
},
1521+
content: {
1522+
gridArea: 'content',
1523+
},
1524+
root: {
1525+
display: 'grid',
1526+
gridTemplateRows: '100%',
1527+
gridTemplateAreas: '"content"',
1528+
},
1529+
withSidebar: {
1530+
gridTemplateColumns: 'auto minmax(0, 1fr)',
1531+
gridTemplateRows: '100%',
1532+
gridTemplateAreas: '"sidebar content"',
1533+
'@media (max-width: 640px)': {
1534+
gridTemplateRows: 'minmax(0, 1fr) auto',
1535+
gridTemplateAreas: '"content" "sidebar"',
1536+
gridTemplateColumns: '100%',
1537+
},
1538+
},
1539+
noSidebar: {
1540+
gridTemplateColumns: 'minmax(0, 1fr)',
1541+
},
1542+
});
1543+
const complex = stylex.attrs([
1544+
styles.root,
1545+
sidebar == null && !isSidebar ? styles.noSidebar : styles.withSidebar,
1546+
isSidebar && styles.sidebar,
1547+
isContent && styles.content,
1548+
]);
1549+
`,
1550+
{
1551+
dev: true,
1552+
debug: true,
1553+
enableDebugClassNames: false,
1554+
genConditionalClasses: true,
1555+
},
1556+
),
1557+
).toMatchInlineSnapshot(`
1558+
"import _inject from "@stylexjs/stylex/lib/stylex-inject";
1559+
var _inject2 = _inject;
1560+
import * as stylex from '@stylexjs/stylex';
1561+
_inject2(".x9f619{box-sizing:border-box}", 3000);
1562+
_inject2(".x1yc5d2u{grid-area:sidebar}", 1000);
1563+
_inject2(".x1fdo2jl{grid-area:content}", 1000);
1564+
_inject2(".xrvj5dj{display:grid}", 3000);
1565+
_inject2(".x7k18q3{grid-template-rows:100%}", 3000);
1566+
_inject2(".x5gp9wm{grid-template-areas:\\"content\\"}", 2000);
1567+
_inject2(".x1rkzygb{grid-template-columns:auto minmax(0,1fr)}", 3000);
1568+
_inject2(".x17lh93j{grid-template-areas:\\"sidebar content\\"}", 2000);
1569+
_inject2("@media (max-width: 640px){.xmr4b4k.xmr4b4k{grid-template-rows:minmax(0,1fr) auto}}", 3200);
1570+
_inject2("@media (max-width: 640px){.xesbpuc.xesbpuc{grid-template-areas:\\"content\\" \\"sidebar\\"}}", 2200);
1571+
_inject2("@media (max-width: 640px){.x15nfgh4.x15nfgh4{grid-template-columns:100%}}", 3200);
1572+
_inject2(".x1mkdm3x{grid-template-columns:minmax(0,1fr)}", 3000);
1573+
const complex = {
1574+
0: {
1575+
class: "xrvj5dj x1rkzygb x7k18q3 x17lh93j xmr4b4k xesbpuc x15nfgh4"
1576+
},
1577+
4: {
1578+
class: "xrvj5dj x7k18q3 x5gp9wm x1mkdm3x"
1579+
},
1580+
2: {
1581+
class: "xrvj5dj x1rkzygb x7k18q3 x17lh93j xmr4b4k xesbpuc x15nfgh4 x9f619 x1yc5d2u"
1582+
},
1583+
6: {
1584+
class: "xrvj5dj x7k18q3 x5gp9wm x1mkdm3x x9f619 x1yc5d2u"
1585+
},
1586+
1: {
1587+
class: "xrvj5dj x1rkzygb x7k18q3 x17lh93j xmr4b4k xesbpuc x15nfgh4 x1fdo2jl"
1588+
},
1589+
5: {
1590+
class: "xrvj5dj x7k18q3 x5gp9wm x1mkdm3x x1fdo2jl"
1591+
},
1592+
3: {
1593+
class: "xrvj5dj x1rkzygb x7k18q3 x17lh93j xmr4b4k xesbpuc x15nfgh4 x9f619 x1fdo2jl"
1594+
},
1595+
7: {
1596+
class: "xrvj5dj x7k18q3 x5gp9wm x1mkdm3x x9f619 x1fdo2jl"
1597+
}
1598+
}[!!(sidebar == null && !isSidebar) << 2 | !!isSidebar << 1 | !!isContent << 0];"
1599+
`);
1600+
});
14261601
});
14271602
});

0 commit comments

Comments
 (0)