Skip to content

Commit 8f83612

Browse files
devongovettdevongovett
authored
chore: Temporarily add version postfix to style macro class names (#8207)
* chore: Temporarily add version postfix to style macro class names * fix nightly
1 parent 493a9ae commit 8f83612

File tree

2 files changed

+62
-56
lines changed

2 files changed

+62
-56
lines changed

‎packages/@react-spectrum/s2/style/__tests__/style-macro.test.js

Lines changed: 56 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -40,22 +40,22 @@ describe('style-macro', () => {
4040
"@layer _.a, _.b, _.c;
4141
4242
@layer _.b {
43-
.Jbs:first-child {
43+
.Jbs8:first-child {
4444
margin-top: 0.25rem;
4545
}
4646
}
4747
4848
@layer _.c.p {
4949
@media (min-width: 64rem) {
50-
.Jbpv:first-child {
50+
.Jbpv8:first-child {
5151
margin-top: 0.5rem;
5252
}
5353
}
5454
}
5555
5656
"
5757
`);
58-
expect(js).toMatchInlineSnapshot('" Jbs Jbpv"');
58+
expect(js).toMatchInlineSnapshot('" Jbs8 Jbpv8"');
5959
});
6060

6161
it('should support self references', () => {
@@ -69,47 +69,47 @@ describe('style-macro', () => {
6969
"@layer _.a;
7070
7171
@layer _.a {
72-
._kc {
72+
._kc8 {
7373
border-top-width: 2px;
7474
}
7575
7676
77-
.hc {
77+
.hc8 {
7878
border-bottom-width: 2px;
7979
}
8080
8181
82-
.mCPFGYc {
82+
.mCPFGYc8 {
8383
border-inline-start-width: var(--m);
8484
}
8585
8686
87-
.lc {
87+
.lc8 {
8888
border-inline-end-width: 2px;
8989
}
9090
9191
92-
.SMBFGYc {
92+
.SMBFGYc8 {
9393
padding-inline-start: var(--S);
9494
}
9595
9696
97-
.Rv {
97+
.Rv8 {
9898
padding-inline-end: calc(var(--F, var(--M)) * 3 / 8);
9999
}
100100
101101
102-
.ZjUQgKd {
102+
.ZjUQgKd8 {
103103
width: calc(200px - var(--m) - var(--S));
104104
}
105105
106106
107-
.-m_-mc {
107+
.-m_-mc8 {
108108
--m: 2px;
109109
}
110110
111111
112-
.-S_-Sv {
112+
.-S_-Sv8 {
113113
--S: calc(var(--F, var(--M)) * 3 / 8);
114114
}
115115
}
@@ -118,7 +118,7 @@ describe('style-macro', () => {
118118
`);
119119

120120
expect(js).toMatchInlineSnapshot(
121-
'" _kc hc mCPFGYc lc SMBFGYc Rv ZjUQgKd -m_-mc -S_-Sv"'
121+
'" _kc8 hc8 mCPFGYc8 lc8 SMBFGYc8 Rv8 ZjUQgKd8 -m_-mc8 -S_-Sv8"'
122122
);
123123
});
124124

@@ -136,9 +136,9 @@ describe('style-macro', () => {
136136
color: 'green-400'
137137
});
138138

139-
expect(js()).toMatchInlineSnapshot('" gw pg"');
140-
expect(overrides).toMatchInlineSnapshot('" g8tmWqb pHJ3AUd"');
141-
expect(js({}, overrides)).toMatchInlineSnapshot('" g8tmWqb pg"');
139+
expect(js()).toMatchInlineSnapshot('" gw8 pg8"');
140+
expect(overrides).toMatchInlineSnapshot('" g8tmWqb8 pHJ3AUd8"');
141+
expect(js({}, overrides)).toMatchInlineSnapshot('" g8tmWqb8 pg8"');
142142
});
143143

144144
it('should support allowed overrides for properties that expand into multiple', () => {
@@ -153,9 +153,9 @@ describe('style-macro', () => {
153153
translateX: 40
154154
});
155155

156-
expect(js()).toMatchInlineSnapshot('" -_7PloMd-B __Ya"');
157-
expect(overrides).toMatchInlineSnapshot('" -_7PloMd-D __Ya"');
158-
expect(js({}, overrides)).toMatchInlineSnapshot('" -_7PloMd-D __Ya"');
156+
expect(js()).toMatchInlineSnapshot('" -_7PloMd-B8 __Ya8"');
157+
expect(overrides).toMatchInlineSnapshot('" -_7PloMd-D8 __Ya8"');
158+
expect(js({}, overrides)).toMatchInlineSnapshot('" -_7PloMd-D8 __Ya8"');
159159
});
160160

