+2 -2

js/css.ts

reviewed

··· 21 21 let firstSelector = true; 22 22 for (const complexSelector of ruleset.selectorList.selectors) { 23 23 if (firstSelector) firstSelector = false; 24 24 - else state.output += ', '; 24 24 + else state.output += ',\n'; 25 25 26 26 let firstEntry = true; 27 27 for (const entry of complexSelector.entries) { ··· 36 36 } 37 37 38 38 export function scopeCSS(stylesheet, scope) { 39 39 - const scopeString = `[s-${scope}]`; 39 39 + const scopeString = `[${scope}]`; 40 40 41 41 for (const ruleset of stylesheet.rulesets) { 42 42 for (const complexSelector of ruleset.selectorList.selectors) {

+11

js/hash.ts

reviewed

··· 1 1 + export function hashString(string) { 2 2 + let hash = 5381; 3 3 + 4 4 + for (let i = 0; i < string.length; i++) { 5 5 + // djb2 xor variant, ^ keeps us within 32 bits 6 6 + // (JS doesn't have 64-bit integers) 7 7 + hash = (hash * 33) ^ string.charAt(i); 8 8 + } 9 9 + 10 10 + return hash; 11 11 + }

+9 -1

js/hooks.ts

reviewed

··· 2 2 import { getCurrentFiber } from './current.ts'; 3 3 import { pushSideEffect } from './effects.ts'; 4 4 import { parseCSS, scopeCSS, generateCSS } from './css.ts'; 5 5 + import { hashString } from './hash.ts'; 5 6 6 7 export const Hook = { 7 8 State: 'state', ··· 77 78 } 78 79 79 80 export function useStyle(text) { 81 81 + const hash = hashString(text); 82 82 + const scope = 's-' + hash.toString(36); 83 83 + 80 84 const ast = parseCSS(text); 81 81 - scopeCSS(ast, 'foobar'); 85 85 + scopeCSS(ast, scope); 82 86 const output = generateCSS(ast); 87 87 + 88 88 + console.log(output); 89 89 + 90 90 + return scope; 83 91 } 84 92 85 93 export function cleanUpEffects(fiber) {