a small incremental UI library for the web
javascript
web
ui
Scope CSS
+18
-3
+15
-1
js/css.ts
+15
-1
js/css.ts
···
35
35
state.output += (' {\n ' + body + '\n}\n\n');
36
36
}
37
37
38
+
export function scopeCSS(stylesheet, scope) {
39
+
const scopeString = `[s-${scope}]`;
40
+
41
+
for (const ruleset of stylesheet.rulesets) {
42
+
for (const complexSelector of ruleset.selectorList.selectors) {
43
+
for (const entry of complexSelector.entries) {
44
+
if (entry.type === 'compound_selector') {
45
+
entry.text += scopeString;
46
+
}
47
+
}
48
+
}
49
+
}
50
+
}
51
+
38
52
export function parseCSS(input) {
39
53
const stylesheet = parseStylesheet(input);
40
54
return stylesheet;
···
165
179
166
180
assert((state.pos - start) > 0);
167
181
return {
168
-
type: 'simple_selector',
182
+
type: 'compound_selector',
169
183
text: input.slice(start, state.pos),
170
184
};
171
185
}
+3
-2
js/hooks.ts
+3
-2
js/hooks.ts
···
1
1
import { queueFiberTree } from './render.ts';
2
2
import { getCurrentFiber } from './current.ts';
3
3
import { pushSideEffect } from './effects.ts';
4
-
import { parseCSS, generateCSS } from './css.ts';
4
+
import { parseCSS, scopeCSS, generateCSS } from './css.ts';
5
5
6
6
export const Hook = {
7
7
State: 'state',
···
78
78
79
79
export function useStyle(text) {
80
80
const ast = parseCSS(text);
81
-
generateCSS(ast);
81
+
scopeCSS(ast, 'foobar');
82
+
const output = generateCSS(ast);
82
83
}
83
84
84
85
export function cleanUpEffects(fiber) {