zyzz 0.0.16 → 0.0.17

package/src/next/loader.ts

@@ -238,8 +238,7 @@ async function compile(context: Context, source: string) {
     const hash = Crypto.createHash('sha256')
       .update(
         options.development
-          ? (stylesheet.id ??
-              JSON.stringify([context.resourcePath, index, graph.dependencies]))
+          ? (stylesheet.id ?? JSON.stringify([context.resourcePath, index]))
           : css,
       )
       .digest('hex')
@@ -265,33 +264,66 @@ async function compile(context: Context, source: string) {
     }
     let request = file
     if (options.development) {
-      // Server-component CSS needs a client graph edge for Next's native CSS HMR.
-      request = `${file}.js`
-      const stylesheet =
+      request =
         options.bundler === 'turbopack'
-          ? `./style.css?zyzz=${hash}`
-          : `./${hash}.css`
-      const code = `'use client';import ${JSON.stringify(stylesheet)};`
-      const existing = await Fs.readFile(request, 'utf8').catch(
-        (error: NodeJS.ErrnoException) => {
-          if (error.code !== 'ENOENT') throw error
-          return undefined
-        },
-      )
-      if (existing !== code) await Fs.writeFile(request, code)
+          ? Path.join(directory, 'style.css') + `?zyzz=${hash}`
+          : file
     } else if (options.bundler === 'turbopack') {
       // 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)
+    const relative = Path.relative(
+      options.development ? directory : Path.dirname(context.resourcePath),
+      request,
+    )
       .split(Path.sep)
       .join('/')
     requests.push(
-      `import ${JSON.stringify(relative.startsWith('../') ? relative : `./${relative}`)};`,
+      `${options.development ? '@import' : 'import'} ${JSON.stringify(relative.startsWith('../') ? relative : `./${relative}`)};`,
     )
   }
 
+  if (options.development && requests.length) {
+    // Keep the client boundary stable when a dependency changes the stylesheet imports.
+    const hash = Crypto.createHash('sha256')
+      .update(context.resourcePath)
+      .digest('hex')
+    const stylesheet = Path.join(directory, `${hash}.css`)
+    const css = requests.join('\n')
+    const previous = await Fs.readFile(stylesheet, 'utf8').catch(
+      (error: NodeJS.ErrnoException) => {
+        if (error.code !== 'ENOENT') throw error
+        return undefined
+      },
+    )
+    if (previous !== css) {
+      const temporary = `${stylesheet}.${Crypto.randomUUID()}.tmp`
+      await Fs.writeFile(temporary, css)
+      await Fs.rename(temporary, stylesheet)
+    }
+    const file = Path.join(directory, `${hash}.js`)
+    const request =
+      options.bundler === 'turbopack'
+        ? `./style.css?zyzz=${hash}`
+        : `./${hash}.css`
+    try {
+      await Fs.writeFile(
+        file,
+        `'use client';import ${JSON.stringify(request)};`,
+        { flag: 'wx' },
+      )
+    } catch (error) {
+      if ((error as NodeJS.ErrnoException).code !== 'EEXIST') throw error
+    }
+    const relative = Path.relative(Path.dirname(context.resourcePath), file)
+      .split(Path.sep)
+      .join('/')
+    return {
+      code: `${output.code}\nimport ${JSON.stringify(relative.startsWith('../') ? relative : `./${relative}`)};`,
+      map,
+    }
+  }
   return { code: `${output.code}\n${requests.join('\n')}`, map }
 }

package/src/vite/index.ts

