uraniyum 1.1.10 → 1.2.1

package/src/styles.ts

@@ -1,242 +1,159 @@
 export type CSSValue = string | number | (() => string | number);
 
-export interface CSSProperties {
-    [key: string]: CSSValue | CSSProperties | undefined;
-}
-
 export interface StyleRule {
-    [key: string]: CSSValue | CSSProperties | undefined;
+    [key: string]: CSSValue | StyleRule | undefined;
 }
 
 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) {
-            styleElement = document.createElement("style");
-            styleElement.id = "styles";
-            document.head.appendChild(styleElement);
-        }
+        styleElement = document.createElement("style");
+        styleElement.id = "styles";
+        document.head.appendChild(styleElement);
         styleSheet = styleElement.sheet as 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());
-    camelToKebabCache.set(str, result);
-    return result;
+    const res = str.replace(/[A-Z]/g, m => "-" + m.toLowerCase());
+    camelToKebabCache.set(str, res);
+    return res;
 }
 
-function stableHashRule(rule: Record<string, any>): string {
-    const parts: string[] = [];
-
-    for (const key in rule) {
-        if (!Object.prototype.hasOwnProperty.call(rule, key)) continue;
-        const val = rule[key];
-
-        if (key.startsWith("@") || typeof val === "object" || val == null) continue;
-
-        let v: string;
-        if (typeof val === "function") v = val.toString();
-        else v = String(val);
-
-        parts.push(`${key}:${v}`);
-    }
-
-    parts.sort();
-    return hashString(parts.join("|"));
+function resolveValue(v: CSSValue): string | number {
+    return typeof v === "function" ? v() : v;
 }
 
-function stringifyDecls(
-    props: Record<string, any>,
-    keyframes: Map<string, string>,
-): string {
-    const out: string[] = [];
+const PRECEDENCE_LAYERS = 3;
+let atomicCounter = 0;
 
-    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);
+function encode(n: number): string {
+    return n.toString(36);
+}
 
-        if (typeof val === "string" && keyframes.size > 0) {
-            for (const [orig, uniq] of keyframes) {
-                if (val.includes(`$${orig}`)) {
-                    val = val.replaceAll(`$${orig}`, uniq);
-                }
-            }
-        }
+function makeClassName(layer: number): string {
+    // looks like f1phragk
+    return `f${layer}${encode(atomicCounter++).padStart(5, "0")}`;
+}
 
-        out.push(`${camelToKebab(key)}:${val}`);
-    }
+type AtomicSignature = string;
 
-    return out.join(";");
-}
+const atomicCache = new Map<AtomicSignature, string[]>();
 
