a small incremental UI library for the web
javascript web ui
1
fork

Configure Feed

Select the types of activity you want to include in your feed.

Fix pseudo element scoping and improve indicator

garrison 8628fb0c 8b98ade9

+47 -14
+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 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
··· 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;