zyzz 0.0.20 → 0.0.22

package/src/vite/index.ts

@@ -20,6 +20,7 @@ import * as Scope from '../compiler/internal/Scope.js'
 import type { Environment, Plugin, Rollup, ViteDevServer } from 'vite'
 import * as Graph from '../compiler/Graph.js'
 import * as Source from '../compiler/Source.js'
+import * as ThemeRules from '../web/internal/Themes.js'
 
 /**
  * Compiles physical project source without executing authoring code.
@@ -749,6 +750,7 @@ export function zyzz(options: zyzz.Options = {}): Plugin {
       )
 
     const result = entry.compiler.compile({
+      [ThemeRules.shared]: native ? undefined : 'all',
       [Syntax.cache]: snapshot(entry.environment).programs(modules),
       compiler: options.compiler,
       reset: options.reset ? Reset.read() : undefined,
@@ -812,46 +814,6 @@ export function zyzz(options: zyzz.Options = {}): Plugin {
         configurations.set(key, configuration)
       }
 
-    const map = new Mapping.GenMapping()
-    const styles: string[] = []
-    let line = 0
-
-    for (const [id, output] of Object.entries(result.modules)) {
-      if (!connected.has(sourceFile(id)!)) continue
-      if (!output.css) continue
-
-      for (const mapping of Mapping.allMappings(
-        Mapping.fromMap(JSON.stringify(output.cssMap)),
-      )) {
-        const generated = {
-          column: mapping.generated.column,
-          line: mapping.generated.line + line,
-        }
-
-        if (mapping.source !== undefined && mapping.original !== undefined) {
-          const location = {
-            generated,
-            original: mapping.original,
-            source: sourceFile(mapping.source) ?? mapping.source,
-          }
-
-          if (mapping.name === undefined) Mapping.addMapping(map, location)
-          else Mapping.addMapping(map, { ...location, name: mapping.name })
-        } else Mapping.addMapping(map, { generated })
-      }
-
-      for (const [index, source] of output.cssMap.sources.entries())
-        if (source !== null)
-          Mapping.setSourceContent(
-            map,
-            sourceFile(source) ?? source,
-            output.cssMap.sourcesContent?.[index] ?? null,
-          )
-
-      styles.push(output.css)
-      line += output.css.split('\n').length
-    }
-
     const owners = new Map<string, string>()
 
     for (const id of new Set(Object.values(result.sharedAssetOwners ?? {}))) {
@@ -1018,10 +980,15 @@ export function zyzz(options: zyzz.Options = {}): Plugin {
       contractIds: Object.keys(compiled),
       configurations,
       connections: staged,
-      css: styles.join('\n'),
+      css: output.css,
       sharedCss: new TextDecoder().decode(shared.code),
       sharedCssMap: sharedMap,
-      cssMap: Mapping.toEncodedMap(map),
+      cssMap: {
+        ...output.cssMap,
+        sources: output.cssMap.sources.map((source) =>
+          source === null ? null : (sourceFile(source) ?? source),
+        ),
+      },
       map: {
         ...output.map,
         sources: output.map.sources.map((source) =>
@@ -1391,9 +1358,14 @@ export function zyzz(options: zyzz.Options = {}): Plugin {
       await updateDiscovery(this.environment, file, change.event)
     },
     async hotUpdate({ file, modules, timestamp, type, server }) {
-      await updateDiscovery(this.environment, file, type)
-
       const state = entries(this.environment)
+      const previous = [...state.values()].map((entry) => ({
+        code: entry.code,
+        file: entry.file,
+        imports: entry.imports,
+      }))
+
+      await updateDiscovery(this.environment, file, type)
       const first = [...state.values()].find(
         (entry) => entry.files.has(file) || eager(file, this.environment),
       )
@@ -1417,17 +1389,41 @@ export function zyzz(options: zyzz.Options = {}): Plugin {
               true,
             ).catch(() => undefined)
           : undefined
-      const affected = new Set(
-        modules.filter((module) => {
-          const entry = module.id && state.get(module.id)
-          return (
-            !output ||
-            !entry ||
-            entry.code !== output.modules[sourceId(entry.file)]?.code ||
-            entry.imports !==
+      const javascriptChanged = await (async () => {
+        if (!output) return true
+
+        // Portable build adapters share this module and do not require Vite.
+        const { transformWithOxc } = await import('vite')
+        const changed = await Promise.all(
+          previous.map(async (entry) => {
+            const code = output.modules[sourceId(entry.file)]?.code
+            if (
+              entry.imports !==
               JSON.stringify(output.imports[sourceId(entry.file)])
-          )
-        }),
+            )
+              return true
+            if (entry.code === code) return false
+            if (entry.code === undefined || code === undefined) return true
+
+            // Generated type assertions can change without changing runtime bindings.
+            const [before, after] = await Promise.all([
+              transformWithOxc(entry.code, entry.file, { sourcemap: false }),
+              transformWithOxc(code, entry.file, { sourcemap: false }),
+            ])
+            return before.code !== after.code
+          }),
+        )
+        return changed.some(Boolean)
+      })()
+      // Compiler-only inputs have watch edges, but their stylesheets update separately.
+      const affected = new Set(
+        modules.filter(
+          (module) =>
+            javascriptChanged ||
+            (module.id
+              ? !output?.modules[sourceId(module.id)]
+              : module.type !== 'asset'),
+        ),
       )
       const ids = new Set<string>()
       if (type === 'delete') ids.add(cssId(file))
@@ -1436,12 +1432,8 @@ export function zyzz(options: zyzz.Options = {}): Plugin {
         if (!entry.files.has(file) && !eager(file, this.environment)) continue
 
         // Theme scopes affect CSS even when Vite's JavaScript import was erased.
-        if (
-          !output ||
-          entry.code !== output.modules[sourceId(entry.file)]?.code ||
-          entry.imports !== JSON.stringify(output.imports[sourceId(entry.file)])
-        )
-          ids.add(entry.file)
+        // Rewritten importers can lose a source edge, so changed bindings must update together.
+        if (javascriptChanged) ids.add(entry.file)
         ids.add(cssId(entry.file))
         ids.add(sharedId)
       }

package/src/web/Css.ts

@@ -4,6 +4,7 @@
  */
 import * as Targets from '../internal/Targets.js'
 import * as ClassName from './internal/ClassName.js'
