zyzz 0.0.13 → 0.0.15

package/src/compiler/Graph.ts

@@ -17,6 +17,7 @@ import type * as Theme from '../internal/Theme.js'
 import * as Token from '../internal/Token.js'
 import * as Contract from './internal/Contract.js'
 import * as Relative from './internal/Relative.js'
+import * as ThemeRules from '../web/internal/Themes.js'
 import * as Themes from './internal/Themes.js'
 import * as Source from './Source.js'
 import * as Scope from './internal/Scope.js'
@@ -75,11 +76,13 @@ export declare namespace compile {
   type ReturnType = {
     /** Packed resources deduplicated by the host across scoped source outputs. */
     readonly [Stylesheets.packed]?: readonly Stylesheets.Resource[]
+    /** Independently loaded reset for module-based hosts. */
+    readonly [Stylesheets.reset]?: Stylesheets.Resource | undefined
     /** Versioned compiler-only JSON per module; publish beside the compiled entrypoint as <entry>.zyzz.json. */
     readonly contracts: Readonly<Record<string, string>>
     /** Direct static runtime source and library-contract dependencies, keyed by module identity. */
     readonly dependencies: Readonly<Record<string, readonly string[]>>
-    /** One eager stylesheet for all supplied modules. Load before module CSS. */
+    /** Shared contributions and responsive token defaults. Load before module CSS. */
     readonly sharedCss?: string | undefined
     /** Source map for source-owned and packed global contributions. */
     readonly sharedCssMap?: Mapping.EncodedSourceMap | undefined
@@ -190,6 +193,11 @@ function build(options: compile.Options, cache?: Cache): Cache {
   if (cache?.reset !== options.reset) cache = undefined
   if (cache?.cssOutput !== options.cssOutput) cache = undefined
   if (cache?.composition !== options.composition) cache = undefined
+  if (
+    (cache?.entry === undefined) !==
+    (options[Stylesheets.entry] === undefined)
+  )
+    cache = undefined
   const ids = Object.keys(options.modules).sort()
   const programs = new Map<string, ReturnType<typeof Syntax.parse>>()
   function parse(input: Syntax.parse.Options) {
@@ -1329,7 +1337,7 @@ function build(options: compile.Options, cache?: Cache): Cache {
   const sharedVisited = new Set<string>()
   const packed: Stylesheets.Resource[] = []
 
-  const shared = (() => {
+  const sharedSections = (() => {
     try {
       const entry = options[Stylesheets.entry]
       const packedSections =
@@ -1379,7 +1387,7 @@ function build(options: compile.Options, cache?: Cache): Cache {
         if (order.css) packed.unshift({ ...order, id: order.css })
       }
 
-      return Stylesheets.render([
+      return [
         ...(resetSource === undefined
           ? []
           : [
@@ -1393,7 +1401,7 @@ function build(options: compile.Options, cache?: Cache): Cache {
               },
             ]),
         ...sharedSections,
-        ...(options.reset === undefined
+        ...(options.reset === undefined || entry !== undefined
           ? []
           : [
               {
@@ -1404,7 +1412,7 @@ function build(options: compile.Options, cache?: Cache): Cache {
                 layers: [['reset']],
               },
             ]),
-      ])
+      ] satisfies Stylesheets.Section[]
     } catch (error) {
       return fail(
         error instanceof Stylesheets.ConflictError ? error.source : ids[0]!,
@@ -1413,7 +1421,19 @@ function build(options: compile.Options, cache?: Cache): Cache {
     }
   })()
 
-  const sharedCss = shared.css
+  function renderShared(sections: readonly Stylesheets.Section[]) {
+    try {
+      return Stylesheets.render(sections)
+    } catch (error) {
+      return fail(
+        error instanceof Stylesheets.ConflictError ? error.source : ids[0]!,
+        (error as Error).message,
+      )
+    }
+  }
+
+  const contributions = renderShared(sharedSections)
+
   // Every stylesheet includes all graph scopes, including unimported alternatives.
   const names = Object.keys(themes)
   const previousNames = Object.keys(previous?.themes ?? {})
@@ -1549,6 +1569,8 @@ function build(options: compile.Options, cache?: Cache): Cache {
           extracted.get(moduleId) === previous!.extracted.get(moduleId)
         ? previous!.result.modules[moduleId]!
         : Transform.compile({
+            [ThemeRules.shared]:
+              options[Stylesheets.entry] === undefined ? 'defaults' : 'all',
             compiler: options.compiler,
             development: options.development,
             composition: options.composition,
@@ -1627,6 +1649,23 @@ function build(options: compile.Options, cache?: Cache): Cache {
         styleClasses[call.identity] = modules[moduleId]!.classes[call.name]!
   }
 
+  const defaults = new Map<string, Stylesheets.Section>()
+  if (options[Stylesheets.entry] === undefined)
+    for (const [source, output] of Object.entries(modules))
+      for (const resource of output[ThemeRules.shared] ?? [])
+        if (!defaults.has(resource.id))
+          defaults.set(resource.id, {
+            css: resource.css,
+            key: resource.id,
+            layers: [],
+            source,
+          })
+
+  const shared = defaults.size
+    ? renderShared([...sharedSections, ...defaults.values()])
+    : contributions
+  const sharedCss = shared.css
+
   function publishedStyle(link: Themes.Link): Themes.Link {
     return {
       ...link,
@@ -1698,6 +1737,22 @@ function build(options: compile.Options, cache?: Cache): Cache {
     transformed,
     resolutions: Object.freeze(resolutions),
     result: Object.freeze({
+      ...(options[Stylesheets.entry] !== undefined &&
+      options.reset !== undefined
+        ? {
+            [Stylesheets.reset]: {
+              id: 'zyzz/reset.css',
+              ...Stylesheets.render([
+                {
+                  content: options.reset,
+                  css: options.reset,
+                  layers: [['reset']],
+                  source: 'zyzz/reset.css',
+                },
+              ]),
+            },
+          }
+        : {}),
       ...(packed.length ? { [Stylesheets.packed]: packed } : {}),
       ...(sharedCss
         ? {

package/src/compiler/Source.ts

@@ -263,7 +263,12 @@ export function extract(options: extract.Options): extract.ReturnType {
     try {
       return Themes.collect(program, {
         staticBindings: staticData.bindings,
-        namespace,
+        namespace: `src-${Identity.label(
+          options.moduleId
+            .split('/')
+            .at(-1)!
+            .replace(/\.[cm]?[jt]sx?$/, ''),
+        )}-${Identity.compact(options.moduleId)}`,
         contributionCalls: new Set(
           contributions.calls.map((call) => call.start),
         ),

package/src/compiler/Transform.ts

@@ -15,6 +15,7 @@ import * as Scheme from '../internal/Scheme.js'
 import * as Syntax from './internal/Syntax.js'
 import * as Source from './Source.js'
 import type * as Style from '../Style.js'
+import * as ThemeRules from '../web/internal/Themes.js'
 import * as Themes from './internal/Themes.js'
 import * as Walker from 'oxc-walker'
 
@@ -195,6 +196,7 @@ export function compile(options: compile.Options): compile.ReturnType {
     )
 
   const emitted = Css.compile({
+    [ThemeRules.shared]: options[ThemeRules.shared],
     development: options.development,
     scope: options.moduleId,
     composition: options.composition,
@@ -595,7 +597,8 @@ export function compile(options: compile.Options): compile.ReturnType {
           return `{${helpers(JSON.stringify(call.options?.themes ? entries : []), call.options?.themes ? String(fallback) : undefined).replace(/,$/, '')}}`
         usesSelection = true
         const selector = `${selection}.create(${JSON.stringify(entries)},${call.options?.output === 'html'},'set',${JSON.stringify(fallback)})`
-        return `{${helpers(JSON.stringify(call.options?.themes ? entries : []), call.options?.themes ? String(fallback) : undefined)}vars:/*#__PURE__*/${selector}}`
+        // Rollup drops required selectors when a pure call initializes a destructured object property.
+        return `{${helpers(JSON.stringify(call.options?.themes ? entries : []), call.options?.themes ? String(fallback) : undefined)}vars:${selector}}`
       }
 
       if (call.options?.themes) {
@@ -980,7 +983,7 @@ export function compile(options: compile.Options): compile.ReturnType {
 
         if (
           rule.startsWith(':root{') ||
-          rule.startsWith(':where(*){--z-f') ||
+          rule.startsWith(':where(*){--z-') ||
           (rule.startsWith('@media ') &&
             (rule.includes(':root{') ||
               Object.values(emitted.vars).some((name) =>
@@ -1150,6 +1153,9 @@ export function compile(options: compile.Options): compile.ReturnType {
     true,
   )
   return Object.freeze({
+    ...(emitted[ThemeRules.shared]
+      ? { [ThemeRules.shared]: emitted[ThemeRules.shared] }
+      : {}),
     classes,
     code: portable ? options.source : module.toString(),
     css: namespaced.css,
@@ -1172,6 +1178,8 @@ export declare namespace compile {
   type ErrorType = Css.CompileError | Source.ExtractError
   /** Supplied module identity and source; no file loading occurs. */
   type Options = Source.extract.Options & {
+    /** Separates generated token definitions for independently loaded modules. */
+    readonly [ThemeRules.shared]?: 'all' | 'defaults' | undefined
     /** Disable source rewriting while emitting CSS for runtime authoring. Defaults to true. */
     readonly compiler?: boolean | undefined
     /** Whether compiled applications can be combined with one another. */
@@ -1191,6 +1199,8 @@ export declare namespace compile {
   type ReturnType = {
     /** Internal native node replacements, when supplied by the graph adapter. */
     readonly [Edits.key]?: readonly Edits.Edit[] | undefined
+    /** Generated token resources delivered alongside this module's CSS. */
+    readonly [ThemeRules.shared]?: readonly ThemeRules.Resource[] | undefined
     /** Module-scoped class lists keyed by extracted definition identity. */
     readonly classes: Readonly<Record<string, string>>
     /** Rewritten source with imports for surviving props callables. */

package/src/compiler/internal/Stylesheets.ts

@@ -23,6 +23,9 @@ export const entry = Symbol('stylesheet entry')
 /** Independently shared packed sections for hosts that load source modules separately. */
 export const packed = Symbol('packed stylesheets')
 
+/** Reset stylesheet shared independently of authored contributions and layer order. */
+export const reset = Symbol('reset stylesheet')
+
 /** One packed resource with stable source ownership for development updates. */
 export type Resource = ReturnType<typeof render> & { readonly id: string }
 

package/src/internal/Identity.ts

@@ -3,6 +3,28 @@ import * as Binding from './Binding.js'
 import * as Token from './Token.js'
 import type * as Style from '../Style.js'
 
+/** Encodes both hash streams in eleven CSS identifier characters. */
+export function compact(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
+  }
+
+  const alphabet =
+    '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ_-'
+  let bits = (BigInt(first >>> 0) << 32n) | BigInt(second >>> 0)
+  let result = ''
+  for (let index = 0; index < 11; index++) {
+    result = alphabet[Number(bits & 63n)]! + result
+    bits >>= 6n
+  }
+
+  return result
+}
+
 /** Encodes an explicit identity without losing punctuation or Unicode distinctions. */
 export function encode(value: string): string {
   return Array.from(value, (character) =>
@@ -10,6 +32,16 @@ export function encode(value: string): string {
   ).join('-')
 }
 
+/** Keeps an authored label readable while its separate hash disambiguates spelling. */
+export function label(value: string): string {
+  return (
+    value
+      .replace(/[^a-zA-Z0-9-]+/g, '-')
+      .replace(/^-+|-+$/g, '')
+      .slice(0, 64) || 'value'
+  )
+}
+
 /** Requires an explicit identity at an uncompiled authoring boundary. */
 export function requireId(id: string | undefined, kind: string): string {
   if (!id)

package/src/next/loader.ts

@@ -3,8 +3,9 @@ import * as AtRules from '../compiler/internal/AtRules.js'
 import * as Crypto from 'node:crypto'
 import * as Fs from 'node:fs/promises'
 import * as Path from 'node:path'
-import * as Stylesheets from '../compiler/internal/Stylesheets.js'
 import * as Project from './internal/Project.js'
+import * as Stylesheets from '../compiler/internal/Stylesheets.js'
+import * as ThemeRules from '../web/internal/Themes.js'
 
 type Context = Project.Context & {
   async(): (error: Error | null, code?: string, map?: object) => void
@@ -36,9 +37,16 @@ async function compile(context: Context, source: string) {
   const root = options.root
   const directory = Path.resolve(root, '.zyzz', 'next')
   if (options.mode) {
-    const hash = new URLSearchParams(context.resourceQuery).get('zyzz')
+    const query = new URLSearchParams(context.resourceQuery)
+    const hash = query.get('zyzz')
     if (!hash || !/^[a-f0-9]{64}$/.test(hash))
       throw new Error('Invalid generated stylesheet request.')
+    const css = query.get('css')
+    if (css !== null)
+      return {
+        code: Buffer.from(css, 'base64url').toString('utf8'),
+        map: undefined,
+      }
     const file = Path.join(directory, `${hash}.css`)
     context.addDependency(file)
     return { code: await Fs.readFile(file, 'utf8'), map: undefined }
@@ -178,6 +186,15 @@ async function compile(context: Context, source: string) {
   }
 
   const styles = [
+    ...(graph[Stylesheets.reset]
+      ? [
+          {
+            css: graph[Stylesheets.reset].css,
+            id: graph[Stylesheets.reset].id,
+            map: JSON.stringify(graph[Stylesheets.reset].map),
+          },
+        ]
+      : []),
     ...(await Promise.all(
       (graph[Stylesheets.packed] ?? []).map(async (resource) => {
         const output = await compileShared(resource)
@@ -193,6 +210,11 @@ async function compile(context: Context, source: string) {
       css: shared?.code.toString(),
       map: shared?.map?.toString(),
     },
+    ...(output[ThemeRules.shared] ?? []).map((resource) => ({
+      css: resource.css,
+      id: resource.id,
+      map: undefined,
+    })),
     { id: undefined, css: output.css, map: JSON.stringify(cssMap) },
   ]
   const requests: string[] = []
@@ -215,13 +237,7 @@ async function compile(context: Context, source: string) {
         : '')
     const hash = Crypto.createHash('sha256')
       .update(
-        options.development &&
-          !(
-            index === (graph[Stylesheets.packed]?.length ?? 0) &&
-            graph.sharedCssMap?.sources.every(
-              (name) => name === 'zyzz/reset.css',
-            )
-          )
+        options.development
           ? (stylesheet.id ??
               JSON.stringify([context.resourcePath, index, graph.dependencies]))
           : css,
@@ -240,7 +256,7 @@ async function compile(context: Context, source: string) {
         await Fs.writeFile(temporary, css)
         await Fs.rename(temporary, file)
       }
-    } else {
+    } else if (options.bundler !== 'turbopack') {
       try {
         await Fs.writeFile(file, css, { flag: 'wx' })
       } catch (error) {
@@ -264,7 +280,10 @@ async function compile(context: Context, source: string) {
       )
       if (existing !== code) await Fs.writeFile(request, code)
     } else if (options.bundler === 'turbopack') {
-      request = Path.join(directory, 'style.css') + `?zyzz=${hash}`
+      // Persist CSS with the cached transform, independently of generated filesystem artifacts.
+      request =
+        Path.join(directory, 'style.css') +
+        `?zyzz=${hash}&css=${Buffer.from(css).toString('base64url')}`
     }
     const relative = Path.relative(Path.dirname(context.resourcePath), request)
       .split(Path.sep)

package/src/web/Css.ts

@@ -670,8 +670,9 @@ export function compile<
         ? (theme ??= Themes.create()).emit(
             options.vars ?? {},
             options.schemes ?? false,
+            options[Themes.shared],
           )
-        : { classes: Object.freeze({}), css: '' }
+        : { classes: Object.freeze({}), css: '', resources: [] }
   } catch (error) {
     throw new CompileError([
       {
@@ -692,6 +693,7 @@ export function compile<
     .join('\n')
 
   return Object.freeze({
+    ...(scopes.resources.length ? { [Themes.shared]: scopes.resources } : {}),
     ...(contributionCss ? { contributionCss, scopedCss } : {}),
     classes: Object.freeze(classes),
     css: [contributionCss, scopedCss].filter(Boolean).join('\n'),
@@ -709,6 +711,8 @@ export declare namespace compile {
     name extends string = string,
     themeName extends string = string,
   > = {
+    /** Separates generated token rules for hosts with independent CSS resources. */
+    readonly [Themes.shared]?: 'all' | 'defaults' | undefined
     /** Fixed class identities used by CSS-only consumers. */
     readonly names?: Readonly<Record<string, string>> | undefined
     /**
@@ -743,6 +747,8 @@ export declare namespace compile {
     name extends string = string,
     themeName extends 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. */
     readonly contributionCss?: string | undefined
     /** Ordinary scope and style rules when contributions were supplied. */

package/src/web/internal/Themes.ts

@@ -41,12 +41,14 @@ export function create() {
       contract.paths.set(token.path, name)
     }
 
-    return `var(${name},${literal(value)})`
+    const label = contract.identity?.startsWith('src-') ? token.path : undefined
+    return `var(${name},${literal(value, label)})`
   }
 
   function emit(
     themes: Readonly<Record<string, Theme.Definition | Vars.Definition>>,
     schemes = false,
+    separate?: 'all' | 'defaults',
   ) {
     const classes: Record<string, string> = Object.create(null)
     const rules: string[] = []
@@ -101,13 +103,20 @@ export function create() {
           if (value === undefined)
             throw new Error('Theme scope is missing a live token.')
 
-          return `${name}:${literal(value)};`
+          const label = contract.identity?.startsWith('src-') ? path : undefined
+          return `${name}:${literal(value, label)};`
         })
         .join('')
 
       rules.push(`.${className}{${body}}`)
       for (const [path, name] of contract.paths)
-        conditional(data.values[path]!, name, `.${className}`, rules)
+        conditional(
+          data.values[path]!,
+          name,
+          `.${className}`,
+          rules,
+          contract.identity?.startsWith('src-') ? path : undefined,
+        )
     }
 
     // Scheme rules travel with the module that can apply them, so lowered
@@ -116,26 +125,50 @@ export function create() {
 
     return {
       classes: Object.freeze(classes),
-      css: [...defaults.values(), ...rules].join('\n'),
+      css:
+        separate === 'all'
+          ? ''
+          : [...(separate ? [] : defaults.values()), ...rules].join('\n'),
+      resources: separate
+        ? [
+            ...[...defaults].map(([id, css]) => ({ css, id })),
+            // Scope rules stay together to preserve cascade order without one import per token.
+            ...(separate === 'all' && rules.length
+              ? [
+                  {
+                    css: rules.join('\n'),
+                    id: JSON.stringify([
+                      classes,
+                      [...contracts.values()].flatMap((contract) => [
+                        ...contract.paths.values(),
+                      ]),
+                    ]),
+                  },
+                ]
+              : []),
+          ]
+        : [],
     }
   }
 
-  function literal(value: Token.Value): string {
+  function literal(value: Token.Value, label?: string): string {
     if (Token.is(value)) return serialize(value)
     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)
+      const base = literal(value.default, label)
       const rules = [`:where(*){--fallback:${base};}`]
-      conditional(value, '--fallback', ':where(*)', rules)
+      conditional(value, '--fallback', ':where(*)', rules, label)
       const css = rules.join('')
-      const name = `--z-f${Identity.hash(css)}`
+      const name = label
+        ? `--z-${Identity.label(label)}-fallback-${Identity.compact(css)}`
+        : `--z-f${Identity.hash(css)}`
       const emitted = [`:where(*){${name}:${base};}`]
-      conditional(value, name, ':where(*)', emitted)
+      conditional(value, name, ':where(*)', emitted, label)
       defaults.set(name, emitted.join(''))
       return `var(${name})`
     }
-    return `light-dark(${literal(value.light)},${literal(value.dark)})`
+    return `light-dark(${literal(value.light, label)},${literal(value.dark, label)})`
   }
 
   function conditional(
@@ -143,6 +176,7 @@ export function create() {
     name: string,
     selector: string,
     rules: string[],
+    label?: string,
   ) {
     if (
       !value ||
@@ -151,11 +185,11 @@ export function create() {
       !('default' in value)
     )
       return
-    conditional(value.default, name, selector, rules)
+    conditional(value.default, name, selector, rules, label)
     for (const [query, entry] of Object.entries(value)) {
       if (query === 'default') continue
-      const nested = [`${selector}{${name}:${literal(entry)};}`]
-      conditional(entry, name, selector, nested)
+      const nested = [`${selector}{${name}:${literal(entry, label)};}`]
+      conditional(entry, name, selector, nested, label)
       rules.push(`${query}{${nested.join('')}}`)
     }
   }
@@ -171,6 +205,20 @@ export function encode(value: string): string {
   )
 }
 
+/** One generated definition whose scope order must remain intact. */
+export type Resource = {
+  /** Complete fallback or scoped token definition. */
+  readonly css: string
+  /** Stable identity for stylesheet replacement during development. */
+  readonly id: string
+}
+
+/** 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)}`
 }