Skip to content

Commit 13c5b47

Browse files
nmnnmn
committed
feat: add theme override behaviour configuration
1 parent d4ccf64 commit 13c5b47

10 files changed

+1376
-29
lines changed

‎packages/shared/__tests__/create-theme/stylex-create-theme-by-group-test.js

+290
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,290 @@
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 _stylexCreateTheme from '../../src/stylex-create-theme';
11+
import * as t from '../../src/types';
12+
13+
const stylexCreateTheme = (a, b) =>
14+
_stylexCreateTheme(a, b, { themeOverride: 'group' });
15+
16+
describe('stylex-create-theme test', () => {
17+
test('overrides set of vars with CSS class', () => {
18+
const defaultVars = {
19+
__themeName__: 'TestTheme.stylex.js//buttonTheme',
20+
bgColor: 'var(--xgck17p)',
21+
bgColorDisabled: 'var(--xpegid5)',
22+
cornerRadius: 'var(--xrqfjmn)',
23+
fgColor: 'var(--x4y59db)',
24+
};
25+
26+
const createTheme = {
27+
bgColor: {
28+
default: 'green',
29+
'@media (prefers-color-scheme: dark)': 'lightgreen',
30+
'@media print': 'transparent',
31+
},
32+
bgColorDisabled: {
33+
default: 'antiquewhite',
34+
'@media (prefers-color-scheme: dark)': 'floralwhite',
35+
},
36+
cornerRadius: { default: '6px' },
37+
fgColor: 'coral',
38+
};
39+
40+
const [classNameOutput, cssOutput] = stylexCreateTheme(
41+
defaultVars,
42+
createTheme,
43+
);
44+
45+
expect(defaultVars.__themeName__).toMatchInlineSnapshot(
46+
'"TestTheme.stylex.js//buttonTheme"',
47+
);
48+
49+
expect(classNameOutput).toMatchInlineSnapshot(`
50+
{
51+
"$$css": true,
52+
"TestTheme.stylex.js//buttonTheme": "xtrlmmh TestTheme.stylex.js//buttonTheme",
53+
}
54+
`);
55+
56+
expect(cssOutput[classNameOutput[defaultVars.__themeName__].split(' ')[0]])
57+
.toMatchInlineSnapshot(`
58+
{
59+
"ltr": ".xtrlmmh{--xgck17p:green;--xpegid5:antiquewhite;--xrqfjmn:6px;--x4y59db:coral;}",
60+
"priority": 0.5,
61+
"rtl": null,
62+
}
63+
`);
64+
});
65+
66+
test('overrides set of literal vars with CSS class', () => {
67+
const defaultVars = {
68+
__themeName__: 'TestTheme.stylex.js//buttonTheme',
69+
'--bgColor': 'var(--bgColor)',
70+
'--bgColorDisabled': 'var(--bgColorDisabled)',
71+
'--cornerRadius': 'var(--cornerRadius)',
72+
'--fgColor': 'var(--fgColor)',
73+
};
74+
75+
const createTheme = {
76+
'--bgColor': {
77+
default: 'green',
78+
'@media (prefers-color-scheme: dark)': 'lightgreen',
79+
'@media print': 'transparent',
80+
},
81+
'--bgColorDisabled': {
82+
default: 'antiquewhite',
83+
'@media (prefers-color-scheme: dark)': 'floralwhite',
84+
},
85+
'--cornerRadius': { default: '6px' },
86+
'--fgColor': 'coral',
87+
};
88+
89+
const [classNameOutput, cssOutput] = stylexCreateTheme(
90+
defaultVars,
91+
createTheme,
92+
);
93+
94+
expect(defaultVars.__themeName__).toMatchInlineSnapshot(
95+
'"TestTheme.stylex.js//buttonTheme"',
96+
);
97+
98+
expect(classNameOutput).toMatchInlineSnapshot(`
99+
{
100+
"$$css": true,
101+
"TestTheme.stylex.js//buttonTheme": "x4znj40 TestTheme.stylex.js//buttonTheme",
102+
}
103+
`);
104+
105+
expect(cssOutput[classNameOutput[defaultVars.__themeName__].split(' ')[0]])
106+
.toMatchInlineSnapshot(`
107+
{
108+
"ltr": ".x4znj40{--bgColor:green;--bgColorDisabled:antiquewhite;--cornerRadius:6px;--fgColor:coral;}",
109+
"priority": 0.5,
110+
"rtl": null,
111+
}
112+
`);
113+
});
114+
115+
test('variables order does not change the hash', () => {
116+
const defaultVars = {
117+
__themeName__: 'TestTheme.stylex.js//buttonTheme',
118+
bgColor: 'var(--xgck17p)',
119+
bgColorDisabled: 'var(--xpegid5)',
120+
cornerRadius: 'var(--xrqfjmn)',
121+
fgColor: 'var(--x4y59db)',
122+
};
123+
124+
const createTheme1 = {
125+
bgColor: {
126+
default: 'green',
127+
'@media (prefers-color-scheme: dark)': 'lightgreen',
128+
'@media print': 'transparent',
129+
},
130+
bgColorDisabled: {
131+
default: 'antiquewhite',
132+
'@media (prefers-color-scheme: dark)': 'floralwhite',
133+
},
134+
cornerRadius: { default: '6px' },
135+
fgColor: 'coral',
136+
};
137+
138+
const createTheme2 = {
139+
bgColorDisabled: {
140+
default: 'antiquewhite',
141+
'@media (prefers-color-scheme: dark)': 'floralwhite',
142+
},
143+
fgColor: { default: 'coral' },
144+
bgColor: {
145+
default: 'green',
146+
'@media print': 'transparent',
147+
'@media (prefers-color-scheme: dark)': 'lightgreen',
148+
},
149+
cornerRadius: '6px',
150+
};
151+
152+
const [classNameOutput1] = stylexCreateTheme(defaultVars, createTheme1);
153+
154+
const [classNameOutput2] = stylexCreateTheme(defaultVars, createTheme2);
155+
156+
expect(defaultVars.__themeName__).toMatchInlineSnapshot(
157+
'"TestTheme.stylex.js//buttonTheme"',
158+
);
159+
160+
expect(classNameOutput1[defaultVars.__themeName__].split(' ')[0]).toEqual(
161+
classNameOutput2[defaultVars.__themeName__].split(' ')[0],
162+
);
163+
});
164+
165+
test('Adding an at-rule changes the hash', () => {
166+
const defaultVars = {
167+
__themeName__: 'TestTheme.stylex.js//buttonTheme',
168+
bgColor: 'var(--xgck17p)',
169+
};
170+
171+
const createTheme1 = {
172+
bgColor: 'green',
173+
};
174+
175+
const createTheme2 = {
176+
bgColor: {
177+
default: 'green',
178+
'@media (prefers-color-scheme: dark)': 'lightgreen',
179+
},
180+
};
181+
182+
const [classNameOutput1] = stylexCreateTheme(defaultVars, createTheme1);
183+
184+
const [classNameOutput2] = stylexCreateTheme(defaultVars, createTheme2);
185+
186+
expect(
187+
classNameOutput1[defaultVars.__themeName__].split(' ')[0],
188+
).not.toEqual(classNameOutput2[defaultVars.__themeName__].split(' ')[0]);
189+
});
190+
191+
test('Generates styles for nested at-rules', () => {
192+
const defaultVars = {
193+
__themeName__: 'TestTheme.stylex.js//buttonTheme',
194+
bgColor: 'var(--xgck17p)',
195+
};
196+
197+
const createTheme = {
198+
bgColor: {
199+
default: {
200+
default: 'green',
201+
'@supports (color: oklab(0 0 0))': 'oklab(0.7 -0.3 -0.4)',
202+
},
203+
'@media (prefers-color-scheme: dark)': {
204+
default: 'lightgreen',
205+
'@supports (color: oklab(0 0 0))': 'oklab(0.7 -0.2 -0.4)',
206+
},
207+
},
208+
};
209+
210+
const [_classNameOutput, cssOutput] = stylexCreateTheme(
211+
defaultVars,
212+
createTheme as $FlowFixMe,
213+
);
214+
215+
expect(cssOutput).toMatchInlineSnapshot(`
216+
{
217+
"x2y918k": {
218+
"ltr": ".x2y918k{--xgck17p:green;}",
219+
"priority": 0.5,
220+
"rtl": null,
221+
},
222+
"x2y918k-1e6ryz3": {
223+
"ltr": "@supports (color: oklab(0 0 0)){@media (prefers-color-scheme: dark){.x2y918k{--xgck17p:oklab(0.7 -0.2 -0.4);}}}",
224+
"priority": 0.7,
225+
"rtl": null,
226+
},
227+
"x2y918k-1lveb7": {
228+
"ltr": "@media (prefers-color-scheme: dark){.x2y918k{--xgck17p:lightgreen;}}",
229+
"priority": 0.6,
230+
"rtl": null,
231+
},
232+
"x2y918k-kpd015": {
233+
"ltr": "@supports (color: oklab(0 0 0)){.x2y918k{--xgck17p:oklab(0.7 -0.3 -0.4);}}",
234+
"priority": 0.6,
235+
"rtl": null,
236+
},
237+
}
238+
`);
239+
});
240+
241+
test('Generates styles for typed nested at-rules', () => {
242+
const defaultVars = {
243+
__themeName__: 'TestTheme.stylex.js//buttonTheme',
244+
bgColor: 'var(--xgck17p)',
245+
};
246+
247+
const createTheme = {
248+
bgColor: t.color({
249+
default: {
250+
default: 'green',
251+
'@supports (color: oklab(0 0 0))': 'oklab(0.7 -0.3 -0.4)',
252+
},
253+
'@media (prefers-color-scheme: dark)': {
254+
default: 'lightgreen',
255+
'@supports (color: oklab(0 0 0))': 'oklab(0.7 -0.2 -0.4)',
256+
},
257+
}),
258+
};
259+
260+
const [_classNameOutput, cssOutput] = stylexCreateTheme(
261+
defaultVars,
262+
createTheme as $FlowFixMe,
263+
);
264+
265+
expect(cssOutput).toMatchInlineSnapshot(`
266+
{
267+
"x2y918k": {
268+
"ltr": ".x2y918k{--xgck17p:green;}",
269+
"priority": 0.5,
270+
"rtl": null,
271+
},
272+
"x2y918k-1e6ryz3": {
273+
"ltr": "@supports (color: oklab(0 0 0)){@media (prefers-color-scheme: dark){.x2y918k{--xgck17p:oklab(0.7 -0.2 -0.4);}}}",
274+
"priority": 0.7,
275+
"rtl": null,
276+
},
277+
"x2y918k-1lveb7": {
278+
"ltr": "@media (prefers-color-scheme: dark){.x2y918k{--xgck17p:lightgreen;}}",
279+
"priority": 0.6,
280+
"rtl": null,
281+
},
282+
"x2y918k-kpd015": {
283+
"ltr": "@supports (color: oklab(0 0 0)){.x2y918k{--xgck17p:oklab(0.7 -0.3 -0.4);}}",
284+
"priority": 0.6,
285+
"rtl": null,
286+
},
287+
}
288+
`);
289+
});
290+
});

0 commit comments

Comments
 (0)