+import * as Identity from '../internal/Identity.js'
 import * as Contributions from './internal/Contributions.js'
 import * as Binding from '../internal/Binding.js'
 import * as Cascade from '../internal/Cascade.js'
@@ -33,6 +34,7 @@ export function compile<
 >(
   options: compile.Options<name, themeName>,
 ): compile.ReturnType<name, themeName> {
+  const labels = options[ClassName.labels] ?? options.styles[ClassName.labels]
   options = {
     ...options,
     styles: { styles: options.styles.styles.map(Targets.web) },
@@ -54,7 +56,18 @@ export function compile<
     return result
   }
 
+  const bodies = new Map<Style.NamedStyle, string>()
+  const declarations = new Map<Style.Declaration, string>()
+  type Property = {
+    readonly important: Map<Style.Declaration['value'], string>
+    readonly name: string
+    readonly normal: Map<Style.Declaration['value'], string>
+  }
+  const declarationProperties = new Map<string, Property>()
+  const serialized = new Map<object, string>()
+
   // Only primitive declaration lists can be interned without erasing token identity.
+  // Reuse their emitted bodies throughout analysis and output.
   const repeated = new Map<string, Style.NamedStyle>()
 
   const canonicalStyles = options.styles.styles.map((style) => {
@@ -66,13 +79,7 @@ export function compile<
     )
       return style
 
-    const key = JSON.stringify(
-      style.declarations.map(({ important, property, value }) => [
-        property,
-        value,
-        important,
-      ]),
-    )
+    const key = nested(style)
     const previous = repeated.get(key)
     if (previous) return previous
 
@@ -267,8 +274,6 @@ export function compile<
     if (Object.hasOwn(Cascade.shorthands, property))
       join(property, domain(property))
 
-  const serialized = new Map<object, string>()
-
   function serialize(input: Style.Declaration['value']): number | string {
     if (typeof input !== 'object' || input === null) return input
 
@@ -296,22 +301,32 @@ export function compile<
     return input as number | string
   }
 
-  const declarations = new Map<Style.Declaration, string>()
-  const propertyNames = new Map<string, string>()
-
   function declarationBody(declaration: Style.Declaration): string {
     const previous = declarations.get(declaration)
     if (previous !== undefined) return previous
+
     const { important, property, value } = declaration
-    const name = propertyNames.get(property) ?? Literal.name(property)
-    propertyNames.set(property, name)
-    const body = `${name}:${serialize(value)}${important ? '!important' : ''};`
+    let entry = declarationProperties.get(property)
+    if (!entry) {
+      entry = {
+        important: new Map(),
+        name: Literal.name(property),
+        normal: new Map(),
+      }
+      declarationProperties.set(property, entry)
+    }
+
+    const values = important ? entry.important : entry.normal
+    let body = values.get(value)
+    if (body === undefined) {
+      body = `${entry.name}:${serialize(value)}${important ? '!important' : ''};`
+      values.set(value, body)
+    }
+
     declarations.set(declaration, body)
     return body
   }
 
-  const bodies = new Map<Style.NamedStyle, string>()
-
   function nested(style: Style.NamedStyle): string {
     const previous = bodies.get(style)
     if (previous !== undefined) return previous
@@ -399,11 +414,8 @@ export function compile<
   }
 
   function validate(style: Style.NamedStyle) {
-    if (
-      outputMode(style) !== undefined &&
-      outputMode(style) !== 'atomic' &&
-      outputMode(style) !== 'grouped'
-    )
+    const mode = outputMode(style)
+    if (mode !== undefined && mode !== 'atomic' && mode !== 'grouped')
       throw new CompileError([
         {
           code: 'invalid_output',
@@ -417,7 +429,10 @@ export function compile<
 
   const identities = new Map<string, string>()
   const rules = new Map<string, string>()
-  const identical = new Map<string, string>()
+  type ConditionalRule = { conditions: readonly string[]; value: string }
+  const conditionalRules = new Map<string, ConditionalRule>()
+  type SharedRules = Record<'atomic' | 'grouped', Map<string, string>>
+  const identical = new Map<string | undefined, SharedRules>()
   const explicitBodies = new Map<string, string>()
   const selectors = new Map<string, string>()
   const explicitModes = new Set<string>()
@@ -461,7 +476,7 @@ export function compile<
       explicit === undefined &&
       options.composition === 'independent' &&
       !options.development
-        ? `${mode}:${JSON.stringify(representation(style))}:${nested(canonicalStyles[styleIndex]!)}`
+        ? `${mode}:${style.rules ? JSON.stringify(representation(style)) : ''}:${nested(canonicalStyles[styleIndex]!)}`
         : undefined
     if (application !== undefined && applications.has(application)) {
       classes[style.name] = applications.get(application)!
@@ -470,12 +485,23 @@ export function compile<
 
     const names: string[] = explicit === undefined ? [] : [explicit]
     let ordinal = 0
-    const slots = new Map<string, number>()
-    const developmentName = options.scope
-      ? `definition-${styleIndex}`
-      : style.name
+    const cssName = labels?.[style.name]?.name ?? encode(style.name)
+    const cssNamespace =
+      labels?.[style.name]?.namespace ??
+      (options.scope ? Identity.name(options.scope) : undefined)
+    let sharedRules = identical.get(cssNamespace)
+    if (!sharedRules) {
+      sharedRules = { atomic: new Map(), grouped: new Map() }
+      identical.set(cssNamespace, sharedRules)
+    }
 
-    function emit(body: string, label: string, shared: boolean, output = mode) {
+    function emit(
+      body: string,
+      label: string,
+      shared: boolean,
+      output = mode,
+      conditional?: ConditionalRule,
+    ) {
       if (!body) return
 
       const independent =
@@ -483,13 +509,8 @@ export function compile<
         !options.development &&
         output === mode &&
         options.composition === 'independent'
-      const key = `${output}:${body}`
-      // Development slots belong to each style even when their initial values match.
-      const reusable =
-        explicit === undefined &&
-        !options.development &&
-        (shared || independent)
-      const previous = reusable ? identical.get(key) : undefined
+      const reusable = explicit === undefined && (shared || independent)
+      const previous = reusable ? sharedRules![output].get(body) : undefined
       if (previous && !names.includes(previous)) {
         names.push(previous)
         return
@@ -498,43 +519,23 @@ export function compile<
       if (previous) shared = false
 
       // Contextual slots preserve authored ordering; development names survive value edits.
-      const ordinalSlot = ordinal++
-      const slot = options.development ? (slots.get(label) ?? 0) : ordinalSlot
-      slots.set(label, slot + 1)
+      const slot = ordinal++
       const identity = (() => {
         if (explicit !== undefined)
           return `${explicit}-${mode}-${encode(label)}-${slot}`
-        if (
-          output === 'grouped' &&
-          mode === 'grouped' &&
-          !options.development &&
-          options.composition === 'independent'
-        )
-          return `g_${rules.size.toString(36)}`
         if (output === 'grouped' && mode === 'grouped') {
-          const name = options.development ? developmentName : style.name
-          const scope =
-            options.development && options.scope
-              ? `_m${encode(options.scope)}`
-              : ''
-          return `g-${encode(name)}${scope}${slot ? `_s${slot}` : ''}`
+          return `z-${cssNamespace ? `${cssNamespace}-` : ''}${cssName}${slot ? `__${slot}` : ''}`
         }
         return ClassName.create({
           body,
-          context:
-            !shared || options.development
-              ? JSON.stringify([
-                  options.scope,
-                  mode,
-                  options.development ? developmentName : style.name,
-                ])
-              : options.scope,
+          context: !shared ? cssName : undefined,
+          namespace: cssNamespace,
           property: label,
-          slot: !shared || options.development ? slot : undefined,
-          stable: options.development,
+          slot: !shared ? slot : undefined,
         })
       })()
-      const owner = mode === 'atomic' ? `${style.name}:${slot}` : undefined
+      const owner =
+        mode === 'atomic' && !shared ? `${style.name}:${slot}` : undefined
       if (
         (rules.has(identity) && rules.get(identity) !== body) ||
         (owner !== undefined &&
@@ -543,15 +544,22 @@ export function compile<
       )
         diagnostics.push({
           code: 'identity_collision',
-          message: 'Distinct rules produced the same class identifier.',
+          message:
+            'Generated class names conflict. Supply distinct config or style ids.',
           path: [style.name],
         })
 
       if (owner !== undefined) identities.set(identity, owner)
       rules.set(identity, body)
+      if (
+        conditional?.conditions.some((condition) =>
+          /^@(media|supports)\b/.test(condition),
+        )
+      )
+        conditionalRules.set(identity, conditional)
       if (explicit !== undefined) selectors.set(identity, explicit)
       else {
-        if (reusable) identical.set(key, identity)
+        if (reusable) sharedRules![output].set(body, identity)
         names.push(identity)
       }
     }
@@ -611,7 +619,7 @@ export function compile<
           !nestedComposition &&
           !conditions.length &&
           groups.get(conflict(property)) !== false
-        emit(body, property, shared)
+        emit(body, property, shared, mode, { conditions, value })
       }
     }
 
@@ -673,7 +681,7 @@ export function compile<
             options.schemes ?? false,
             options[Themes.shared],
           )
-        : { classes: Object.freeze({}), css: '', resources: [] }
+        : { classes: Object.freeze({}), css: '', resources: [], rules: [] }
   } catch (error) {
     throw new CompileError([
       {
@@ -686,20 +694,57 @@ export function compile<
 
   const scopedCss = [
     scopes.css,
-    ...[...rules].map(
-      ([name, body]) => `.${selectors.get(name) ?? name}{${body}}`,
-    ),
+    ...[...rules].map((entry) => {
+      const [name, body] = entry
+      const selector = `.${ClassName.selector(selectors.get(name) ?? name)}`
+      const conditional = conditionalRules.get(name)
+      if (
+        !conditional ||
+        conditional.conditions.some(
+          (condition) =>
+            condition.startsWith('@') &&
+            !/^@(media|supports)\b/.test(condition),
+        )
+      )
+        return `${selector}{${body}}`
+
+      // Inactive conditions must surround the class rather than leave a matched empty wrapper.
+      const conditions = conditional.conditions.filter((condition) =>
+        condition.startsWith('@'),
+      )
+      const nested = conditional.conditions
+        .filter((condition) => !condition.startsWith('@'))
+        .reduceRight(
+          (body, condition) => `${condition}{${body}}`,
+          conditional.value,
+        )
+      return conditions.reduceRight(
+        (body, condition) => `${condition}{${body}}`,
+        `${selector}{${nested}}`,
+      )
+    }),
   ]
     .filter(Boolean)
     .join('\n')
 
-  return Object.freeze({
+  const result = {
     ...(scopes.resources.length ? { [Themes.shared]: scopes.resources } : {}),
     ...(contributionCss ? { contributionCss, scopedCss } : {}),
+    [ClassName.rules]: Object.freeze({
+      ...Object.fromEntries(rules),
+      ...Object.fromEntries(
+        scopes.rules.map((rule) => [
+          `@scope:${rule.selector.slice(1)}:${Identity.name(rule.property)}:${Identity.name(JSON.stringify(rule.conditions))}`,
+          rule.value,
+        ]),
+      ),
+    }),
     classes: Object.freeze(classes),
     css: [contributionCss, scopedCss].filter(Boolean).join('\n'),
     vars: scopes.classes as Readonly<Record<themeName, string>>,
-  })
+  }
+  Object.defineProperty(result, ClassName.rules, { enumerable: false })
+  return Object.freeze(result)
 }
 
 /** Input and output contracts for literal compilation. */
@@ -714,6 +759,8 @@ export declare namespace compile {
   > = {
     /** Separates generated token rules for hosts with independent CSS resources. */
     readonly [Themes.shared]?: 'all' | 'defaults' | undefined
+    /** Readable source bindings and consumer-owned configuration namespaces. */
+    readonly [ClassName.labels]?: ClassName.Labels | undefined
     /** Fixed class identities used by CSS-only consumers. */
     readonly names?: Readonly<Record<string, string>> | undefined
     /**
@@ -726,14 +773,14 @@ export declare namespace compile {
     /** CSS representation; atomic declarations are the default. */
     readonly cssOutput?: 'atomic' | 'grouped' | undefined
     readonly composition?: 'independent' | 'ordered' | undefined
-    /** Stable declaration names for CSS-only development updates. */
+    /** Retains live definitions for development updates. */
     readonly development?: boolean | undefined
     /**
      * Emit the `color-scheme` selection classes. Set by modules whose runtime
      * helpers can apply a scheme, so lowered `light-dark()` resolves there.
      */
     readonly schemes?: boolean | undefined
-    /** Optional module scope for independently delivered stylesheets. */
+    /** Explicit consumer-owned namespace for independently delivered stylesheets. */
     readonly scope?: string | undefined
     /** Ordered definitions; no themes or source adapter is required. */
     readonly styles: Style.Definition<name>
@@ -748,6 +795,8 @@ export declare namespace compile {
     name extends string = string,
     themeName extends string = string,
   > = {
+    /** Exact emitted rule bodies retained for graph-wide collision diagnostics. */
+    readonly [ClassName.rules]: Readonly<Record<string, string>>
     /** Shared token resources omitted from this module's stylesheet. */
     readonly [Themes.shared]?: readonly Themes.Resource[] | undefined
     /** Contribution text separated for graph-wide hoisting. */

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 }
+  >
+>