zyzz 0.0.19 → 0.0.21

package/src/web/internal/ClassName.ts

@@ -17,22 +17,19 @@ export function create(options: create.Options): string {
       ? body.slice(prefix.length, -1)
       : ''
   const simple = /^[a-zA-Z0-9-]{1,24}$/.test(literal)
-  const label =
+  const namespace = options.namespace ? `${options.namespace}-` : ''
+  if (options.context !== undefined)
+    return `z-${namespace}${options.context}-${encode(property)}${options.slot === undefined ? '' : `-${options.slot}`}`
+
+  const value = simple ? literal : `[${literal || body}]`
+  const readable =
     options.property === 'display' && displays.has(literal)
       ? literal
-      : `${property.startsWith('--') ? encode(property).replaceAll('-', '_2d_') : property}${simple ? `-${literal}` : ''}`
-
-  const suffix = (() => {
-    if (options.context !== undefined)
-      return `-${hash(options.stable || simple ? options.context : JSON.stringify([options.context, options.body]))}${options.slot === undefined ? '' : `-${options.slot}`}`
-    if (!simple) return `-${hash(options.body)}`
-    return ''
-  })()
-
-  if (options.stable) return `z-${encode(property)}${suffix}`
-
-  // Custom properties and vendor spellings can contain identifier punctuation.
-  return `z-${condition ? `${condition[1]}-` : ''}${encode(label)}${suffix}`
+      : property.startsWith('--')
+        ? `[${property}:${literal || body}]`
+        : `${property}-${value}`
+  // DOM class tokens cannot contain whitespace; preserve its spelling reversibly.
+  return `z-${namespace}${condition ? `${condition[1]}-` : ''}${readable.replace(/[\s_"'<>]/gu, (character) => `_${character.codePointAt(0)!.toString(16)}_`)}`
 }
 
 /** Atomic naming inputs; context retains declaration ordering and module ownership. */
@@ -43,12 +40,12 @@ export declare namespace create {
     readonly body: string
     /** Identity required when the declaration cannot share a global rule. */
     readonly context?: string | undefined
+    /** Optional consumer-owned configuration namespace. */
+    readonly namespace?: string | undefined
     /** Authoring property spelling. */
     readonly property: string
     /** Ordered declaration slot inside a contextual style. */
     readonly slot?: number | undefined
-    /** Keep names independent of values for CSS-only development updates. */
-    readonly stable?: boolean | undefined
   }
 }
 
@@ -87,26 +84,24 @@ function encode(value: string): string {
   )
 }
 
-// Six CSS identifier characters retain 36 bits from two deterministic streams.
-function hash(value: string): string {
-  let first = 2166136261
-  let second = 5381
-
-  for (let index = 0; index < value.length; index++) {
-    const code = value.charCodeAt(index)
-    first = Math.imul(first ^ code, 16777619)
-    second = Math.imul(second, 33) ^ code
-  }
+/** Escapes a generated class token for use as a CSS selector. */
+export function selector(value: string): string {
+  return value.replace(
+    /[^a-zA-Z0-9_-]/gu,
+    (character) => `\\${character.codePointAt(0)!.toString(16)} `,
+  )
+}
 
-  const alphabet =
-    '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ_-'
-  let bits = (first >>> 0) * 16 + (second >>> 28)
-  let result = ''
+/** Carries exact emitted rule bodies for graph-wide collision checks. */
+export const rules = Symbol('zyzz.css.rules')
 
-  for (let index = 0; index < 6; index++) {
-    result = alphabet[bits % 64]! + result
-    bits = Math.floor(bits / 64)
-  }
+/** Carries authored names between source extraction and CSS emission. */
+export const labels = Symbol('zyzz.css.labels')
 
-  return result
-}
+/** Authored names retained on extracted style data. */
+export type Labels = Readonly<
+  Record<
+    string,
+    { readonly name: string; readonly namespace?: string | undefined }
+  >
+>

package/src/web/internal/Themes.ts

