Skip to content

Commit 1017d05

Browse files
nmnnmn
committed
chore: clean up test, add comparison against simple transformation
1 parent 671896f commit 1017d05

File tree

4 files changed

+119
-40
lines changed

4 files changed

+119
-40
lines changed

‎package-lock.json

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

‎packages/babel-plugin/__fixtures__/simpleTheme.js

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
/**
2+
* Copyright (c) Meta Platforms, Inc. and affiliates.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*
7+
* @flow strict
8+
*/
9+
10+
import type { Theme } from '@stylexjs/stylex';
11+
import { colors } from './colors.stylex';
12+
import * as stylex from '@stylexjs/stylex';
13+
14+
export const WDSSystemTheme: Theme<typeof colors> = stylex.createTheme(colors, {
15+
'--accent': '#1DAA61',
16+
'--accent-deemphasized': '#D9FDD3',
17+
'--accent-emphasized': '#15603E',
18+
'--secondary-negative': '#EA0038',
19+
'--secondary-negative-deemphasized': '#FDE8EB',
20+
'--secondary-negative-emphasized': '#B80531',
21+
'--secondary-positive': '#1DAA61',
22+
'--secondary-positive-deemphasized': '#E7FCE3',
23+
'--secondary-warning': '#FFB938',
24+
'--secondary-warning-deemphasized': '#FFF7E5',
25+
'--content-default': '#0A0A0A',
26+
'--content-deemphasized': 'rgba(0, 0, 0, 0.6)',
27+
'--content-disabled': '#BDBDBD',
28+
'--content-on-accent': '#FFFFFF',
29+
'--content-action-default': '#0A0A0A',
30+
'--content-action-emphasized': '#1B8755',
31+
'--content-external-link': '#1B8755',
32+
'--content-inverse': '#FFFFFF',
33+
'--content-read': '#007BFC',
34+
'--background-wash-plain': '#FFFFFF',
35+
'--background-wash-inset': '#F7F5F3',
36+
'--background-elevated-wash-plain': '#FFFFFF',
37+
'--background-elevated-wash-inset': '#F7F5F3',
38+
'--background-dimmer': 'rgb(0, 0, 0, 0.32)',
39+
'--surface-default': '#FFFFFF',
40+
'--surface-emphasized': '#F7F5F3',
41+
'--surface-elevated-default': '#FFFFFF',
42+
'--surface-elevated-emphasized': '#F7F5F3',
43+
'--surface-highlight': 'rgba(194, 189, 184, 0.15)',
44+
'--surface-inverse': '#242626',
45+
'--surface-pressed': 'rgba(0, 0, 0, 0.2)',
46+
'--lines-divider': 'rgba(0, 0, 0, 0.1)',
47+
'--lines-outline-default': '#959393',
48+
'--lines-outline-deemphasized': 'rgba(0, 0, 0, 0.2)',
49+
'--persistent-always-branded': '#1DAA61',
50+
'--persistent-always-black': '#0A0A0A',
51+
'--persistent-always-white': '#FFFFFF',
52+
'--persistent-activity-indicator': '#25D366',
53+
'--systems-bubble-surface-incoming': '#FFFFFF',
54+
'--systems-bubble-surface-outgoing': '#D9FDD3',
55+
'--systems-bubble-content-deemphasized': 'rgba(0, 0, 0, 0.6)',
56+
'--systems-bubble-surface-overlay': 'rgba(194, 189, 184, 0.15)',
57+
'--systems-bubble-surface-system': 'rgba(255, 255, 255, 0.9)',
58+
'--systems-bubble-surface-e2e': '#FFF0D4',
59+
'--systems-bubble-content-e2e': 'rgba(0, 0, 0, 0.6)',
60+
'--systems-bubble-surface-business': '#D5FDED',
61+
'--systems-bubble-content-business': 'rgba(0, 0, 0, 0.6)',
62+
'--systems-chat-surface-composer': '#FFFFFF',
63+
'--systems-chat-background-wallpaper': '#F5F1EB',
64+
'--systems-chat-foreground-wallpaper': '#EAE0D3',
65+
'--systems-chat-surface-tray': '#F7F5F3',
66+
'--systems-status-seen': '#C2BDB8',
67+
'--internal-components-surface-nav-bar': '#F7F5F3',
68+
'--internal-components-active-list-row': 'rgba(194, 189, 184, 0.15)',
69+
});

‎packages/babel-plugin/__tests__/__snapshots__/stylex-perf-create-theme-test.js.snap