@@ -724,6 +724,8 @@ export function zyzz(options: zyzz.Options = {}): Plugin {
         modules: result.modules,
         code: output.code,
         contractIds: Object.keys(result.contracts),
+        configurations: new Map<string, Catalogs.Catalog>(),
+        connections: staged,
         css: '',
         sharedCss: '',
         cssMap: map,
@@ -758,9 +760,13 @@ export function zyzz(options: zyzz.Options = {}): Plugin {
       for (const key of catalogs.keys())
         if (key.startsWith(`${id}\0`)) catalogs.delete(key)
 
+    const configurations = new Map<string, Catalogs.Catalog>()
     for (const [id, contract] of Object.entries(compiled))
-      for (const configuration of Catalogs.read(contract))
-        catalogs.set(`${id}\0${configuration.identity}`, configuration)
+      for (const configuration of Catalogs.read(contract)) {
+        const key = `${id}\0${configuration.identity}`
+        catalogs.set(key, configuration)
+        configurations.set(key, configuration)
+      }
 
     const map = new Mapping.GenMapping()
     const styles: string[] = []
@@ -967,6 +973,8 @@ export function zyzz(options: zyzz.Options = {}): Plugin {
       modules: result.modules,
       code: output.code,
       contractIds: Object.keys(compiled),
+      configurations,
+      connections: staged,
       css: styles.join('\n'),
       sharedCss: new TextDecoder().decode(shared.code),
       sharedCssMap: sharedMap,
@@ -996,7 +1004,7 @@ export function zyzz(options: zyzz.Options = {}): Plugin {
     // The seed only anchors the compile, which visits every discovered source.
     if (!entry || !sources.has(entry.file)) {
       const file = sources.keys().next().value
-      if (file === undefined) return []
+      if (file === undefined) return { catalogs: new Map(), edges: new Map() }
 
       entry = {
         compiler: compiler(environment),
@@ -1019,7 +1027,16 @@ export function zyzz(options: zyzz.Options = {}): Plugin {
         if (!output.contractIds.some((id) => key.startsWith(`${id}\0`)))
           catalogs.delete(key)
 
-    return [...catalogs.values()]
+    // Concurrent module transforms must not replace this request's compiled catalogs.
+    return {
+      catalogs: output?.configurations ?? new Map(catalogs),
+      edges: output?.connections ?? new Map(edges),
+    }
+  }
+
+  type DocumentState = {
+    catalogs: ReadonlyMap<string, Catalogs.Catalog>
+    edges: ReadonlyMap<string, ReadonlySet<string>>
   }
 
   /** Catalogs reachable from a served document's module scripts; every catalog when none resolve. */
@@ -1027,6 +1044,7 @@ export function zyzz(options: zyzz.Options = {}): Plugin {
     html: string,
     filename: string,
     resolve: Host['resolve'],
+    { catalogs, edges }: DocumentState,
   ) {
     const reachable = new Set<string>()
 
@@ -1560,7 +1578,7 @@ export function zyzz(options: zyzz.Options = {}): Plugin {
           if (!context.server)
             return entryCatalogs(context.bundle, context.chunk)
 
-          await initializations(context.server)
+          const state = await initializations(context.server)
 
           const environment = context.server.environments.client
 
@@ -1569,6 +1587,7 @@ export function zyzz(options: zyzz.Options = {}): Plugin {
             context.filename,
             (source, importer) =>
               environment.pluginContainer.resolveId(source, importer),
+            state,
           )
         })()
         // Saved preferences apply before any other script or visible content.

package/src/web/Css.ts

@@ -94,7 +94,7 @@ export function compile<
   // Logical dimensions may alias either physical axis in inherited writing modes.
   // Preserve physical-only factoring when no logical dimension is authored.
   const logicalSizing = [...properties].some((property) =>
-    /^(min|max)?(blockSize|inlineSize)$/i.test(property),
+    /^(min|max)?(blockSize|inlineSize)$/i.test(canonical(property)),
   )
   const resets = properties.has('all')
   const combinedLines = new Set<string>()
@@ -165,6 +165,7 @@ export function compile<
       [
         'whiteSpace',
         'whiteSpaceCollapse',
+        'whiteSpaceTrim',
         'textWrap',
         'textWrapMode',
         'textWrapStyle',

package/src/web/internal/Themes.ts

@@ -18,6 +18,7 @@ export function create() {
   >()
 
   const defaults = new Map<string, readonly Rule[]>()
+  const defaultGroups = new Map<Token.Contract, Set<string>>()
 
   function serialize(token: Token.Reference): string {
     const value = token.value
@@ -42,7 +43,7 @@ export function create() {
     }
 
     const label = contract.identity?.startsWith('src-') ? token.path : undefined
-    return `var(${name},${literal(value, label)})`
+    return `var(${name},${literal(value, label, token.contract)})`
   }
 
   function emit(
@@ -51,6 +52,7 @@ export function create() {
     separate?: 'all' | 'defaults',
   ) {
     const classes: Record<string, string> = Object.create(null)
+    const completeDefaults = new Set<Token.Contract>()
     const empty: string[] = []
     const rules: Rule[] = []
 
@@ -97,6 +99,16 @@ 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,
+          )
+      }
       if (!contract.paths.size) empty.push(`.${className}{}`)
 
       const declarations: Rule[] = []
@@ -112,7 +124,7 @@ export function create() {
           conditions: [],
           property: name,
           selector: `.${className}`,
-          value: literal(value, label),
+          value: literal(value, label, data.contract),
         })
       }
 
@@ -124,6 +136,8 @@ export function create() {
           `.${className}`,
           rules,
           contract.identity?.startsWith('src-') ? path : undefined,
+          [],
+          data.contract,
         )
     }
 
@@ -134,6 +148,31 @@ export function create() {
       scopes.set(rule.property, entries)
     }
 
+    const grouped = new Set<string>()
+    const resources: Resource[] = []
+    if (separate === 'all')
+      for (const [contract, names] of defaultGroups) {
+        if (!completeDefaults.has(contract)) continue
+
+        // Sort independent properties only. Each property retains its authored conditional order.
+        const rules = [...names].sort().flatMap((name) => defaults.get(name)!)
+        resources.push({
+          css: render(rules),
+          id: JSON.stringify([
+            contract[Token.identity],
+            'fallbacks',
+            Object.entries(themes)
+              .filter(
+                ([, theme]) => theme[Token.definition].contract === contract,
+              )
+              .map(([name]) => name)
+              .sort(),
+          ]),
+          rules,
+        })
+        for (const name of names) grouped.add(name)
+      }
+
     return {
       classes: Object.freeze(classes),
       css:
@@ -151,11 +190,14 @@ export function create() {
               .join('\n'),
       resources: separate
         ? [
-            ...[...defaults].map(([id, rules]) => ({
-              css: render(rules),
-              id,
-              rules,
-            })),
+            ...resources,
+            ...[...defaults]
+              .filter(([id]) => !grouped.has(id))
+              .map(([id, rules]) => ({
+                css: render(rules),
+                id,
+                rules,
+              })),
             // Keep every scope of a property together so overlapping themes retain precedence.
             ...(separate === 'all'
               ? [...scopes].map(([property, rules]) => ({
@@ -172,25 +214,34 @@ export function create() {
     }
   }
 
-  function literal(value: Token.Value, label?: string): string {
+  function literal(
+    value: Token.Value,
+    label?: string,
+    owner?: Token.Contract,
+  ): 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, label)
+      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)}`
+      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 emitted: Rule[] = [
         { conditions: [], property: name, selector: ':where(*)', value: base },
       ]
-      conditional(value, name, ':where(*)', emitted, label)
+      conditional(value, name, ':where(*)', emitted, label, [], owner)
       defaults.set(name, emitted)
+      if (owner) {
+        const names = defaultGroups.get(owner) ?? new Set<string>()
+        names.add(name)
+        defaultGroups.set(owner, names)
+      }
       return `var(${name})`
     }
-    return `light-dark(${literal(value.light, label)},${literal(value.dark, label)})`
+    return `light-dark(${literal(value.light, label, owner)},${literal(value.dark, label, owner)})`
   }
 
   function conditionalCss(
@@ -198,6 +249,7 @@ export function create() {
     property: string,
     selector: string,
     label?: string,
+    owner?: Token.Contract,
   ): string {
     if (
       !value ||
@@ -207,12 +259,12 @@ export function create() {
     )
       return ''
     return (
-      conditionalCss(value.default, property, selector, label) +
+      conditionalCss(value.default, property, selector, label, owner) +
       Object.entries(value)
         .filter(([query]) => query !== 'default')
         .map(
           ([query, entry]) =>
-            `${query}{${selector}{${property}:${literal(entry, label)};}${conditionalCss(entry, property, selector, label)}}`,
+            `${query}{${selector}{${property}:${literal(entry, label, owner)};}${conditionalCss(entry, property, selector, label, owner)}}`,
         )
         .join('')
     )
@@ -225,6 +277,7 @@ export function create() {
     rules: Rule[],
     label?: string,
     conditions: readonly string[] = [],
+    owner?: Token.Contract,
   ) {
     if (
       !value ||
@@ -233,7 +286,7 @@ export function create() {
       !('default' in value)
     )
       return
-    conditional(value.default, name, selector, rules, label, conditions)
+    conditional(value.default, name, selector, rules, label, conditions, owner)
     for (const [query, entry] of Object.entries(value)) {
       if (query === 'default') continue
       const nested = [...conditions, query]
@@ -241,9 +294,9 @@ export function create() {
         conditions: nested,
         property: name,
         selector,
-        value: literal(entry, label),
+        value: literal(entry, label, owner),
       })
-      conditional(entry, name, selector, rules, label, nested)
+      conditional(entry, name, selector, rules, label, nested, owner)
     }
   }