a small incremental UI library for the web
javascript
web
ui
Add CSS generator
+41
-6
+39
-5
js/css.ts
+39
-5
js/css.ts
···
1
1
import { assert } from './utils';
2
2
3
+
export function generateCSS(stylesheet) {
4
+
const output = generateStylesheet(stylesheet);
5
+
return output;
6
+
}
7
+
8
+
function generateStylesheet(stylesheet) {
9
+
const state = {
10
+
output: '',
11
+
};
12
+
13
+
for (const ruleset of stylesheet.rulesets) {
14
+
generateRuleset(ruleset, state);
15
+
}
16
+
17
+
return state.output;
18
+
}
19
+
20
+
function generateRuleset(ruleset, state) {
21
+
let firstSelector = true;
22
+
for (const complexSelector of ruleset.selectorList.selectors) {
23
+
if (firstSelector) firstSelector = false;
24
+
else state.output += ', ';
25
+
26
+
let firstEntry = true;
27
+
for (const entry of complexSelector.entries) {
28
+
if (firstEntry) firstEntry = false;
29
+
else state.output += ' ';
30
+
state.output += entry.text;
31
+
}
32
+
}
33
+
34
+
const body = ruleset.body.text.trim().replace(/\n\s*/, '\n ');
35
+
state.output += (' {\n ' + body + '\n}\n\n');
36
+
}
37
+
3
38
export function parseCSS(input) {
4
39
const stylesheet = parseStylesheet(input);
5
-
console.log(JSON.stringify(stylesheet, null, 2));
6
40
return stylesheet;
7
41
}
8
42
···
88
122
89
123
function parseComplexSelector(state) {
90
124
const {input} = state;
91
-
const selectors = [];
125
+
const entries = [];
92
126
while (true) {
93
127
refuteEof(state);
94
128
95
129
const simple = parseCompoundSelector(state);
96
-
selectors.push(simple);
130
+
entries.push(simple);
97
131
98
132
skipWhitepsace(state);
99
133
const char = input.charAt(state.pos);
100
134
if (char === '{' || char === ',') break;
101
135
102
136
if (isCombinator(char)) {
103
-
selectors.push({type: 'combinator', text: char});
137
+
entries.push({type: 'combinator', text: char});
104
138
state.pos++;
105
139
skipWhitepsace(state);
106
140
}
···
108
142
109
143
return {
110
144
type: 'complex_selector',
111
-
content: selectors,
145
+
entries: entries,
112
146
};
113
147
}
114
148
+2
-1
js/hooks.ts
+2
-1
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 } from './css.ts';
4
+
import { parseCSS, 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
82
}
82
83
83
84
export function cleanUpEffects(fiber) {