-function registerKeyframes(
-    name: string,
-    frames: Record<string, any>,
-): string {
-    const hash = hashString(name + JSON.stringify(frames));
-    const unique = `${name}-${hash}`;
+function getAtomicClasses(
+    selector: string,
+    decl: string,
+): string[] {
+    const key = `${selector}|${decl}`;
 
-    const cached = keyframeCache.get(unique);
+    const cached = atomicCache.get(key);
     if (cached) return cached;
 
+    const classes: string[] = [];
     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}}`);
-    }
+    for (let layer = 0; layer < PRECEDENCE_LAYERS; layer++) {
+        const className = makeClassName(layer);
+        classes.push(className);
+
+        const css =
+            selector === "&"
+                ? `.${className}{${decl}}`
+                : selector.replace(/&/g, `.${className}`) + `{${decl}}`;
 
-    const ruleText = `@keyframes ${unique}{${steps.join("")}}`;
-    sheet.insertRule(ruleText, sheet.cssRules.length);
-    keyframeCache.set(unique, unique);
+        sheet.insertRule(css, sheet.cssRules.length);
+    }
 
-    return unique;
+    atomicCache.set(key, classes);
+    return classes;
 }
 
-function buildRules(
-    className: string,
-    rule: Record<string, any>,
-    keyframes: Map<string, string>,
-): string[] {
-    const rules: string[] = [];
-    const baseDecls: string[] = [];
+type AtomicEntry = {
+    classes: string[];
+    prop: string;
+};
+
+function buildAtomicEntries(rule: StyleRule): AtomicEntry[] {
+    const entries: AtomicEntry[] = [];
 
     for (const key in rule) {
-        if (!Object.prototype.hasOwnProperty.call(rule, key)) continue;
         const val = rule[key];
+        if (val == null) continue;
 
-        if (key.startsWith("@keyframes")) {
-            continue;
-        }
-
-        if (!val) continue;
+        if (key.startsWith(":") && typeof val === "object") {
+            for (const prop in val) {
+                const v = val[prop];
+                if (v == null || typeof v === "object") continue;
 
-        if (key[0] === ":" && typeof val === "object") {
-            const decls = stringifyDecls(val ?? {}, keyframes);
-            if (decls) {
-                rules.push(`.${className}${key}{${decls}}`);
+                const decl = `${camelToKebab(prop)}:${resolveValue(v)}`;
+                const classes = getAtomicClasses(`&${key}`, decl);
+                entries.push({ classes, prop });
             }
             continue;
         }
 
-        if (key.startsWith("@media") && typeof val === "object") {
-            const decls = stringifyDecls(val ?? {}, keyframes);
-            if (decls) {
-                rules.push(`${key}{.${className}{${decls}}}`);
-            }
-            continue;
+        if (typeof val !== "object") {
+            const decl = `${camelToKebab(key)}:${resolveValue(val)}`;
+            const classes = getAtomicClasses("&", decl);
+            entries.push({ classes, prop: key });
         }
+    }
 
-        if (key.includes("&") && typeof val === "object") {
-            const selector = key.replace(/&/g, `.${className}`);
-            const decls = stringifyDecls(val ?? {}, keyframes);
-            if (decls) {
-                rules.push(`${selector}{${decls}}`);
-            }
-            continue;
-        }
+    return entries;
+}
 
-        if (!key.startsWith("@") && typeof val !== "object") {
-            const raw = typeof val === "function" ? val() : val;
-            baseDecls.push(`${camelToKebab(key)}:${raw}`);
-        }
-    }
+export function mergeClasses(
+    ...inputs: (string | undefined | null | false)[]
+): string {
+    const perLayer: string[][] = [];
 
-    if (baseDecls.length > 0) {
-        rules.push(`.${className}{${baseDecls.join(";")}}`);
+    for (let i = 0; i < PRECEDENCE_LAYERS; i++) {
+        perLayer[i] = [];
     }
 
-    return rules;
+    inputs.forEach((input, index) => {
+        if (typeof input !== "string") return;
+
+        const layer = Math.min(index, PRECEDENCE_LAYERS - 1);
+
+        const bucket = perLayer[layer];
+        if (!bucket) return;
+
+        const parts = input.trim().split(/\s+/);
+        for (const cls of parts) {
+            if (cls) bucket.push(cls);
+        }
+    });
+
+    return perLayer.flat().join(" ");
 }
 
 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 unique = registerKeyframes(name, frames);
-            keyframesMap.set(name, unique);
-        }
+        const result = {} as ClassNames<T>;
 
         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}`;
-
-            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);
-            }
+            const rule = (styles[slot] ?? {}) as StyleRule;
+            const entries = buildAtomicEntries(rule);
 
-            (classNames as any)[slot] = className;
+            const classes = entries.map(e => e.classes[0]).join(" ");
+            (result as any)[slot] = classes;
         }
 
-        return classNames;
+        return result;
     };
 }
 
-export const mergeClasses = (
-    ...classes: (string | undefined | null | false)[]
-) => classes.filter(Boolean).join(" ");
-
 export function mergeStyleSets<T extends StylesMap>(
     ...sets: (Partial<T> | undefined)[]
 ): ClassNames<T> {
@@ -245,13 +162,12 @@ 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] = {
+                ...(merged[key] as StyleRule),
+                ...(set[key] as StyleRule),
+            };
         }
     }
 
     return makeStyles(merged as T)();
-}
+}