Skip to content

Commit 6b32c77

Browse files
layershifterlayershifter
committed
chore: new typings
1 parent fb21c43 commit 6b32c77

File tree

19 files changed

+277
-139
lines changed

19 files changed

+277
-139
lines changed

‎e2e/typescript/src/assets/fixture-reset.ts

Lines changed: 27 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -132,41 +132,41 @@ assertType({
132132
});
133133

134134
assertType({
135-
'.bar': { color: 'beige' },
136-
'.foo': { padding: '5px' },
137-
'.qux': { paddingLeft: '5px' },
135+
'&.bar': { color: 'beige' },
136+
'&.foo': { padding: '5px' },
137+
'&.qux': { paddingLeft: '5px' },
138138
});
139139

140140
assertType({
141-
'.bar': { '--color': 'red' },
141+
'&.bar': { '--color': 'red' },
142142
});
143143
assertType({
144-
'.bar': { animationName: { from: {}, to: {} } },
144+
'&.bar': { animationName: { from: {}, to: {} } },
145145
});
146146

147147
// Nested custom selectors
148148
//
149149

150150
assertType({
151-
'.foo': {
152-
'.bar': { flexShrink: 0 },
153-
'.baz': { flexShrink: 'initial' },
154-
'.qux': { opacity: 0 },
155-
'.fred': { zIndex: 0 },
156-
'.thud': { zIndex: 1 },
151+
'&.foo': {
152+
'&.bar': { flexShrink: 0 },
153+
'&.baz': { flexShrink: 'initial' },
154+
'&.qux': { opacity: 0 },
155+
'&.fred': { zIndex: 0 },
156+
'&.thud': { zIndex: 1 },
157157
},
158-
'.bar': {
159-
'.baz': { color: 'beige' },
160-
'.qux': { paddingLeft: '5px' },
158+
'&.bar': {
159+
'&.baz': { color: 'beige' },
160+
'&.qux': { paddingLeft: '5px' },
161161
},
162-
'.baz': {
163-
'.qux': {
162+
'&.baz': {
163+
'&.qux': {
164164
'--color': 'red',
165165
},
166166
},
167-
'.qux': {
168-
'.bar': { flexShrink: 'var(--bar)' },
169-
'.baz': { opacity: 'var(--baz)' },
167+
'&.qux': {
168+
'&.bar': { flexShrink: 'var(--bar)' },
169+
'&.baz': { opacity: 'var(--baz)' },
170170
},
171171
});
172172

@@ -326,8 +326,8 @@ assertType({
326326
//
327327

328328
assertType({
329-
'.foo': {
330-
'.baz': {
329+
'&.foo': {
330+
'&.baz': {
331331
// @ts-expect-error "1" is invalid value for "overflowX"
332332
overflowX: '1',
333333
padding: 0,
@@ -337,37 +337,37 @@ assertType({
337337
},
338338
});
339339
assertType({
340-
'.foo': {
340+
'&.foo': {
341341
// @ts-expect-error outline-box is an invalid value for box-sizing
342342
boxSizing: 'outline-box',
343343

344-
'.bar': {
344+
'&.bar': {
345345
// @ts-expect-error outline-box is an invalid value for box-sizing
346346
boxSizing: 'outline-box', // < no error here, TS only reports the error for the whole object
347347
},
348348
},
349349
});
350350
assertType({
351-
'.foo': {
351+
'&.foo': {
352352
// @ts-expect-error outline-box is an invalid value for box-sizing
353353
boxSizing: 'outline-box',
354354
zIndex: 1,
355355

356-
'.bar': {
356+
'&.bar': {
357357
// @ts-expect-error outline-box is an invalid value for box-sizing
358358
boxSizing: 'outline-box',
359359
zIndex: 1,
360360
},
361361
},
362362
});
363363
assertType({
364-
'.foo': {
364+
'&.foo': {
365365
// @ts-expect-error Object is not assignable to CSS property
366366
zIndex: { color: 'red' },
367367
// @ts-expect-error Object is not assignable to CSS property
368368
opacity: { color: 'red' },
369369

370-
'.bar': {
370+
'&.bar': {
371371
// @ts-expect-error Object is not assignable to CSS property
372372
zIndex: { color: 'red' },
373373
// @ts-expect-error Object is not assignable to CSS property

‎e2e/typescript/src/assets/fixture.ts

Lines changed: 80 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,15 @@ assertType({
3131
},
3232
});
3333

34+
assertType({
35+
':hover': { animationName: { from: {}, to: {} } },
36+
});
37+
assertType({
38+
'&.bar': {
39+
animationName: { from: {}, to: {} },
40+
},
41+
});
42+
3443
assertType({
3544
// @ts-expect-error "200" is not a valid CSS value for "height"
3645
animationName: {
@@ -43,6 +52,16 @@ assertType({
4352
from: { '--opacity': 0 },
4453
},
4554
});
55+
assertType({
56+
animationName: {
57+
from: {
58+
// @ts-expect-error Only strings can be used as values for CSS variables
59+
'&.foo': {
60+
color: 'red',
61+
},
62+
},
63+
},
64+
});
4665

4766
// Basic styles
4867
//
@@ -55,6 +74,13 @@ assertType({ zIndex: 1 });
5574
assertType({ paddingLeft: '5px' });
5675
assertType({ color: 'beige' });
5776

77+
assertType({ WebkitBackgroundSize: 'initial' });
78+
79+
// @ts-expect-error Properties should be camelCase
80+
assertType({ 'padding-left': 'beige' });
81+
// @ts-expect-error Properties should be camelCase
82+
assertType({ '-webkit-scrollbar': 'beige' });
83+
5884
// CSS variables
5985
//
6086

@@ -102,23 +128,25 @@ assertType({
102128
assertType({
103129
':hover': { content: "'foo'" },
104130
});
105-
assertType({
106-
':hover': { animationName: { from: {}, to: {} } },
107-
});
108131

109132
assertType({
110133
// @ts-expect-error Values of selectors can be only objects
111134
':hover': 'red',
112135
});
136+
assertType({
137+
// @ts-expect-error ":foo" is not valid pseudo selector
138+
':foo': { flexShrink: 0 },
139+
});
113140

114-
// Custom selectors
141+
// Complex pseudo selectors
115142
//
116143

117144
assertType({
118145
':hover:focus': { flexShrink: 0 },
119146
':hover:active': { flexShrink: 'initial' },
120147
':hover:visited': { zIndex: 0 },
121148
':hover:focus-visible': { zIndex: 1 },
149+
':hover &.foo': { zIndex: 1 },
122150
});
123151

124152
assertType({
@@ -129,40 +157,62 @@ assertType({
129157
});
130158

131159
assertType({
132-
'.bar': { color: 'beige' },
133-
'.foo': { paddingLeft: '5px' },
160+
// @ts-expect-error Values of selectors can be only objects
161+
':hover:focus': 'red',
162+
});
163+
assertType({
164+
// @ts-expect-error ":foo" is not valid pseudo selector
165+
':foo:hover': { flexShrink: 0 },
166+
});
167+
assertType({
168+
// @ts-expect-error ":foo" is not valid pseudo selector
169+
':foo &.bar': { flexShrink: 0 },
170+
});
171+
172+
// Custom selectors
173+
//
174+
175+
assertType({
176+
'&.bar': { color: 'beige' },
177+
'&.foo': { paddingLeft: '5px' },
134178
});
135179

136180
assertType({
137-
'.bar': { '--color': 'red' },
181+
'&.bar': { '--color': 'red' },
138182
});
183+
139184
assertType({
140-
'.bar': { animationName: { from: {}, to: {} } },
185+
// @ts-expect-error Values of selectors can be only objects
186+
'&.bar': 'red',
187+
});
188+
assertType({
189+
// @ts-expect-error Custom selector should start with "&"
190+
'.bar': { color: 'beige' },
141191
});
142192

143193
// Nested custom selectors
144194
//
145195

146196
assertType({
147-
'.foo': {
148-
'.bar': { flexShrink: 0 },
149-
'.baz': { flexShrink: 'initial' },
150-
'.qux': { opacity: 0 },
151-
'.fred': { zIndex: 0 },
152-
'.thud': { zIndex: 1 },
197+
'&.foo': {
198+
'&.bar': { flexShrink: 0 },
199+
'&.baz': { flexShrink: 'initial' },
200+
'&.qux': { opacity: 0 },
201+
'&.fred': { zIndex: 0 },
202+
'&.thud': { zIndex: 1 },
153203
},
154-
'.bar': {
155-
'.baz': { color: 'beige' },
156-
'.qux': { paddingLeft: '5px' },
204+
'&.bar': {
205+
'&.baz': { color: 'beige' },
206+
'&.qux': { paddingLeft: '5px' },
157207
},
158-
'.baz': {
159-
'.qux': {
208+
'&.baz': {
209+
'&.qux': {
160210
'--color': 'red',
161211
},
162212
},
163-
'.qux': {
164-
'.bar': { flexShrink: 'var(--bar)' },
165-
'.baz': { opacity: 'var(--baz)' },
213+
'&.qux': {
214+
'&.bar': { flexShrink: 'var(--bar)' },
215+
'&.baz': { opacity: 'var(--baz)' },
166216
},
167217
});
168218

@@ -315,8 +365,8 @@ assertType({
315365
//
316366

317367
assertType({
318-
'.foo': {
319-
'.baz': {
368+
'&.foo': {
369+
'&.baz': {
320370
// @ts-expect-error outline-box is an invalid value for box-sizing
321371
overflowX: '1',
322372
// @ts-expect-error "5" is an invalid value for paddingLeft
@@ -325,37 +375,37 @@ assertType({
325375
},
326376
});
327377
assertType({
328-
'.foo': {
378+
'&.foo': {
329379
// @ts-expect-error outline-box is an invalid value for box-sizing
330380
boxSizing: 'outline-box',
331381

332-
'.bar': {
382+
'&.bar': {
333383
// @ts-expect-error outline-box is an invalid value for box-sizing
334384
boxSizing: 'outline-box',
335385
},
336386
},
337387
});
338388
assertType({
339-
'.foo': {
389+
'&.foo': {
340390
// @ts-expect-error outline-box is an invalid value for box-sizing
341391
boxSizing: 'outline-box',
342392
zIndex: 1,
343393

344-
'.bar': {
394+
'&.bar': {
345395
// @ts-expect-error outline-box is an invalid value for box-sizing
346396
boxSizing: 'outline-box',
347397
zIndex: 1,
348398
},
349399
},
350400
});
351401
assertType({
352-
'.foo': {
402+
'&.foo': {
353403
// @ts-expect-error Object is not assignable to CSS property
354404
zIndex: { color: 'red' },
355405
// @ts-expect-error Object is not assignable to CSS property
356406
opacity: { color: 'red' },
357407

358-
'.bar': {
408+
'&.bar': {
359409
// @ts-expect-error Object is not assignable to CSS property
360410
zIndex: { color: 'red' },
361411
// @ts-expect-error Object is not assignable to CSS property

‎packages/babel-preset/__fixtures__/object-sequence-expr/code.ts

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,11 @@ const switchClassName = 'fui-Switch';
55
let _a: Record<string, GriffelStyle>;
66

77
export const useStyles = makeStyles({
8-
root:
9-
((_a = {}),
10-
(_a[':hover .' + switchClassName] = {
11-
':before': {
12-
backgroundColor: 'red',
13-
},
14-
}),
15-
_a),
8+
root: ((_a = {}),
9+
(_a[':hover .' + switchClassName] = {
10+
':before': {
11+
backgroundColor: 'red',
12+
} as GriffelStyle,
13+
}),
14+
_a) as any,
1615
});

‎packages/babel-preset/src/assets/normalizeStyleRules.ts

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import type { GriffelAnimation, GriffelStyle } from '@griffel/core';
1+
import type { GriffelAnimation, GriffelResetStyle, GriffelResetAnimation, GriffelStyle } from '@griffel/core';
22
import { tokenize } from 'stylis';
33

44
import { isAssetUrl } from './isAssetUrl';
@@ -47,14 +47,11 @@ export function normalizeStyleRule(
4747
}, '');
4848
}
4949

50-
export function normalizeStyleRules(
51-
path: typeof import('path'),
52-
projectRoot: string,
53-
filename: string,
54-
stylesBySlots: Record<string /* slot */, GriffelStyle> | GriffelStyle,
55-
): Record<string /* slot */, GriffelStyle> {
50+
export function normalizeStyleRules<
51+
Styles extends GriffelStyle | GriffelAnimation | GriffelResetStyle | GriffelResetAnimation,
52+
>(path: typeof import('path'), projectRoot: string, filename: string, styles: Styles): Styles {
5653
return Object.fromEntries(
57-
Object.entries(stylesBySlots).map(([key, value]) => {
54+
Object.entries(styles).map(([key, value]) => {
5855
if (typeof value === 'undefined' || value === null) {
5956
return [key, value];
6057
}
@@ -65,7 +62,7 @@ export function normalizeStyleRules(
6562
key,
6663
value.map(rule => {
6764
if (typeof rule === 'object') {
68-
return normalizeStyleRules(path, projectRoot, filename, rule as GriffelAnimation);
65+
return normalizeStyleRules(path, projectRoot, filename, rule);
6966
}
7067

7168
return normalizeStyleRule(path, projectRoot, filename, rule);

0 commit comments

Comments
 (0)