Skip to content

Commit e9a5625

Browse files
mellyeliumellyeliu
committed
fix: add stylex transform tests for debug mode
1 parent 002bf2f commit e9a5625

6 files changed

+376
-119
lines changed

‎package-lock.json

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
"eslint-config-prettier": "^9.1.0",
3030
"eslint-plugin-ft-flow": "^3.0.11",
3131
"eslint-plugin-react": "^7.37.1",
32-
"flow-bin": "^0.261.0",
32+
"flow-bin": "^0.261.2",
3333
"hermes-eslint": "^0.26.0",
3434
"husky": "^8.0.0",
3535
"jest": "^30.0.0-alpha.6",

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

-116
Original file line numberDiff line numberDiff line change
@@ -1976,121 +1976,5 @@ describe('@stylexjs/babel-plugin', () => {
19761976
stylex.props(styles.unknown);"
19771977
`);
19781978
});
1979-
test('debug mode classnames enabled', () => {
1980-
expect(
1981-
transform(
1982-
`
1983-
import * as stylex from '@stylexjs/stylex';
1984-
const styles = stylex.create({
1985-
tileHeading: {
1986-
marginRight: 12,
1987-
},
1988-
});
1989-
stylex.props(styles.unknown);
1990-
`,
1991-
{ dev: true, debug: true, genConditionalClasses: true },
1992-
),
1993-
).toMatchInlineSnapshot(`
1994-
"import _inject from "@stylexjs/stylex/lib/stylex-inject";
1995-
var _inject2 = _inject;
1996-
import * as stylex from '@stylexjs/stylex';
1997-
_inject2(".marginRight-x1wsuqlk{margin-right:12px}", 4000);
1998-
const styles = {};
1999-
stylex.props(styles.unknown);"
2000-
`);
2001-
});
2002-
test('debug mode classnames disabled', () => {
2003-
expect(
2004-
transform(
2005-
`
2006-
import * as stylex from '@stylexjs/stylex';
2007-
const styles = stylex.create({
2008-
tileHeading: {
2009-
marginRight: 12,
2010-
},
2011-
});
2012-
stylex.props(styles.unknown);
2013-
`,
2014-
{ dev: true, debug: false, genConditionalClasses: true },
2015-
),
2016-
).toMatchInlineSnapshot(`
2017-
"import _inject from "@stylexjs/stylex/lib/stylex-inject";
2018-
var _inject2 = _inject;
2019-
import * as stylex from '@stylexjs/stylex';
2020-
_inject2(".x1wsuqlk{margin-right:12px}", 4000);
2021-
const styles = {};
2022-
stylex.props(styles.unknown);"
2023-
`);
2024-
});
2025-
test('debug mode classnames enabled with many styles', () => {
2026-
expect(
2027-
transform(
2028-
`
2029-
import * as stylex from '@stylexjs/stylex';
2030-
const styles = stylex.create({
2031-
tileHeading: {
2032-
marginRight: 12,
2033-
},
2034-
content: {
2035-
gridArea: 'content',
2036-
},
2037-
root: {
2038-
display: 'grid',
2039-
gridTemplateRows: '100%',
2040-
gridTemplateAreas: '"content"',
2041-
},
2042-
});
2043-
stylex.props(styles.unknown);
2044-
`,
2045-
{ dev: true, debug: true, genConditionalClasses: true },
2046-
),
2047-
).toMatchInlineSnapshot(`
2048-
"import _inject from "@stylexjs/stylex/lib/stylex-inject";
2049-
var _inject2 = _inject;
2050-
import * as stylex from '@stylexjs/stylex';
2051-
_inject2(".marginRight-x1wsuqlk{margin-right:12px}", 4000);
2052-
_inject2(".gridArea-x1fdo2jl{grid-area:content}", 1000);
2053-
_inject2(".display-xrvj5dj{display:grid}", 3000);
2054-
_inject2(".gridTemplateRows-x7k18q3{grid-template-rows:100%}", 3000);
2055-
_inject2(".gridTemplateAreas-x5gp9wm{grid-template-areas:\\"content\\"}", 2000);
2056-
const styles = {};
2057-
stylex.props(styles.unknown);"
2058-
`);
2059-
});
2060-
test('debug mode classnames enabled with dev disabled', () => {
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-
{ dev: false, debug: true, genConditionalClasses: true },
2081-
),
2082-
).toMatchInlineSnapshot(`
2083-
"import _inject from "@stylexjs/stylex/lib/stylex-inject";
2084-
var _inject2 = _inject;
2085-
import * as stylex from '@stylexjs/stylex';
2086-
_inject2(".marginRight-x1wsuqlk{margin-right:12px}", 4000);
2087-
_inject2(".gridArea-x1fdo2jl{grid-area:content}", 1000);
2088-
_inject2(".display-xrvj5dj{display:grid}", 3000);
2089-
_inject2(".gridTemplateRows-x7k18q3{grid-template-rows:100%}", 3000);
2090-
_inject2(".gridTemplateAreas-x5gp9wm{grid-template-areas:\\"content\\"}", 2000);
2091-
const styles = {};
2092-
stylex.props(styles.unknown);"
2093-
`);
2094-
});
20951979
});
20961980
});

‎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)