Skip to content

Commit 4cd3ecd

Browse files
mdevilsmdevils
committed
feat: Add CSS modules tests for position, scoping, and multiple module support
1 parent 96821d6 commit 4cd3ecd

File tree

2 files changed

+235
-1
lines changed

2 files changed

+235
-1
lines changed

‎src/syntax-definitions.ts

+3-1
Original file line numberDiff line numberDiff line change
@@ -436,7 +436,9 @@ export const cssModules = {
436436
}
437437
},
438438
pseudoElements: {
439-
definitions: ['slotted']
439+
definitions: {
440+
Selector: ['slotted']
441+
}
440442
}
441443
}
442444
} satisfies Record<string, SyntaxDefinition>;

‎test/modules.test.ts

+232
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,232 @@
1+
import {createParser, ast} from './import.js';
2+
3+
describe('CSS Modules', () => {
4+
describe('css-position-3', () => {
5+
it('should parse position pseudo-classes when module is enabled', () => {
6+
const parse = createParser({
7+
modules: ['css-position-3']
8+
});
9+
10+
expect(parse(':sticky')).toEqual(
11+
ast.selector({
12+
rules: [
13+
ast.rule({
14+
items: [ast.pseudoClass({name: 'sticky'})]
15+
})
16+
]
17+
})
18+
);
19+
20+
expect(parse(':fixed')).toEqual(
21+
ast.selector({
22+
rules: [
23+
ast.rule({
24+
items: [ast.pseudoClass({name: 'fixed'})]
25+
})
26+
]
27+
})
28+
);
29+
30+
expect(parse(':absolute')).toEqual(
31+
ast.selector({
32+
rules: [
33+
ast.rule({
34+
items: [ast.pseudoClass({name: 'absolute'})]
35+
})
36+
]
37+
})
38+
);
39+
});
40+
41+
it('should reject position pseudo-classes when module is not enabled', () => {
42+
const parse = createParser({
43+
syntax: {
44+
pseudoClasses: {
45+
unknown: 'reject'
46+
}
47+
}
48+
});
49+
50+
expect(() => parse(':sticky')).toThrow('Unknown pseudo-class: "sticky".');
51+
expect(() => parse(':fixed')).toThrow('Unknown pseudo-class: "fixed".');
52+
expect(() => parse(':absolute')).toThrow('Unknown pseudo-class: "absolute".');
53+
});
54+
});
55+
56+
describe('css-position-4', () => {
57+
it('should parse position-4 specific pseudo-classes', () => {
58+
const parse = createParser({
59+
modules: ['css-position-4']
60+
});
61+
62+
expect(parse(':initial')).toEqual(
63+
ast.selector({
64+
rules: [
65+
ast.rule({
66+
items: [ast.pseudoClass({name: 'initial'})]
67+
})
68+
]
69+
})
70+
);
71+
});
72+
});
73+
74+
describe('css-scoping-1', () => {
75+
it('should parse host and host-context pseudo-classes', () => {
76+
const parse = createParser({
77+
modules: ['css-scoping-1']
78+
});
79+
80+
expect(parse(':host')).toEqual(
81+
ast.selector({
82+
rules: [
83+
ast.rule({
84+
items: [ast.pseudoClass({name: 'host'})]
85+
})
86+
]
87+
})
88+
);
89+
90+
expect(parse(':host(.special)')).toEqual(
91+
ast.selector({
92+
rules: [
93+
ast.rule({
94+
items: [
95+
ast.pseudoClass({
96+
name: 'host',
97+
argument: ast.selector({
98+
rules: [
99+
ast.rule({
100+
items: [ast.className({name: 'special'})]
101+
})
102+
]
103+
})
104+
})
105+
]
106+
})
107+
]
108+
})
109+
);
110+
111+
expect(parse(':host-context(body.dark-theme)')).toEqual(
112+
ast.selector({
113+
rules: [
114+
ast.rule({
115+
items: [
116+
ast.pseudoClass({
117+
name: 'host-context',
118+
argument: ast.selector({
119+
rules: [
120+
ast.rule({
121+
items: [
122+
ast.tagName({name: 'body'}),
123+
ast.className({name: 'dark-theme'})
124+
]
125+
})
126+
]
127+
})
128+
})
129+
]
130+
})
131+
]
132+
})
133+
);
134+
});
135+
136+
it('should parse ::slotted pseudo-element', () => {
137+
const parse = createParser({
138+
modules: ['css-scoping-1']
139+
});
140+
141+
expect(parse('::slotted(span)')).toEqual(
142+
ast.selector({
143+
rules: [
144+
ast.rule({
145+
items: [
146+
ast.pseudoElement({
147+
name: 'slotted',
148+
argument: ast.selector({
149+
rules: [
150+
ast.rule({
151+
items: [ast.tagName({name: 'span'})]
152+
})
153+
]
154+
})
155+
})
156+
]
157+
})
158+
]
159+
})
160+
);
161+
});
162+
163+
it('should reject scoping selectors when feature is not enabled', () => {
164+
const parse = createParser({
165+
syntax: {
166+
pseudoClasses: {
167+
unknown: 'reject'
168+
},
169+
pseudoElements: {
170+
unknown: 'reject'
171+
}
172+
}
173+
});
174+
175+
expect(() => parse(':host')).toThrow('Unknown pseudo-class: "host".');
176+
expect(() => parse(':host-context(body)')).toThrow('Unknown pseudo-class: "host-context".');
177+
expect(() => parse('::slotted(span)')).toThrow('Unknown pseudo-element "slotted".');
178+
});
179+
});
180+
181+
describe('Multiple modules', () => {
182+
it('should support multiple modules at once', () => {
183+
const parse = createParser({
184+
modules: ['css-position-3', 'css-scoping-1']
185+
});
186+
187+
// Position pseudo-class
188+
expect(parse(':sticky')).toEqual(
189+
ast.selector({
190+
rules: [
191+
ast.rule({
192+
items: [ast.pseudoClass({name: 'sticky'})]
193+
})
194+
]
195+
})
196+
);
197+
198+
// Scoping pseudo-class
199+
expect(parse(':host')).toEqual(
200+
ast.selector({
201+
rules: [
202+
ast.rule({
203+
items: [ast.pseudoClass({name: 'host'})]
204+
})
205+
]
206+
})
207+
);
208+
209+
// Scoping pseudo-element
210+
expect(parse('::slotted(span)')).toEqual(
211+
ast.selector({
212+
rules: [
213+
ast.rule({
214+
items: [
215+
ast.pseudoElement({
216+
name: 'slotted',
217+
argument: ast.selector({
218+
rules: [
219+
ast.rule({
220+
items: [ast.tagName({name: 'span'})]
221+
})
222+
]
223+
})
224+
})
225+
]
226+
})
227+
]
228+
})
229+
);
230+
});
231+
});
232+
});

0 commit comments

Comments
 (0)