+24-1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,29 @@ exports[`create theme transform complex theme file 1`] = `
44
"import type { Theme } from '@stylexjs/stylex';
55
import { colors } from './colors.stylex';
66
import * as stylex from '@stylexjs/stylex';
7+
export const WDSSystemTheme: Theme<typeof colors> = {
8+
$$css: true,
9+
xlon2da: "x7d2d2c xlon2da"
10+
};"
11+
`;
12+
13+
exports[`create theme transform complex theme file 2`] = `
14+
[
15+
[
16+
"x7d2d2c",
17+
{
18+
"ltr": ".x7d2d2c, .x7d2d2c:root{--accent:#1DAA61;--accent-deemphasized:#D9FDD3;--accent-emphasized:#15603E;--background-dimmer:rgb(0, 0, 0, 0.32);--background-elevated-wash-inset:#F7F5F3;--background-elevated-wash-plain:#FFFFFF;--background-wash-inset:#F7F5F3;--background-wash-plain:#FFFFFF;--content-action-default:#0A0A0A;--content-action-emphasized:#1B8755;--content-deemphasized:rgba(0, 0, 0, 0.6);--content-default:#0A0A0A;--content-disabled:#BDBDBD;--content-external-link:#1B8755;--content-inverse:#FFFFFF;--content-on-accent:#FFFFFF;--content-read:#007BFC;--internal-components-active-list-row:rgba(194, 189, 184, 0.15);--internal-components-surface-nav-bar:#F7F5F3;--lines-divider:rgba(0, 0, 0, 0.1);--lines-outline-deemphasized:rgba(0, 0, 0, 0.2);--lines-outline-default:#959393;--persistent-activity-indicator:#25D366;--persistent-always-black:#0A0A0A;--persistent-always-branded:#1DAA61;--persistent-always-white:#FFFFFF;--secondary-negative:#EA0038;--secondary-negative-deemphasized:#FDE8EB;--secondary-negative-emphasized:#B80531;--secondary-positive:#1DAA61;--secondary-positive-deemphasized:#E7FCE3;--secondary-warning:#FFB938;--secondary-warning-deemphasized:#FFF7E5;--surface-default:#FFFFFF;--surface-elevated-default:#FFFFFF;--surface-elevated-emphasized:#F7F5F3;--surface-emphasized:#F7F5F3;--surface-highlight:rgba(194, 189, 184, 0.15);--surface-inverse:#242626;--surface-pressed:rgba(0, 0, 0, 0.2);--systems-bubble-content-business:rgba(0, 0, 0, 0.6);--systems-bubble-content-deemphasized:rgba(0, 0, 0, 0.6);--systems-bubble-content-e2e:rgba(0, 0, 0, 0.6);--systems-bubble-surface-business:#D5FDED;--systems-bubble-surface-e2e:#FFF0D4;--systems-bubble-surface-incoming:#FFFFFF;--systems-bubble-surface-outgoing:#D9FDD3;--systems-bubble-surface-overlay:rgba(194, 189, 184, 0.15);--systems-bubble-surface-system:rgba(255, 255, 255, 0.9);--systems-chat-background-wallpaper:#F5F1EB;--systems-chat-foreground-wallpaper:#EAE0D3;--systems-chat-surface-composer:#FFFFFF;--systems-chat-surface-tray:#F7F5F3;--systems-status-seen:#C2BDB8;}",
19+
"rtl": null,
20+
},
21+
0.5,
22+
],
23+
]
24+
`;
25+
26+
exports[`create theme transform complex theme file 3`] = `
27+
"import type { Theme } from '@stylexjs/stylex';
28+
import { colors } from './colors.stylex';
29+
import * as stylex from '@stylexjs/stylex';
730
const baseColorPalette = {
831
neutralGray50: '#FAFAFA',
932
neutralGray75: '#F4F4F4',
@@ -639,7 +662,7 @@ export const WDSDarkTheme: Theme<typeof colors> = {
639662
};"
640663
`;
641664
642-
exports[`create theme transform complex theme file 2`] = `
665+
exports[`create theme transform complex theme file 4`] = `
643666
[
644667
[
645668
"x122jrhm",

‎packages/babel-plugin/__tests__/stylex-perf-create-theme-test.js

+25-4
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,15 @@ const defaultOpts = {
2222
classNamePrefix,
2323
};
2424

25+
const simpleThemeFile = path.resolve(
26+
__dirname,
27+
'../__fixtures__/simpleTheme.js',
28+
);
29+
const themeFile = path.resolve(__dirname, '../__fixtures__/colorThemes.js');
30+
2531
function transform(file, opts = defaultOpts) {
2632
const result = transformFileSync(file, {
27-
filename: opts.filename || '/stylex/packages/TestTheme.stylex.js',
33+
filename: opts.filename || file || themeFile,
2834
parserOpts: {
2935
flow: 'all',
3036
},
@@ -37,12 +43,27 @@ function transform(file, opts = defaultOpts) {
3743
return { code: result.code, styles: result.metadata.stylex };
3844
}
3945

40-
const themeFile = path.resolve(__dirname, '../__fixtures__/colorThemes.js');
41-
4246
describe('create theme', () => {
43-
it('transform complex theme file', () => {
47+
test('transform complex theme file', () => {
48+
// warm up
49+
transform(simpleThemeFile);
50+
51+
const simpleStart = performance.now();
52+
const simpleResult = transform(simpleThemeFile);
53+
const simpleEnd = performance.now();
54+
expect(simpleResult.code).toMatchSnapshot();
55+
expect(simpleResult.styles).toMatchSnapshot();
56+
const simpleTimeTaken = simpleEnd - simpleStart;
57+
console.log('simpleTimeTaken', simpleTimeTaken);
58+
59+
const start = performance.now();
4460
const result = transform(themeFile);
61+
const end = performance.now();
62+
const timeTaken = end - start;
4563
expect(result.code).toMatchSnapshot();
4664
expect(result.styles).toMatchSnapshot();
65+
console.log('timeTaken', timeTaken);
66+
67+
expect(timeTaken).toBeLessThan(simpleTimeTaken * 20);
4768
});
4869
});

0 commit comments

Comments
 (0)