[babel-plugin] Improve createTheme and defineVars tests #1099
Conversation
workflow: benchmarks/perfComparison of performance test results, measured in operations per second. Larger is better.
|
workflow: benchmarks/sizeComparison of minified (terser) and compressed (brotli) size results, measured in bytes. Smaller is better.
|
| const { code, metadata } = transform( | ||
| ` | ||
| ${_code} | ||
| ${fixture} | ||
| `; | ||
| `, | ||
| pluginOptions, | ||
| ); | ||
|
|
||
| _metadata.stylex.push(...metadata.stylex); | ||
|
|
||
| return { code, metadata: _metadata }; |
There was a problem hiding this comment.
This test abstraction exists because we're trying to test the integration between defineVars and createTheme. But, we were only taking snapshots of partial metadata, missing the "default theme" CSS rules. To fix that, I chose to refactor this helper
| [ | ||
| "xop34xu", | ||
| { | ||
| "ltr": ":root, .xop34xu{--xwx8imx:blue;--xaaua2w:grey;--xbbre8:10;}", | ||
| "rtl": null, | ||
| }, | ||
| 0.1, | ||
| ], | ||
| [ | ||
| "xop34xu-1lveb7", | ||
| { | ||
| "ltr": "@media (prefers-color-scheme: dark){:root, .xop34xu{--xwx8imx:lightblue;--xaaua2w:rgba(0, 0, 0, 0.8);}}", | ||
| "rtl": null, | ||
| }, | ||
| 0.1, | ||
| ], | ||
| [ | ||
| "xop34xu-bdddrq", | ||
| { | ||
| "ltr": "@media print{:root, .xop34xu{--xwx8imx:white;}}", | ||
| "rtl": null, | ||
| }, | ||
| 0.1, | ||
| ], |
There was a problem hiding this comment.
This is an example of "default theme" CSS that now shows up in the snapshots
| @@ -167,6 +203,30 @@ describe('@stylexjs/babel-plugin', () => { | |||
| expect(metadata).toMatchInlineSnapshot(` | |||
| { | |||
| "stylex": [ | |||
| [ | |||
| "xop34xu", | |||
There was a problem hiding this comment.
This specific hash / class name - xop34xu - appears in most of these snapshots because we frequently use /stylex/packages/vars.stylex.js as the default file name
| export const theme = stylex.createTheme(vars, ${themeObject}); | ||
| `); | ||
| const { code, metadata } = transform(fixture, options); |
There was a problem hiding this comment.
The options here were meant to be passed to the previous transform call (inside createFixture)
| { | ||
| "ltr": ".x4aw18j, .x4aw18j:root{--xwx8imx:green;--xaaua2w:antiquewhite;--xbbre8:6px;}", | ||
| "ltr": ":root, .x1xohuxq{--xt4ziaz:blue;--x1e3it8h:grey;--x1onrunl:10;}", |
There was a problem hiding this comment.
We fixed this test to use the vars filename correctly. Now we see that the "default theme" class name hash has changed from xop34xu to x1xohuxq.
* Make sure we capture the complete metadata in the createTheme tests. * Add extra tests to capture scenarios where multiple variables and themes are created across files.
c0a6abf to
9a5b4e4
Compare
Unit tests to better capture the way that theming currently works in StyleX.
Background:
Patch:
defineVarscalls.