Skip to content

Commit 85ac77d

Browse files
mdevilsmdevils
committed
refactor: Update CSS module syntax definitions and remove deprecated selectors
1 parent 16c1bb1 commit 85ac77d

File tree

2 files changed

+31
-45
lines changed

2 files changed

+31
-45
lines changed

‎src/syntax-definitions.ts

Lines changed: 15 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -187,6 +187,9 @@ function mergeSection<T>(values: {[K in keyof T]-?: MergeMethod<T[K]>}): MergeMe
187187
}
188188
const result = {...base};
189189
for (const [key, value] of Object.entries(extension) as [keyof T, T[keyof T]][]) {
190+
if (key === 'latest') {
191+
continue;
192+
}
190193
const mergeSchema = values[key];
191194
result[key] = mergeSchema(base[key], value) as never;
192195
}
@@ -393,7 +396,6 @@ const selectors4SyntaxDefinition = extendSyntaxDefinition(selectors3SyntaxDefini
393396
pseudoElements: {
394397
definitions: {
395398
NoArgument: ['marker'],
396-
String: ['highlight', 'cue'],
397399
Selector: ['part']
398400
}
399401
}
@@ -452,13 +454,15 @@ export const cssModules = {
452454
}
453455
},
454456
'css-position-4': {
457+
latest: true,
455458
pseudoClasses: {
456459
definitions: {
457460
NoArgument: ['sticky', 'fixed', 'absolute', 'relative', 'static', 'initial']
458461
}
459462
}
460463
},
461464
'css-scoping-1': {
465+
latest: true,
462466
pseudoClasses: {
463467
definitions: {
464468
NoArgument: ['host', 'host-context'],
@@ -472,35 +476,28 @@ export const cssModules = {
472476
}
473477
},
474478
'css-pseudo-4': {
475-
pseudoClasses: {
476-
definitions: {
477-
NoArgument: [
478-
'focus-visible',
479-
'focus-within',
480-
'target-within',
481-
'blank',
482-
'user-invalid',
483-
'user-valid'
484-
],
485-
Selector: ['has', 'is', 'where', 'not']
486-
}
487-
},
479+
latest: true,
488480
pseudoElements: {
489481
definitions: {
490482
NoArgument: [
491483
'marker',
492484
'selection',
493485
'target-text',
486+
'search-text',
494487
'spelling-error',
495488
'grammar-error',
496-
'backdrop'
489+
'backdrop',
490+
'file-selector-button',
491+
'prefix',
492+
'postfix',
493+
'placeholder',
494+
'details-content'
497495
],
498-
String: ['highlight', 'cue'],
499-
Selector: ['part']
496+
String: ['highlight']
500497
}
501498
}
502499
}
503-
} satisfies Record<string, SyntaxDefinition>;
500+
} satisfies Record<string, SyntaxDefinition & {latest?: true}>;
504501

505502
/**
506503
* CSS Module name.

‎test/modules.test.ts

Lines changed: 16 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -264,7 +264,7 @@ describe('CSS Modules', () => {
264264
const parse = createParser({
265265
modules: ['css-pseudo-4']
266266
});
267-
267+
268268
// Simple pseudo-classes
269269
expect(parse(':focus-visible')).toEqual(
270270
ast.selector({
@@ -275,7 +275,7 @@ describe('CSS Modules', () => {
275275
]
276276
})
277277
);
278-
278+
279279
expect(parse(':blank')).toEqual(
280280
ast.selector({
281281
rules: [
@@ -285,7 +285,7 @@ describe('CSS Modules', () => {
285285
]
286286
})
287287
);
288-
288+
289289
// Functional pseudo-classes
290290
expect(parse(':has(> img)')).toEqual(
291291
ast.selector({
@@ -308,7 +308,7 @@ describe('CSS Modules', () => {
308308
]
309309
})
310310
);
311-
311+
312312
expect(parse(':is(h1, h2, h3)')).toEqual(
313313
ast.selector({
314314
rules: [
@@ -336,12 +336,12 @@ describe('CSS Modules', () => {
336336
})
337337
);
338338
});
339-
339+
340340
it('should parse pseudo-4 pseudo-elements', () => {
341341
const parse = createParser({
342342
modules: ['css-pseudo-4']
343343
});
344-
344+
345345
// Simple pseudo-elements
346346
expect(parse('::marker')).toEqual(
347347
ast.selector({
@@ -352,7 +352,7 @@ describe('CSS Modules', () => {
352352
]
353353
})
354354
);
355-
355+
356356
expect(parse('::selection')).toEqual(
357357
ast.selector({
358358
rules: [
@@ -362,7 +362,7 @@ describe('CSS Modules', () => {
362362
]
363363
})
364364
);
365-
365+
366366
expect(parse('::target-text')).toEqual(
367367
ast.selector({
368368
rules: [
@@ -372,7 +372,7 @@ describe('CSS Modules', () => {
372372
]
373373
})
374374
);
375-
375+
376376
// String argument pseudo-elements
377377
expect(parse('::highlight(example)')).toEqual(
378378
ast.selector({
@@ -388,7 +388,7 @@ describe('CSS Modules', () => {
388388
]
389389
})
390390
);
391-
391+
392392
// Selector argument pseudo-elements
393393
expect(parse('::part(button)')).toEqual(
394394
ast.selector({
@@ -411,7 +411,7 @@ describe('CSS Modules', () => {
411411
})
412412
);
413413
});
414-
414+
415415
it('should reject pseudo-4 selectors when module is not enabled', () => {
416416
const parse = createParser({
417417
syntax: {
@@ -423,7 +423,7 @@ describe('CSS Modules', () => {
423423
}
424424
}
425425
});
426-
426+
427427
expect(() => parse(':focus-visible')).toThrow('Unknown pseudo-class: "focus-visible".');
428428
expect(() => parse(':has(> img)')).toThrow('Unknown pseudo-class: "has".');
429429
expect(() => parse('::marker')).toThrow('Unknown pseudo-element "marker".');
@@ -481,12 +481,12 @@ describe('CSS Modules', () => {
481481
})
482482
);
483483
});
484-
484+
485485
it('should support combining css-position and css-pseudo modules', () => {
486486
const parse = createParser({
487487
modules: ['css-position-3', 'css-pseudo-4']
488488
});
489-
489+
490490
// Position pseudo-class
491491
expect(parse(':sticky')).toEqual(
492492
ast.selector({
@@ -497,18 +497,7 @@ describe('CSS Modules', () => {
497497
]
498498
})
499499
);
500-
501-
// Pseudo-4 pseudo-class
502-
expect(parse(':focus-visible')).toEqual(
503-
ast.selector({
504-
rules: [
505-
ast.rule({
506-
items: [ast.pseudoClass({name: 'focus-visible'})]
507-
})
508-
]
509-
})
510-
);
511-
500+
512501
// Pseudo-4 pseudo-element
513502
expect(parse('::marker')).toEqual(
514503
ast.selector({
@@ -519,7 +508,7 @@ describe('CSS Modules', () => {
519508
]
520509
})
521510
);
522-
511+
523512
// Complex selector using both modules
524513
expect(parse('div:sticky:has(> img::marker)')).toEqual(
525514
ast.selector({

0 commit comments

Comments
 (0)