161161
it('should support allowed overrides for shorthands', () => {
@@ -170,9 +170,9 @@ describe('style-macro', () => {
170170
padding: 40
171171
});
172172

173-
expect(js()).toMatchInlineSnapshot('" Tk Qk Sk Rk"');
174-
expect(overrides).toMatchInlineSnapshot('" Tm Qm Sm Rm"');
175-
expect(js({}, overrides)).toMatchInlineSnapshot('" Tm Qm Sm Rm"');
173+
expect(js()).toMatchInlineSnapshot('" Tk8 Qk8 Sk8 Rk8"');
174+
expect(overrides).toMatchInlineSnapshot('" Tm8 Qm8 Sm8 Rm8"');
175+
expect(js({}, overrides)).toMatchInlineSnapshot('" Tm8 Qm8 Sm8 Rm8"');
176176
});
177177

178178
it("should support allowed overrides for values that aren't defined", () => {
@@ -187,9 +187,9 @@ describe('style-macro', () => {
187187
minWidth: 32
188188
});
189189

190-
expect(js()).toMatchInlineSnapshot('" gE"');
191-
expect(overrides).toMatchInlineSnapshot('" Nk"');
192-
expect(js({}, overrides)).toMatchInlineSnapshot('" Nk gE"');
190+
expect(js()).toMatchInlineSnapshot('" gE8"');
191+
expect(overrides).toMatchInlineSnapshot('" Nk8"');
192+
expect(js({}, overrides)).toMatchInlineSnapshot('" Nk8 gE8"');
193193
});
194194

