zyzz 0.0.23 → 0.0.25

package/src/compiler/Transform.ts

@@ -9,6 +9,7 @@ import type * as Ast from '@oxc-project/types'
 import * as Css from '../web/Css.js'
 import * as ClassName from '../web/internal/ClassName.js'
 import * as Expression from './internal/Expression.js'
+import * as Identity from '../internal/Identity.js'
 import MagicString from 'magic-string'
 import * as Mapping from '@jridgewell/gen-mapping'
 import * as Namespaces from './internal/Namespaces.js'
@@ -183,6 +184,47 @@ export function compile(options: compile.Options): compile.ReturnType {
     },
   })
 
+  const found = localApplications?.find() ?? []
+  // Compositions supersede their inputs' classes, so those reads stay unfolded.
+  const composing = (application: Span) =>
+    extracted.calls.some(
+      (call) =>
+        (call.composition || call.runtimeComposition) &&
+        call.start < application.start &&
+        application.end <= call.end,
+    )
+  const folded = new Set(
+    found.filter(
+      (application) =>
+        !composing(application) &&
+        !extracted.calls.some(
+          (call) =>
+            call.output === 'html' &&
+            call.runtimeComposition?.some(
+              (input) => input.applicationStart === application.start,
+            ),
+        ),
+    ),
+  )
+
+  const local =
+    portable || options.development
+      ? undefined
+      : localApplications?.definitions()
+
+  // Styles applied only alone to DOM elements, or inside cx, never meet another
+  // style's classes. Atomic ones share rules like independent styles.
+  const standalone = new Set(
+    [...(local?.values.keys() ?? [])].filter((name) =>
+      found.every(
+        (application) =>
+          application.name !== name ||
+          application.terminal ||
+          composing(application),
+      ),
+    ),
+  )
+
   // Scheme rules accompany modules whose runtime helpers can apply a scheme class.
   const schemes =
     options.schemes ??
@@ -196,6 +238,12 @@ export function compile(options: compile.Options): compile.ReturnType {
     [ThemeRules.shared]: options[ThemeRules.shared],
     development: options.development,
     [ClassName.labels]: extracted.styles[ClassName.labels],
+    [ClassName.units]:
+      options[ClassName.units] ??
+      ClassName.registry().scope({
+        owner: options.moduleId,
+        qualifier: Identity.compact(options.moduleId).slice(-6),
+      }),
     composition: options.composition,
     cssOutput: options.cssOutput,
     names: portable ? portableNames : undefined,
@@ -206,14 +254,23 @@ export function compile(options: compile.Options): compile.ReturnType {
       if (portable || options.development) return extracted.styles
 
       const dead = localApplications?.dead()
-      if (!dead?.size) return extracted.styles
+      if (!dead?.size && !standalone.size) return extracted.styles
 
       return {
-        styles: extracted.styles.styles.map((style) =>
-          dead.has(style.name)
-            ? { cssOutput: style.cssOutput, declarations: [], name: style.name }
-            : style,
-        ),
+        styles: extracted.styles.styles.map((style) => {
+          if (dead?.has(style.name))
+            return {
+              cssOutput: style.cssOutput,
+              declarations: [],
+              name: style.name,
+            }
+
+          // Grouped output keeps one class per style.
+          return standalone.has(style.name) &&
+            (style.cssOutput ?? options.cssOutput ?? 'atomic') === 'atomic'
+            ? { ...style, composition: 'independent' as const }
+            : style
+        }),
       }
     })(),
     contributions: extracted.contributions,
@@ -319,6 +376,35 @@ export function compile(options: compile.Options): compile.ReturnType {
     ),
   )
 
+  // Definitions read only through folded applications need no class list of
+  // their own. True marks definitions whose every read follows initialization.
+  const unread = new Map(
+    [...(local?.values ?? [])].filter(([name]) =>
+      found.every(
+        (application) => application.name !== name || folded.has(application),
+      ),
+    ),
+  )
+  const namespaces = (local?.namespaces ?? []).filter((namespace) =>
+    [...namespace.ends.keys()].every((name) => unread.get(name)),
+  )
+
+  const erased = new Map(namespaces.flatMap((namespace) => [...namespace.ends]))
+
+  // An ambient namespace keeps member types without runtime initialization.
+  for (const namespace of namespaces)
+    module.prependRight(namespace.start, 'declare ')
+
+  for (const call of extracted.calls) {
+    const end = erased.get(call.name)
+    if (end !== undefined)
+      module.overwrite(
+        end,
+        call.start,
+        `: import('zyzz').style.ReturnType${call.output === 'html' ? "<'html'>" : ''}`,
+      )
+  }
+
   let callable = false
 
   const composed = (node: Span) =>
