a small incremental UI library for the web
javascript
web
ui
Fix pseudo element scoping and improve indicator
+47
-14
+15
-6
demos/todo/todo.tsx
+15
-6
demos/todo/todo.tsx
···
164
164
display: flex;
165
165
align-items: center;
166
166
gap: 8px;
167
+
position: relative;
168
+
}
169
+
label:not(:first-child) {
170
+
border-top: 0.5px solid black;
167
171
}
168
172
label:not(:last-child) {
169
-
border-bottom: 1px solid black;
173
+
border-bottom: 0.5px solid black;
170
174
}
171
175
172
-
.top {
173
-
border-top: 2px solid blue !important;
174
-
}
175
-
.bottom {
176
-
border-bottom: 2px solid blue !important;
176
+
.top::after, .bottom::after {
177
+
content: '';
178
+
height: 2px;
179
+
background-color: blue;
180
+
position: absolute;
181
+
left: 0;
182
+
right: 0;
183
+
z-index: 10;
177
184
}
185
+
.top::after { top: -1.5px; }
186
+
.bottom::after { bottom: -1.5px; }
178
187
`);
179
188
180
189
return (
+23
-7
js/css.ts
+23
-7
js/css.ts
···
23
23
else state.output += ',\n';
24
24
25
25
let firstEntry = true;
26
-
for (const entry of complexSelector.entries) {
26
+
for (const compoundSelector of complexSelector.entries) {
27
+
assert(compoundSelector.type === 'compound_selector');
28
+
27
29
if (firstEntry) firstEntry = false;
28
30
else state.output += ' ';
29
-
state.output += entry.text;
31
+
32
+
state.output += compoundSelector.selector;
33
+
if (compoundSelector.pseudoElement) state.output += compoundSelector.pseudoElement;
30
34
}
31
35
}
32
36
···
43
47
for (const complexSelector of ruleset.selectorList.selectors) {
44
48
for (const entry of complexSelector.entries) {
45
49
if (entry.type === 'compound_selector') {
46
-
entry.text += scopeString;
50
+
entry.selector += scopeString;
47
51
}
48
52
}
49
53
}
···
179
183
}
180
184
181
185
assert((state.pos - start) > 0);
182
-
return {
183
-
type: 'compound_selector',
184
-
text: input.slice(start, state.pos),
185
-
};
186
+
const text = input.slice(start, state.pos);
187
+
const split = text.split('::');
188
+
if (split.length === 2) {
189
+
return {
190
+
type: 'compound_selector',
191
+
selector: split[0],
192
+
pseudoElement: '::' + split[1],
193
+
};
194
+
}
195
+
else {
196
+
assert(split.length === 1);
197
+
return {
198
+
type: 'compound_selector',
199
+
selector: split[0],
200
+
};
201
+
}
186
202
}
187
203
188
204
function skipWhitepsace(state) {
+9
-1
js/hooks.ts
+9
-1
js/hooks.ts
···
117
117
118
118
function injectStyles(rules) {
119
119
const sheet = getStylesheet();
120
-
for (const rule of rules) sheet.insertRule(rule);
120
+
for (const rule of rules) {
121
+
try {
122
+
sheet.insertRule(rule);
123
+
}
124
+
catch(error) {
125
+
console.error('An error occurred while inserting the following scoped rule:\n\n' + rule);
126
+
throw error;
127
+
}
128
+
}
121
129
}
122
130
123
131
let STYLESHEET;