195195
it('should support runtime conditions', () => {
@@ -210,42 +210,42 @@ describe('style-macro', () => {
210210
"@layer _.a;
211211
212212
@layer _.a {
213-
.gH {
213+
.gH8 {
214214
background-color: light-dark(rgb(233, 233, 233), rgb(44, 44, 44));
215215
}
216216
217217
218-
.gF {
218+
.gF8 {
219219
background-color: light-dark(rgb(225, 225, 225), rgb(50, 50, 50));
220220
}
221221
222222
223-
.gE {
223+
.gE8 {
224224
background-color: light-dark(rgb(218, 218, 218), rgb(57, 57, 57));
225225
}
226226
227227
228-
.pt {
228+
.pt8 {
229229
color: light-dark(rgb(41, 41, 41), rgb(219, 219, 219));
230230
}
231231
232232
233-
.po {
233+
.po8 {
234234
color: light-dark(rgb(19, 19, 19), rgb(242, 242, 242));
235235
}
236236
237237
238-
.pm {
238+
.pm8 {
239239
color: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));
240240
}
241241
}
242242
243243
"
244244
`);
245245

246-
expect(js({})).toMatchInlineSnapshot('" gH pt"');
247-
expect(js({isHovered: true})).toMatchInlineSnapshot('" gF po"');
248-
expect(js({isPressed: true})).toMatchInlineSnapshot('" gE pm"');
246+
expect(js({})).toMatchInlineSnapshot('" gH8 pt8"');
247+
expect(js({isHovered: true})).toMatchInlineSnapshot('" gF8 po8"');
248+
expect(js({isPressed: true})).toMatchInlineSnapshot('" gE8 pm8"');
249249
});
250250

251251
it('should support nested runtime conditions', () => {
@@ -264,33 +264,33 @@ describe('style-macro', () => {
264264
"@layer _.a;
265265
266266
@layer _.a {
267-
.gH {
267+
.gH8 {
268268
background-color: light-dark(rgb(233, 233, 233), rgb(44, 44, 44));
269269
}
270270
271271
272-
.gF {
272+
.gF8 {
273273
background-color: light-dark(rgb(225, 225, 225), rgb(50, 50, 50));
274274
}
275275
276276
277-
.g_h {
277+
.g_h8 {
278278
background-color: light-dark(rgb(75, 117, 255), rgb(64, 105, 253));
279279
}
280280
281281
282-
.g3 {
282+
.g38 {
283283
background-color: light-dark(rgb(59, 99, 251), rgb(86, 129, 255));
284284
}
285285
}
286286
287287
"
288288
`);
289-
expect(js({})).toMatchInlineSnapshot('" gH"');
290-
expect(js({isHovered: true})).toMatchInlineSnapshot('" gF"');
291-
expect(js({isSelected: true})).toMatchInlineSnapshot('" g_h"');
289+
expect(js({})).toMatchInlineSnapshot('" gH8"');
290+
expect(js({isHovered: true})).toMatchInlineSnapshot('" gF8"');
291+
expect(js({isSelected: true})).toMatchInlineSnapshot('" g_h8"');
292292
expect(js({isSelected: true, isHovered: true})).toMatchInlineSnapshot(
293-
'" g3"'
293+
'" g38"'
294294
);
295295
});
296296

@@ -305,9 +305,9 @@ describe('style-macro', () => {
305305
}
306306
});
307307

308-
expect(js({variant: 'accent'})).toMatchInlineSnapshot('" gY"');
309-
expect(js({variant: 'primary'})).toMatchInlineSnapshot('" gjQquMe"');
310-
expect(js({variant: 'secondary'})).toMatchInlineSnapshot('" gw"');
308+
expect(js({variant: 'accent'})).toMatchInlineSnapshot('" gY8"');
309+
expect(js({variant: 'primary'})).toMatchInlineSnapshot('" gjQquMe8"');
310+
expect(js({variant: 'secondary'})).toMatchInlineSnapshot('" gw8"');
311311
});
312312

313313
it('supports runtime conditions nested inside css conditions', () => {
@@ -325,14 +325,14 @@ describe('style-macro', () => {
325325
326326
@layer _.b.l {
327327
@media (forced-colors: active) {
328-
.plb {
328+
.plb8 {
329329
color: ButtonText;
330330
}
331331
}
332332
333333
334334
@media (forced-colors: active) {
335-
.ple {
335+
.ple8 {
336336
color: HighlightText;
337337
}
338338
}
@@ -341,36 +341,36 @@ describe('style-macro', () => {
341341
"
342342
`);
343343

344-
expect(js({})).toMatchInlineSnapshot('" plb"');
345-
expect(js({isSelected: true})).toMatchInlineSnapshot('" ple"');
344+
expect(js({})).toMatchInlineSnapshot('" plb8"');
345+
expect(js({isSelected: true})).toMatchInlineSnapshot('" ple8"');
346346
});
347347

348348
it('should expand shorthand properties to longhands', () => {
349349
let {js, css} = testStyle({
350350
padding: 24
351351
});
352352

353-
expect(js).toMatchInlineSnapshot('" Th Qh Sh Rh"');
353+
expect(js).toMatchInlineSnapshot('" Th8 Qh8 Sh8 Rh8"');
354354
expect(css).toMatchInlineSnapshot(`
355355
"@layer _.a;
356356
357357
@layer _.a {
358-
.Th {
358+
.Th8 {
359359
padding-top: 24px;
360360
}
361361
362362
363-
.Qh {
363+
.Qh8 {
364364
padding-bottom: 24px;
365365
}
366366
367367
368-
.Sh {
368+
.Sh8 {
369369
padding-inline-start: 24px;
370370
}
371371
372372
373-
.Rh {
373+
.Rh8 {
374374
padding-inline-end: 24px;
375375
}
376376
}
@@ -388,7 +388,7 @@ describe('style-macro', () => {
388388
"@layer _.a;
389389
390390
@layer _.a {
391-
.gpQzfVb {
391+
.gpQzfVb8 {
392392
background-color: rgb(from light-dark(rgb(39, 77, 234), rgb(105, 149, 254)) r g b / 50%);
393393
}
394394
}
@@ -409,7 +409,7 @@ describe('style-macro', () => {
409409
"@layer _.a;
410410
411411
@layer _.a {
412-
.-FUeYm-gE {
412+
.-FUeYm-gE8 {
413413
--foo: light-dark(rgb(218, 218, 218), rgb(57, 57, 57));
414414
}
415415
}

‎packages/@react-spectrum/s2/style/style-macro.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,13 @@
1111
*/
1212

1313
import type {Condition, CSSProperties, CSSValue, CustomValue, Property, PropertyValueDefinition, PropertyValueMap, RenderProps, ShorthandProperty, StyleFunction, StyleValue, Theme, ThemeProperties, Value} from './types';
14+
import fs from 'fs';
1415
import * as propertyInfo from './properties.json';
1516

17+
// Postfix all class names with version for now.
18+
const json = JSON.parse(fs.readFileSync(__dirname + '/../package.json', 'utf8'));
19+
const POSTFIX = json.version.includes('nightly') ? json.version.match(/-nightly-(.*)/)[1] : json.version.replace(/[0.]/g, '');
20+
1621
export class ArbitraryProperty<T extends Value> implements Property<T> {
1722
property: string;
1823
toCSS: (value: T) => CSSValue;
@@ -541,6 +546,7 @@ export function createTheme<T extends Theme>(theme: T): StyleFunction<ThemePrope
541546
}
542547

543548
className += propertyInfo.values[cssProperty]?.[String(value)] ?? generateArbitraryValueSelector(String(value));
549+
className += POSTFIX;
544550
rules.push(new StyleRule(className, key, String(value)));
545551
}
546552

0 commit comments

Comments
 (0)