@@ -438,6 +524,17 @@ export function compile(options: compile.Options): compile.ReturnType {
         return typed ? `(${result} as ${type})` : result
       }
 
+      const initialized = unread.get(call.name)
+      if (initialized !== undefined) {
+        if (erased.has(call.name)) return ''
+
+        // Guards read only truthiness, and failures before initialization still call it.
+        const value = initialized ? 'void 0' : '1'
+        return /\.[cm]?tsx?$/.test(options.moduleId)
+          ? `(${value} as unknown as import('zyzz').style.ReturnType${call.output === 'html' ? "<'html'>" : ''})`
+          : value
+      }
+
       if (application.folded)
         return composeHtml
           ? `${compositionHtml}.from({className:${JSON.stringify(classes[call.name])}})`
@@ -463,31 +560,13 @@ export function compile(options: compile.Options): compile.ReturnType {
       !call.slots &&
       !call.runtimeComposition &&
       !application.folded &&
+      !unread.has(call.name) &&
       call.output !== 'html'
     )
       callable = true
   }
 
-  for (const application of localApplications?.find() ?? []) {
-    if (
-      extracted.calls.some(
-        (call) =>
-          call.output === 'html' &&
-          call.runtimeComposition?.some(
-            (input) => input.applicationStart === application.start,
-          ),
-      )
-    )
-      continue
-    if (
-      extracted.calls.some(
-        (call) =>
-          (call.composition || call.runtimeComposition) &&
-          call.start < application.start &&
-          application.end <= call.end,
-      )
-    )
-      continue
+  for (const application of folded) {
     const className = JSON.stringify(classes[application.name])
 
     const key =
@@ -495,12 +574,18 @@ export function compile(options: compile.Options): compile.ReturnType {
       'html'
         ? 'class'
         : 'className'
+    const callee = options.source.slice(
+      application.start,
+      application.calleeEnd,
+    )
 
-    // Keep a callable guard so bundlers also retain failures before initialization.
     module.overwrite(
       application.start,
       application.end,
-      `(${options.source.slice(application.start, application.calleeEnd)}?{${key}:${className}}:${options.source.slice(application.start, application.calleeEnd)}())`,
+      application.initialized
+        ? `({${key}:${className}})`
+        : // Keep a callable guard so bundlers also retain failures before initialization.
+          `(${callee}?{${key}:${className}}:${callee}())`,
     )
   }
 
@@ -688,7 +773,17 @@ export function compile(options: compile.Options): compile.ReturnType {
         specifier.importKind === 'type' ||
         !(
           node.source.value === 'zyzz'
-            ? ['Config', 'cx', 'style', 'Vars', 'variable', 'variants']
+            ? [
+                'Config',
+                'cx',
+                'defineConfig',
+                'defineVars',
+                'extendVars',
+                'style',
+                'Vars',
+                'variable',
+                'variants',
+              ]
             : [
                 'Css',
                 'cssFunction',
@@ -1135,6 +1230,7 @@ export function compile(options: compile.Options): compile.ReturnType {
       ? { [ThemeRules.shared]: emitted[ThemeRules.shared] }
       : {}),
     [ClassName.rules]: emitted[ClassName.rules],
+    [ClassName.units]: emitted[ClassName.units],
     classes,
     code: portable ? options.source : module.toString(),
     css: namespaced.css,
@@ -1150,6 +1246,7 @@ export function compile(options: compile.Options): compile.ReturnType {
     vars: emitted.vars,
   }
   Object.defineProperty(result, ClassName.rules, { enumerable: false })
+  Object.defineProperty(result, ClassName.units, { enumerable: false })
   return Object.freeze(result)
 }
 
@@ -1161,6 +1258,8 @@ export declare namespace compile {
   type Options = Source.extract.Options & {
     /** Separates generated token definitions for independently loaded modules. */
     readonly [ThemeRules.shared]?: 'all' | 'defaults' | undefined
+    /** Names shared independent atomic rules, with one name table across a graph's modules. */
+    readonly [ClassName.units]?: ClassName.Units | 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. */
@@ -1188,6 +1287,8 @@ export declare namespace compile {
     readonly code: string
     /** Exact emitted rules retained for collision diagnostics. */
     readonly [ClassName.rules]: Readonly<Record<string, string>>
+    /** Shared rule names chosen by this module, for graph cache validation. */
+    readonly [ClassName.units]?: ClassName.Units['used'] | undefined
     /** Ordered, unminified stylesheet text. */
     readonly css: string
     /** Standard stylesheet map with authored selector/declaration locations. */

package/src/compiler/internal/Applications.ts

@@ -34,6 +34,10 @@ export function create(
     }
     direct: Source.Call | undefined
     members: Map<string, Source.Call>
+    /** Namespace statement start and member identifier ends by extracted name. */
+    namespace?: Namespace | undefined
+    /** Offset after which top-level reads observe an initialized binding. */
+    ready: number
   }[] = []
 
   for (const statement of program.body) {
@@ -43,6 +47,7 @@ export function create(
       statement.body?.type === 'TSModuleBlock'
     ) {
       const members = new Map<string, Source.Call>()
+      const ends = new Map<string, number>()
       let valid = true
 
       for (const member of statement.body.body) {
@@ -71,6 +76,7 @@ export function create(
           }
 
           members.set(declaration.id.name, call)
+          ends.set(call.name, declaration.id.end)
           memberBindings.set(declaration.id.start, call.name)
         }
       }
@@ -80,6 +86,8 @@ export function create(
           declaration: { id: statement.id },
           direct: undefined,
           members,
+          namespace: { ends, start: statement.start },
+          ready: statement.end,
         })
 
       continue
@@ -142,6 +150,7 @@ export function create(
         declaration: { ...declaration, id: declaration.id },
         direct,
         members,
+        ready: declaration.end,
       })
     }
   }
@@ -149,6 +158,9 @@ export function create(
   if (!candidates.length) return undefined
 
   const lexical = new Set<Ast.Node>()
+  // Reads inside functions, classes, or namespaces may run before initialization.
+  const deferred = new Set<Ast.Node>()
+  const terminals = new Set<Ast.Node>()
   const scope = new Scope.Tracker({ preserveExitedScopes: true })
   Walker.walk(program, { scopeTracker: scope })
   scope.freeze()
@@ -185,8 +197,23 @@ export function create(
         candidates.some(
           (candidate) => candidate.declaration.id.start === id.start,
         )
-      )
+      ) {
         lexical.add(node)
+        if (terminal(ancestors)) terminals.add(node)
+        if (
+          ancestors.some((node) =>
+            [
+              'ArrowFunctionExpression',
+              'ClassDeclaration',
+              'ClassExpression',
+              'FunctionDeclaration',
+              'FunctionExpression',
+              'TSModuleDeclaration',
+            ].includes(node.type),
+          )
+        )
+          deferred.add(node)
+      }
     },
     leave() {
       ancestors.pop()
@@ -200,6 +227,80 @@ export function create(
   >(candidates.map(({ declaration }) => [declaration.id.name, []]))
   let evaluation = false
 
+  // Returns undefined when any read escapes. Recipes, dynamic styles, and
+  // applications with overrides keep their runtime calls.
+  function collect(candidate: (typeof candidates)[number]):
+    | {
+        readonly applications: readonly Application[]
+        readonly called: ReadonlySet<string>
+      }
+    | undefined {
+    const { declaration, direct, members } = candidate
+    const applications: Application[] = []
+    const called = new Set<string>()
+
+    for (const reference of references.get(declaration.id.name) ?? []) {
+      if (reference === declaration.id) continue
+
+      let callee: Ast.Node = reference
+      let call = direct
+
+      if (!direct) {
+        const member = parents.get(reference)
+
+        if (
+          member?.type !== 'MemberExpression' ||
+          member.object !== reference ||
+          member.computed ||
+          member.optional ||
+          member.property.type !== 'Identifier'
+        )
+          return undefined
+
+        call = members.get(member.property.name)
+        callee = member
+      }
+
+      if (
+        call?.composition ||
+        call?.runtimeComposition ||
+        (!options.dynamic && (call?.slots || call?.recipe))
+      )
+        continue
+
+      const application = parents.get(callee)
+
+      if (
+        !call ||
+        application?.type !== 'CallExpression' ||
+        application.callee !== callee ||
+        application.optional
+      )
+        return undefined
+
+      // An override needs the runtime callable, but exposes no other definition.
+      if (!options.dynamic && application.arguments.length) {
+        called.add(call.name)
+        continue
+      }
+
+      applications.push({
+        calleeEnd: callee.end,
+        end: application.end,
+        initialized:
+          !deferred.has(reference) &&
+          reference.start >= candidate.ready &&
+          (!candidate.namespace ||
+            namespaceCounts.get(declaration.id.name) === 1),
+        name: call.name,
+        start: application.start,
+        terminal: terminals.has(reference),
+      })
+    }
+
+    return { applications, called }
+  }
+
   return {
     dead() {
       if (evaluation) return new Set<string>()
@@ -255,6 +356,58 @@ export function create(
 
       return result
     },
+    definitions() {
+      const namespaces: Namespace[] = []
+      const values = new Map<string, boolean>()
+
+      if (evaluation) return { namespaces, values }
+
+      const counts = new Map<string, number>()
+
+      for (const { declaration } of candidates)
+        counts.set(
+          declaration.id.name,
+          (counts.get(declaration.id.name) ?? 0) + 1,
+        )
+
+      for (const candidate of candidates) {
+        const name = candidate.declaration.id.name
+        if (counts.get(name)! > 1 || (namespaceCounts.get(name) ?? 0) > 1)
+          continue
+
+        const result = collect(candidate)
+        if (!result) continue
+
+        let erased = !!candidate.namespace
+
+        for (const call of candidate.direct
+          ? [candidate.direct]
+          : candidate.members.values()) {
+          if (
+            call.composition ||
+            call.runtimeComposition ||
+            call.slots ||
+            call.recipe ||
+            result.called.has(call.name)
+          ) {
+            erased = false
+            continue
+          }
+
+          const initialized = result.applications.every(
+            (application) =>
+              application.name !== call.name || application.initialized,
+          )
+
+          values.set(call.name, initialized)
+          erased &&= initialized
+        }
+
+        if (erased) namespaces.push(candidate.namespace!)
+      }
+
+      return { namespaces, values }
+    },
     enter(node, parent) {
       if (
         node.type === 'MemberExpression' &&
@@ -280,68 +433,9 @@ export function create(
     find() {
       if (evaluation) return []
 
-      const result: Application[] = []
-
-      for (const { declaration, direct, members } of candidates) {
-        const applications: Application[] = []
-        let valid = true
-
-        for (const reference of references.get(declaration.id.name) ?? []) {
-          if (reference === declaration.id) continue
-
-          let callee: Ast.Node = reference
-          let call = direct
-
-          if (!direct) {
-            const member = parents.get(reference)
-
-            if (
-              member?.type !== 'MemberExpression' ||
-              member.object !== reference ||
-              member.computed ||
-              member.optional ||
-              member.property.type !== 'Identifier'
-            ) {
-              valid = false
-              break
-            }
-
-            call = members.get(member.property.name)
-            callee = member
-          }
-
-          if (
-            call?.composition ||
-            call?.runtimeComposition ||
-            (!options.dynamic && (call?.slots || call?.recipe))
-          )
-            continue
-
-          const application = parents.get(callee)
-
-          if (
-            !call ||
-            application?.type !== 'CallExpression' ||
-            application.callee !== callee ||
-            application.optional ||
-            (!options.dynamic && application.arguments.length)
-          ) {
-            valid = false
-            break
-          }
-
-          applications.push({
-            calleeEnd: callee.end,
-            end: application.end,
-            name: call.name,
-            start: application.start,
-          })
-        }
-
-        if (valid) result.push(...applications)
-      }
-
-      return result
+      return candidates.flatMap(
+        (candidate) => collect(candidate)?.applications ?? [],
+      )
     },
   }
 }
@@ -352,16 +446,37 @@ type Application = {
   readonly calleeEnd: number
   /** End of the application. */
   readonly end: number
+  /** Whether the read runs at top level after its definition initializes. */
+  readonly initialized: boolean
   /** Extracted class identity. */
   readonly name: string
   /** Start of the application. */
   readonly start: number
+  /** Whether a DOM element receives the props alone, so its classes meet no other style's. */
+  readonly terminal: boolean
+}
+
+/** A top-level namespace whose members are all static definitions. */
+type Namespace = {
+  /** Member identifier ends keyed by extracted name. */
+  readonly ends: ReadonlyMap<string, number>
+  /** Start of the namespace statement. */
+  readonly start: number
 }
 
 /** Binding references gathered during the transform's existing walk. */
 type Collector = {
   /** Definitions with no observable value reads, retaining escaped containers. */
   dead: () => ReadonlySet<string>
+  /**
+   * Static definitions whose every read is a found application, keyed by
+   * extracted name with whether every read is initialized. Namespaces list
+   * those whose definitions all qualify with initialized reads.
+   */
+  definitions: () => {
+    readonly namespaces: readonly Namespace[]
+    readonly values: ReadonlyMap<string, boolean>
+  }
   /** Records relevant reads and their immediate parents. */
   enter: (node: Ast.Node, parent: Ast.Node | null | undefined) => void
   /** Resolves applications after traversal completes. */
@@ -376,3 +491,64 @@ export declare namespace create {
     readonly dynamic?: boolean | undefined
   }
 }
+
+// Matches a no-argument application spread onto, or read as the class of, a DOM element.
+function terminal(path: readonly Ast.Node[]): boolean {
+  let index = path.length - 1
+  let node = path[index]
+  const member = path[index - 1]
+  if (member?.type === 'MemberExpression' && member.object === node)
+    node = path[--index]
+
+  const call = path[--index]
+  if (
+    call?.type !== 'CallExpression' ||
+    call.callee !== node ||
+    call.arguments.length
+  )
+    return false
+
+  const parent = path[--index]
+  if (parent?.type === 'JSXSpreadAttribute')
+    return parent.argument === call && alone(path[index - 1], parent)
+
+  if (
+    parent?.type !== 'MemberExpression' ||
+    parent.object !== call ||
+    parent.computed ||
+    parent.property.type !== 'Identifier' ||
+    !/^class(?:Name)?$/.test(parent.property.name)
+  )
+    return false
+
+  const container = path[--index]
+  const attribute = path[--index]
+  return (
+    container?.type === 'JSXExpressionContainer' &&
+    container.expression === parent &&
+    attribute?.type === 'JSXAttribute' &&
+    attribute.value === container &&
+    attribute.name.type === 'JSXIdentifier' &&
+    /^class(?:Name)?$/.test(attribute.name.name) &&
+    alone(path[index - 1], attribute)
+  )
+}
+
+// Other spreads or class attributes could add another style's classes.
+function alone(element: Ast.Node | undefined, own: Ast.Node): boolean {
+  return (
+    element?.type === 'JSXOpeningElement' &&
+    element.name.type === 'JSXIdentifier' &&
+    /^[a-z]/.test(element.name.name) &&
+    element.attributes.every(
+      (attribute) =>
+        attribute === own ||
+        (attribute.type === 'JSXAttribute' &&
+          !(
+            attribute.name.type === 'JSXIdentifier'
+              ? attribute.name.name
+              : attribute.name.namespace.name
+          ).startsWith('class')),
+    )
+  )
+}

package/src/compiler/internal/Compositions.ts

@@ -405,7 +405,15 @@ export function collect(options: collect.Options) {
         node,
       )
     const name = `composition-${options.identity}-${node.start}`
+    // A composition of independent styles keeps their sharing contract.
+    const independent = (calls: readonly Source.Call[]) =>
+      calls.every(
+        (call) => styles.get(call.name)!.composition === 'independent',
+      )
+        ? ({ composition: 'independent' } as const)
+        : {}
     const style: Style.NamedStyle = {
+      ...independent(selected),
       cssOutput: 'atomic',
       name,
       declarations: [],
@@ -580,6 +588,7 @@ export function collect(options: collect.Options) {
             .join(' '),
         },
         style: {
+          ...independent(included),
           cssOutput: 'atomic',
           name,
           declarations: [],

package/src/compiler/internal/Configurations.ts

@@ -149,6 +149,9 @@ export function collect(options: collect.Options): Themes.Link {
       : {}),
     [Token.identity]: identity,
     ...(input.id !== undefined ? { [Token.complete]: true } : {}),
+    ...(input.composition !== undefined
+      ? { composition: input.composition }
+      : {}),
     cssOutput: input.cssOutput ?? 'atomic',
     ...(input.defaultLayer !== undefined
       ? { defaultLayer: input.defaultLayer }
@@ -243,6 +246,7 @@ export function collect(options: collect.Options): Themes.Link {
       return {}
     })(),
     ...(input.id !== undefined ? { id: input.id } : {}),
+    ...(input.composition ? { composition: input.composition } : {}),
     ...(input.cssOutput ? { cssOutput: input.cssOutput } : {}),
     ...(input.defaultLayer !== undefined
       ? { defaultLayer: input.defaultLayer }