uraniyum 1.1.9 → 1.2.0

package/src/styles.ts

@@ -11,25 +11,9 @@ export interface StyleRule {
 export type StylesMap = Record<string, StyleRule>;
 export type ClassNames<T extends StylesMap> = { [K in keyof T]: string };
 
-const styleCache = new Map<string, true>();
-const keyframeCache = new Map<string, string>();
 let styleElement: HTMLStyleElement | null = null;
 let styleSheet: CSSStyleSheet | null = null;
 
-const ALLOWED_PREFIXES = [
-    "root",
-    "button",
-    "icon",
-    "text",
-    "container",
-    "wrapper",
-    "card",
-    "header",
-    "section",
-];
-
-const KEYFRAMES_PREFIX = "@keyframes ";
-
 function ensureStyleSheet(): CSSStyleSheet {
     if (!styleSheet) {
         if (!styleElement) {
@@ -42,43 +26,73 @@ function ensureStyleSheet(): CSSStyleSheet {
     return styleSheet;
 }
 
-function hashString(str: string): string {
-    let hash = 5381;
-    for (let i = 0; i < str.length; i++) {
-        hash = (hash * 33) ^ str.charCodeAt(i);
-    }
-    return (hash >>> 0).toString(36);
-}
-
 const camelToKebabCache = new Map<string, string>();
 
 function camelToKebab(str: string): string {
     const cached = camelToKebabCache.get(str);
     if (cached) return cached;
 
-    const result = str.replace(/[A-Z]/g, (m) => "-" + m.toLowerCase());
+    const result = str.replace(/[A-Z]/g, m => "-" + m.toLowerCase());
     camelToKebabCache.set(str, result);
     return result;
 }
 
-function stableHashRule(rule: Record<string, any>): string {
-    const parts: string[] = [];
+type AtomicKey = string;
 
-    for (const key in rule) {
-        if (!Object.prototype.hasOwnProperty.call(rule, key)) continue;
-        const val = rule[key];
+const atomicClassCache = new Map<AtomicKey, string>();
+let atomicCounter = 0;
 
-        if (key.startsWith("@") || typeof val === "object" || val == null) continue;
+function nextAtomicClass(): string {
+    return `a-${atomicCounter++}`;
+}
 
-        let v: string;
-        if (typeof val === "function") v = val.toString();
-        else v = String(val);
+function registerAtomicRule(
+    selector: string,
+    decl: string,
+): string {
+    const key = `${selector}|${decl}`;
+
+    const cached = atomicClassCache.get(key);
+    if (cached) return cached;
+
+    const className = nextAtomicClass();
+    atomicClassCache.set(key, className);
+
+    ensureStyleSheet().insertRule(
+        `${selector.replace(/&/g, `.${className}`)}{${decl}}`,
+        styleSheet!.cssRules.length,
+    );
 
-        parts.push(`${key}:${v}`);
+    return className;
+}
+
+const KEYFRAMES_PREFIX = "@keyframes ";
+const keyframeCache = new Map<string, string>();
+let keyframeCounter = 0;
+
+function registerKeyframes(
+    name: string,
+    frames: Record<string, any>,
+): string {
+    const signature = name + JSON.stringify(frames);
+    const cached = keyframeCache.get(signature);
+    if (cached) return cached;
+
+    const unique = `${name}-${keyframeCounter++}`;
+
+    const steps: string[] = [];
+    for (const step in frames) {
+        const decls = stringifyDecls(frames[step] ?? {}, new Map());
+        steps.push(`${step}{${decls}}`);
     }
 
-    parts.sort();
-    return hashString(parts.join("|"));
+    ensureStyleSheet().insertRule(
+        `@keyframes ${unique}{${steps.join("")}}`,
+        styleSheet!.cssRules.length,
+    );
+
+    keyframeCache.set(signature, unique);
+    return unique;
 }
 
 function stringifyDecls(
@@ -88,19 +102,15 @@ function stringifyDecls(
     const out: string[] = [];
 
     for (const key in props) {
-        if (!Object.prototype.hasOwnProperty.call(props, key)) continue;
         const raw = props[key];
-
         if (raw == null || typeof raw === "object") continue;
 
-        let val: string | number =
-            typeof raw === "function" ? raw() : (raw as string | number);
+        let val =
+            typeof raw === "function" ? raw() : raw;
 
-        if (typeof val === "string" && keyframes.size > 0) {
+        if (typeof val === "string") {
             for (const [orig, uniq] of keyframes) {
-                if (val.includes(`$${orig}`)) {
-                    val = val.replaceAll(`$${orig}`, uniq);
-                }
+                val = val.replaceAll(`$${orig}`, uniq);
             }
         }
 
@@ -110,123 +120,83 @@ function stringifyDecls(
     return out.join(";");
 }
 
-function registerKeyframes(
-    name: string,
-    frames: Record<string, any>,
-): string {
-    const hash = hashString(name + JSON.stringify(frames));
-    const unique = `${name}-${hash}`;
-
-    const cached = keyframeCache.get(unique);
-    if (cached) return cached;
-
-    const sheet = ensureStyleSheet();
-
-    const steps: string[] = [];
-    for (const step in frames) {
-        if (!Object.prototype.hasOwnProperty.call(frames, step)) continue;
-        const decls = stringifyDecls(frames[step] ?? {}, new Map());
-        steps.push(`${step}{${decls}}`);
-    }
-
-    const ruleText = `@keyframes ${unique}{${steps.join("")}}`;
-    sheet.insertRule(ruleText, sheet.cssRules.length);
-    keyframeCache.set(unique, unique);
-
-    return unique;
-}
-
-function buildRules(
-    className: string,
-    rule: Record<string, any>,
+function buildAtomicClasses(
+    rule: StyleRule,
     keyframes: Map<string, string>,
 ): string[] {
-    const rules: string[] = [];
-    const baseDecls: string[] = [];
+    const classes: string[] = [];
 
     for (const key in rule) {
-        if (!Object.prototype.hasOwnProperty.call(rule, key)) continue;
         const val = rule[key];
-
-        if (key.startsWith("@keyframes")) {
-            continue;
-        }
-
         if (!val) continue;
 
         if (key[0] === ":" && typeof val === "object") {
-            const decls = stringifyDecls(val ?? {}, keyframes);
-            if (decls) {
-                rules.push(`.${className}${key}{${decls}}`);
-            }
+            const decls = stringifyDecls(val, keyframes);
+            if (!decls) continue;
+
+            classes.push(
+                registerAtomicRule(`&${key}`, decls),
+            );
             continue;
         }
 
         if (key.startsWith("@media") && typeof val === "object") {
-            const decls = stringifyDecls(val ?? {}, keyframes);
-            if (decls) {
-                rules.push(`${key}{.${className}{${decls}}}`);
-            }
+            const decls = stringifyDecls(val, keyframes);
+            if (!decls) continue;
+
+            const className = nextAtomicClass();
+            atomicClassCache.set(`${key}|${decls}`, className);
+
+            ensureStyleSheet().insertRule(
+                `${key}{.${className}{${decls}}}`,
+                styleSheet!.cssRules.length,
+            );
+
+            classes.push(className);
             continue;
         }
 
-        if (key.includes("&") && typeof val === "object") {
-            const selector = key.replace(/&/g, `.${className}`);
-            const decls = stringifyDecls(val ?? {}, keyframes);
-            if (decls) {
-                rules.push(`${selector}{${decls}}`);
+        if (typeof val !== "object") {
+            let resolved =
+                typeof val === "function" ? val() : val;
+
+            if (typeof resolved === "string") {
+                for (const [orig, uniq] of keyframes) {
+                    resolved = resolved.replaceAll(`$${orig}`, uniq);
+                }
             }
-            continue;
-        }
 
-        if (!key.startsWith("@") && typeof val !== "object") {
-            const raw = typeof val === "function" ? val() : val;
-            baseDecls.push(`${camelToKebab(key)}:${raw}`);
+            const decl = `${camelToKebab(key)}:${resolved}`;
+            classes.push(
+                registerAtomicRule("&", decl),
+            );
         }
     }
 
-    if (baseDecls.length > 0) {
-        rules.push(`.${className}{${baseDecls.join(";")}}`);
-    }
-
-    return rules;
+    return classes;
 }
 
 export function makeStyles<T extends StylesMap>(styles: T) {
     return (): ClassNames<T> => {
         const classNames = {} as ClassNames<T>;
         const keyframesMap = new Map<string, string>();
-        const sheet = ensureStyleSheet();
 
         for (const key in styles) {
-            if (!Object.prototype.hasOwnProperty.call(styles, key)) continue;
             if (!key.startsWith(KEYFRAMES_PREFIX)) continue;
 
             const name = key.slice(KEYFRAMES_PREFIX.length);
-            const frames = styles[key] as unknown as Record<string, any>;
+            const frames = styles[key] as any;
             const unique = registerKeyframes(name, frames);
             keyframesMap.set(name, unique);
         }
 
         for (const slot in styles) {
-            if (!Object.prototype.hasOwnProperty.call(styles, slot)) continue;
             if (slot.startsWith(KEYFRAMES_PREFIX)) continue;
 
-            const rule = styles[slot] as StyleRule;
-            const hash = stableHashRule(rule);
-            const className = ALLOWED_PREFIXES.includes(slot)
-                ? `${slot}-${hash}`
-                : `css-${hash}`;
+            const rule = (styles[slot] ?? {}) as StyleRule;
+            const classes = buildAtomicClasses(rule, keyframesMap);
 
-            if (!styleCache.has(className)) {
-                const rules = buildRules(className, rule, keyframesMap);
-                for (const r of rules) {
-                    sheet.insertRule(r, sheet.cssRules.length);
-                }
-                styleCache.set(className, true);
-            }
-
-            (classNames as any)[slot] = className;
+            (classNames as any)[slot] = classes.join(" ");
         }
 
         return classNames;
@@ -245,13 +215,11 @@ export function mergeStyleSets<T extends StylesMap>(
     for (const set of sets) {
         if (!set) continue;
         for (const key in set) {
-            if (!Object.prototype.hasOwnProperty.call(set, key)) continue;
-
             const prev = (merged[key] as StyleRule) ?? {};
             const cur = (set[key] as StyleRule) ?? {};
-            merged[key] = { ...prev, ...cur } as StyleRule;
+            merged[key] = { ...prev, ...cur };
         }
     }
 
     return makeStyles(merged as T)();
-}
+}