@@ -10,8 +10,6 @@ import type * as Theme from '../../internal/Theme.js'
 
 /** Collects live token references within one in-memory compilation graph. */
 export function create() {
-  let nextScope = 0
-  let nextVariable = 0
   const contracts = new Map<
     Token.Contract,
     { identity: string | undefined; paths: Map<string, string> }
@@ -35,14 +33,15 @@ export function create() {
     let name = contract.paths.get(token.path)
 
     if (!name) {
-      name =
-        contract.identity === undefined
-          ? `--z${nextVariable++}`
-          : variable(contract.identity, token.path)
+      name = variable(
+        contract.identity,
+        token.path,
+        token.contract.variableNaming,
+      )
       contract.paths.set(token.path, name)
     }
 
-    const label = contract.identity?.startsWith('src-') ? token.path : undefined
+    const label = token.path
     return `var(${name},${literal(value, label, token.contract)})`
   }
 
@@ -52,6 +51,7 @@ export function create() {
     separate?: 'all' | 'defaults',
   ) {
     const classes: Record<string, string> = Object.create(null)
+    const scopeBodies = new Map<string, string>()
     const completeDefaults = new Set<Token.Contract>()
     const empty: string[] = []
     const rules: Rule[] = []
@@ -68,10 +68,14 @@ export function create() {
 
       // Anonymous contracts are graph-local. Source-owned contracts retain stable
       // identities across separately compiled components and theme scopes.
-      const className =
-        data.contract[Token.identity] === undefined
-          ? `t_${nextScope++}`
-          : `z_theme-${encode(name)}`
+      const className = scope(
+        data.cssName ??
+          (data.contract[Token.identity] &&
+          name.startsWith(`${data.contract[Token.identity]}-`)
+            ? name.slice(data.contract[Token.identity]!.length + 1)
+            : name),
+        data.contract[Token.identity],
+      )
 
       classes[name] = className
 
@@ -89,9 +93,7 @@ export function create() {
 
           contract.paths.set(
             path,
-            contract.identity === undefined
-              ? `--z${nextVariable++}`
-              : variable(contract.identity, path),
+            variable(contract.identity, path, data.contract.variableNaming),
           )
         }
 
@@ -99,15 +101,12 @@ export function create() {
       }
 
       if (!contract) continue
+
       // Independently compiled consumers must import identical fallback contents.
       if (separate === 'all' && contract.identity) {
         completeDefaults.add(data.contract)
         for (const [path, value] of Object.entries(data.values))
-          literal(
-            value,
-            contract.identity.startsWith('src-') ? path : undefined,
-            data.contract,
-          )
+          literal(value, path, data.contract)
       }
       if (!contract.paths.size) empty.push(`.${className}{}`)
 
@@ -119,13 +118,35 @@ export function create() {
         if (value === undefined)
           throw new Error('Theme scope is missing a live token.')
 
-        const label = contract.identity?.startsWith('src-') ? path : undefined
+        const label = path
         declarations.push({
           conditions: [],
           property: name,
           selector: `.${className}`,
           value: literal(value, label, data.contract),
         })
+        // Standalone styles have no contract metadata to select their original spelling.
+        if (
+          contract.identity?.startsWith('id-') &&
+          data.contract.variableNaming === undefined
+        )
+          declarations.push({
+            conditions: [],
+            property: variable(
+              `id-${Array.from(
+                contract.identity
+                  .slice(3)
+                  .replace(/_([0-9a-f]+)_/g, (_, code: string) =>
+                    String.fromCodePoint(Number.parseInt(code, 16)),
+                  ),
+                (character) => character.codePointAt(0)!.toString(16),
+              ).join('-')}`,
+              path,
+              'legacy',
+            ),
+            selector: `.${className}`,
+            value: `var(${name})`,
+          })
       }
 
       rules.push(...declarations)
@@ -135,12 +156,26 @@ export function create() {
           name,
           `.${className}`,
           rules,
-          contract.identity?.startsWith('src-') ? path : undefined,
+          path,
           [],
           data.contract,
         )
     }
 
+    for (const rule of rules) {
+      const key = JSON.stringify([
+        rule.selector,
+        rule.conditions,
+        rule.property,
+      ])
+      const previous = scopeBodies.get(key)
+      if (previous !== undefined && previous !== rule.value)
+        throw new Error(
+          `Generated scope ${rule.selector.slice(1)} conflicts. Supply distinct config ids.`,
+        )
+      scopeBodies.set(key, rule.value)
+    }
+
     const scopes = new Map<string, Rule[]>()
     for (const rule of rules) {
       const entries = scopes.get(rule.property) ?? []
@@ -188,6 +223,7 @@ export function create() {
             ]
               .filter(Boolean)
               .join('\n'),
+      rules,
       resources: separate
         ? [
             ...resources,
@@ -220,15 +256,17 @@ export function create() {
     owner?: Token.Contract,
   ): string {
     if (Token.is(value)) return serialize(value)
+    if (Token.isExpression(value))
+      return value.parts
+        .map((part) => (typeof part === 'string' ? part : serialize(part)))
+        .join('')
     if (typeof value !== 'object') return String(value)
     if ('default' in value) {
       // Separate fallback properties preserve extensions and resolve references within each scope.
       const base = literal(value.default, label, owner)
       // Rule consolidation must not change existing variable identities.
       const css = `:where(*){--fallback:${base};}${conditionalCss(value, '--fallback', ':where(*)', label, owner)}`
-      const name = label
-        ? `--z-${Identity.label(label)}-fallback-${Identity.compact(css)}`
-        : `--z-f${Identity.hash(css)}`
+      const name = `${variable(owner?.[Token.identity], label ?? 'value')}-fallback-${Identity.name(css)}`
       const emitted: Rule[] = [
         { conditions: [], property: name, selector: ':where(*)', value: base },
       ]
@@ -380,9 +418,21 @@ export type Rule = {
 /** Selects independently shareable defaults or all token rules. */
 export const shared = Symbol('shared token rules')
 
-function variable(index: number | string, path: string): string {
-  // Packed declarations retain the spelling assigned by their compiler.
-  if (typeof index === 'string' && index.startsWith('src-'))
-    return `--z-${Identity.label(path)}-${Identity.compact(JSON.stringify([index, path]))}`
-  return `--z-t${encode(String(index))}-${encode(path)}`
+/** Names an authored scope without its private source identity. */
+export function scope(value: string, identity?: string): string {
+  const namespace = identity?.startsWith('id-') ? `${identity.slice(3)}-` : ''
+  return `z-theme-${namespace}${Identity.name(value)}`
+}
+
+function variable(
+  identity: string | undefined,
+  path: string,
+  naming?: 'legacy' | 'hashed',
+): string {
+  if (naming === 'legacy' && identity)
+    return `--z-t${encode(identity)}-${encode(path)}`
+  if (naming === 'hashed')
+    return `--z-${Identity.label(path)}-${Identity.compact(JSON.stringify([identity, path]))}`
+  const namespace = identity?.startsWith('id-') ? `${identity.slice(3)}-` : ''
+  return `--z-${namespace}${path.split('.').map(Identity.name).join('-')}`
 }