zyzz 0.0.26 → 0.0.28

package/src/compiler/Source.ts

@@ -504,11 +504,21 @@ export function extract(options: extract.Options): extract.ReturnType {
   const opaque = new Set(variables.references.keys())
   const normalized = new Map<number, Ast.Node | Error>()
   const selectorKeys = new Set<number>()
+  const composed: Ast.Node[] = []
   for (const call of pending) {
     if (!call.arguments[0]) continue
     try {
       const value = staticData.normalize(call.arguments[0], staticCalls, opaque)
       normalized.set(call.start, value)
+      if (value.type === 'ArrayExpression')
+        for (const element of value.elements) {
+          const entry = element && Expression.unwrap(element)
+          if (
+            entry?.type === 'Identifier' ||
+            entry?.type === 'MemberExpression'
+          )
+            composed.push(entry)
+        }
       const body =
         value.type === 'ArrowFunctionExpression'
           ? staticData.normalize(value.body, staticCalls, opaque)
@@ -564,6 +574,7 @@ export function extract(options: extract.Options): extract.ReturnType {
           }),
         ),
         options.moduleId,
+        composed,
       )
     } catch (error) {
       if (!(error instanceof Themes.InvalidError)) throw error
@@ -573,6 +584,7 @@ export function extract(options: extract.Options): extract.ReturnType {
     }
   })()
 
+  const bodies = new Map<number, Ast.ObjectExpression>()
   const cssNameCounts = new Map<string, number>()
   for (const call of pending) {
     const name = authoredNames.get(call.start)!
@@ -686,10 +698,20 @@ export function extract(options: extract.Options): extract.ReturnType {
       }
     }
 
-    if (call.arguments.length > 2 || argument?.type !== 'ObjectExpression') {
+    const entries =
+      argument?.type === 'ArrayExpression' &&
+      !dynamic &&
+      !recipes.has(call.start)
+        ? argument.elements
+        : undefined
+
+    if (
+      call.arguments.length > 2 ||
+      (argument?.type !== 'ObjectExpression' && !entries)
+    ) {
       report(
         'unsupported_syntax',
-        'Expected one literal object or typed callback; spreads and referenced definitions are not supported.',
+        'Expected one literal object, typed callback, or array of style definitions and literal objects; spreads are not supported.',
         call,
       )
       continue
@@ -700,7 +722,7 @@ export function extract(options: extract.Options): extract.ReturnType {
     let recipeTypes: Call['recipeTypes']
     let staticRecipe: StaticRecipe.Definition<Ast.ObjectExpression> | undefined
     let dynamicRecipe: StaticRecipe.Definition<Ast.ObjectExpression> | undefined
-    if (recipes.has(call.start)) {
+    if (recipes.has(call.start) && argument?.type === 'ObjectExpression') {
       try {
         if (dynamic)
           throw new Themes.InvalidError(
@@ -838,7 +860,18 @@ export function extract(options: extract.Options): extract.ReturnType {
         ) {
           report(
             'unsupported_syntax',
-            'Only explicit literal properties are supported; spreads, computed keys, shorthand, and methods are not evaluated.',
+            (() => {
+              const key =
+                property.type === 'Property' && property.computed
+                  ? Expression.unwrap(property.key)
+                  : undefined
+
+              // Template keys with an & target are selectors outside their group.
+              return key?.type === 'TemplateLiteral' &&
+                key.quasis.some((quasi) => quasi.value.raw.includes('&'))
+                ? 'Template selector keys require a selectors object.'
+                : 'Only explicit literal properties are supported; spreads, computed keys, shorthand, and methods are not evaluated.'
+            })(),
             property,
           )
           continue
@@ -1231,14 +1264,175 @@ export function extract(options: extract.Options): extract.ReturnType {
       return values
     }
 
-    const values = object(argument)
+    // Each entry becomes an ordered declaration segment, so later entries win as authored declarations do.
+    function compose(elements: Ast.ArrayExpression['elements']) {
+      const parts: Style.NamedStyle[] = []
+      const properties: Ast.ObjectExpression['properties'] = []
+
+      for (const element of elements) {
+        const entry =
+          element && element.type !== 'SpreadElement'
+            ? Expression.unwrap(element)
+            : undefined
+
+        if (entry?.type === 'ObjectExpression') {
+          const values = object(entry)
+          if (diagnostics.length !== before) continue
+
+          parts.push(
+            define(
+              { [name]: values },
+              { locations, vars: themes?.styles.get(call.start)?.theme },
+            ).styles[0]!,
+          )
+          properties.push(...entry.properties)
+          continue
+        }
+
+        const target = entry && selectors.compositions.get(entry.start)
+        const local =
+          target && 'type' in target
+            ? calls.find((value) => value.start === target.start)
+            : undefined
+        const packed = target && !('type' in target) ? target.style : undefined
+        const style = local
+          ? styles.find((style) => style.name === local.name)
+          : packed?.style
+
+        if (!style) {
+          report(
+            'unsupported_syntax',
+            'Composition entries require literal objects or previously declared style definitions.',
+            element ?? call,
+          )
+          continue
+        }
+
+        if (
+          local?.recipe ||
+          local?.slots ||
+          packed?.dynamic ||
+          (packed?.staticRecipe &&
+            !(
+              packed.staticRecipe.rules.length === 1 &&
+              packed.staticRecipe.rules[0]!.value.styles.length === 1 &&
+              packed.staticRecipe.rules[0]!.value.styles[0]!.name ===
+                packed.style.name
+            ))
+        ) {
+          report(
+            'unsupported_syntax',
+            'Composition entries cannot be variants or dynamic styles; apply them with cx.',
+            entry!,
+          )
+          continue
+        }
+
+        // Native tables select variable alternatives from one context per call.
+        if (
+          options.target === 'native' &&
+          !context(
+            local
+              ? themes?.nativeContext(local.start, local.end)
+              : packed?.nativeContext,
+            themes?.nativeContext(call.start, call.end),
+          )
+        ) {
+          report(
+            'unsupported_syntax',
+            'Native composition entries require the variable catalog of the composing style.',
+            entry!,
+          )
+          continue
+        }
+
+        // The composing configuration decides output for every copied entry.
+        parts.push(
+          Object.fromEntries(
+            Object.entries(style).filter(
+              ([key]) => key !== 'composition' && key !== 'cssOutput',
+            ),
+          ) as Style.NamedStyle,
+        )
+
+        if (local) {
+          properties.push(...(bodies.get(local.start)?.properties ?? []))
+          for (const [start, count] of local.typography ?? [])
+            typography.set(start, count)
+          for (const [start, count] of local.typographyQueries ?? [])
+            typographyQueries.set(start, count)
+          continue
+        }
+
+        // Packed declarations have no authored source here, so they map to the entry.
+        properties.push(
+          ...declarations(style).map(
+            (declaration): Ast.ObjectProperty => ({
+              type: 'Property',
+              computed: false,
+              kind: 'init',
+              method: false,
+              shorthand: false,
+              start: entry!.start,
+              end: entry!.end,
+              key: {
+                type: 'Literal',
+                value: declaration.property,
+                raw: JSON.stringify(declaration.property),
+                start: entry!.start,
+                end: entry!.end,
+              },
+              value: {
+                type: 'Literal',
+                value: '',
+                raw: '""',
+                start: entry!.start,
+                end: entry!.end,
+              },
+            }),
+          ),
+        )
+      }
+
+      return {
+        body: {
+          type: 'ObjectExpression',
+          start: call.start,
+          end: call.end,
+          properties,
+        } satisfies Ast.ObjectExpression,
+        definition: {
+          styles: [
+            Object.freeze<Style.NamedStyle>({
+              name,
+              declarations: Object.freeze([]),
+              rules: Object.freeze(
+                parts.map((style) => Object.freeze({ style })),
+              ),
+            }),
+          ],
+        } satisfies Style.Definition as Style.Definition,
+      }
+    }
+
+    const values = entries
+      ? undefined
+      : object(argument as Ast.ObjectExpression)
     if (diagnostics.length !== before) continue
 
     try {
-      const definition = define(
-        { [name]: values },
-        { locations, vars: themes?.styles.get(call.start)?.theme },
-      )
+      const composite = entries && compose(entries)
+      if (diagnostics.length !== before) continue
+
+      const definition =
+        composite?.definition ??
+        define(
+          { [name]: values! },
+          { locations, vars: themes?.styles.get(call.start)?.theme },
+        )
+
+      const body = composite?.body ?? (argument as Ast.ObjectExpression)
+      bodies.set(call.start, body)
 
       function validate(style: Style.NamedStyle, path: readonly string[]) {
         for (const declaration of style.declarations) {
@@ -1331,10 +1525,7 @@ export function extract(options: extract.Options): extract.ReturnType {
         ...(selectors.identities.has(call.start)
           ? { identity: selectors.identities.get(call.start)! }
           : {}),
-        ...(argument !== (dynamic?.body ?? original) &&
-        argument.type === 'ObjectExpression'
-          ? { body: argument }
-          : {}),
+        ...(body !== (dynamic?.body ?? original) ? { body } : {}),
         ...(shorthands ? { shorthands } : {}),
         ...(typography.size ? { typography } : {}),
         ...(typographyQueries.size ? { typographyQueries } : {}),
@@ -1357,6 +1548,7 @@ export function extract(options: extract.Options): extract.ReturnType {
                 if (
                   dynamic ||
                   recipe ||
+                  entries?.length === 0 ||
                   (!definition.styles[0]!.declarations.length &&
                     !definition.styles[0]!.rules &&
                     !definition.styles[0]!.targets)
@@ -1748,6 +1940,38 @@ export class ExtractError extends Error {
   override name = 'Source.ExtractError'
 }
 
+/** Accepts an entry context that the composing call selects identically. */
+function context(
+  entry: Call['nativeContext'],
+  composite: Call['nativeContext'],
+): boolean {
+  if (!entry || entry === composite) return true
+  if (!composite || entry.defaultVars !== composite.defaultVars) return false
+
+  const names = Object.keys(entry.vars)
+  return (
+    names.length === Object.keys(composite.vars).length &&
+    names.every((name) => {
+      const left = entry.vars[name]?.[Token.definition].contract
+      const right = composite.vars[name]?.[Token.definition].contract
+      return (
+        !!left &&
+        !!right &&
+        (left === right ||
+          (left[Token.identity] !== undefined &&
+            left[Token.identity] === right[Token.identity]))
+      )
+    })
+  )
+}
+
+/** Lists declarations in emitted order, through conditions and segments. */
+function declarations(style: Style.NamedStyle): readonly Style.Declaration[] {
+  return style.rules
+    ? style.rules.flatMap((rule) => declarations(rule.style))
+    : style.declarations
+}
+
 function identity(value: string): string {
   let first = 2166136261
   let second = 2246822507

package/src/compiler/Transform.ts

@@ -1189,7 +1189,10 @@ export function compile(options: compile.Options): compile.ReturnType {
             ) ?? -1
           if (start < 0) continue
 
-          const location = authored[propertyIndex]!
+          // Composed packed entries can expand differently from the composite's shorthands.
+          const location = authored[propertyIndex]
+          if (!location) continue
+
           used.add(propertyIndex)
 
           Mapping.addMapping(cssMap, {

package/src/compiler/internal/Applications.ts

@@ -1,6 +1,7 @@
 /** Finds nonescaping local static callables whose applications can become props. @module */
 import type * as Ast from '@oxc-project/types'
 import * as Walker from 'oxc-walker'
+import * as Expression from './Expression.js'
 import * as Scope from './Scope.js'
 import type * as Source from '../Source.js'
 
@@ -158,6 +159,8 @@ export function create(
   if (!candidates.length) return undefined
 
   const lexical = new Set<Ast.Node>()
+  // Extraction resolves these reads and rewrites their definitions, so none run.
+  const resolved = 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>()
@@ -200,6 +203,7 @@ export function create(
       ) {
         lexical.add(node)
         if (terminal(ancestors)) terminals.add(node)
+        if (extracted(ancestors, definitions)) resolved.add(node)
         if (
           ancestors.some((node) =>
             [
@@ -240,7 +244,7 @@ export function create(
     const called = new Set<string>()
 
     for (const reference of references.get(declaration.id.name) ?? []) {
-      if (reference === declaration.id) continue
+      if (reference === declaration.id || resolved.has(reference)) continue
 
       let callee: Ast.Node = reference
       let call = direct
@@ -492,6 +496,58 @@ export declare namespace create {
   }
 }
 
+// Matches a selector interpolation or composition entry inside a definition, which
+// extraction resolves statically. Computed keys elsewhere in a definition fail extraction.
+function extracted(
+  path: readonly Ast.Node[],
+  definitions: ReadonlyMap<number, Source.Call>,
+): boolean {
+  let index = path.length - 1
+  const member = path[index - 1]
+  if (
+    member?.type === 'MemberExpression' &&
+    member.object === path[index] &&
+    !member.computed
+  )
+    index--
+
+  // Type assertions around a node keep the same read.
+  function parent() {
+    const node = path[index]!
+    while (index > 0 && Expression.unwrap(path[index - 1]!) === node) index--
+    return path[--index]
+  }
+
+  function definition(node: Ast.Node | undefined) {
+    return (
+      node?.type === 'CallExpression' &&
+      definitions.get(node.start)?.end === node.end
+    )
+  }
+
+  const container = parent()
+
+  if (container?.type === 'ArrayExpression') {
+    const call = parent()
+    return (
+      call?.type === 'CallExpression' &&
+      definition(call) &&
+      !!call.arguments[0] &&
+      Expression.unwrap(call.arguments[0]) === container
+    )
+  }
+
+  if (container?.type !== 'TemplateLiteral') return false
+
+  const property = parent()
+  return (
+    property?.type === 'Property' &&
+    property.computed &&
+    Expression.unwrap(property.key) === container &&
+    path.slice(0, index).some(definition)
+  )
+}
+
 // 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

package/src/compiler/internal/Selectors.ts

@@ -11,7 +11,7 @@ import * as Expression from './Expression.js'
 import type * as Scope from './Scope.js'
 import * as Themes from './Themes.js'
 
-/** Collects scoped selectors, local identities, and exported style references. */
+/** Collects scoped selectors, local identities, exported style references, and composed definitions. */
 export function scan(
   program: Ast.Program,
   scope: Scope.Tracker,
@@ -21,6 +21,7 @@ export function scan(
   selectorKeys: ReadonlySet<number> = new Set(),
   cssNamespaces: ReadonlyMap<number, string> = new Map(),
   moduleId = namespace,
+  composed: readonly Ast.Node[] = [],
 ) {
   const authoredNames = Names.collect(program)
   const conditions = new Map<number, string>()
@@ -33,6 +34,7 @@ export function scan(
   const namespaces = new Map<number, Map<string, Ast.Expression>>()
   const importedNames = new Map<string, Themes.Link>()
   const imported = new Map<number, Themes.Link>()
+  const compositions = new Map<number, Ast.CallExpression | Themes.Link>()
 
   const names = new Map<string, Ast.Expression>()
   const publicNames = new Map<string, string>()
@@ -122,7 +124,7 @@ export function scan(
   }
 
   if (!calls.length && !imported.size)
-    return { conditions, exports, identities, localConditions }
+    return { compositions, conditions, exports, identities, localConditions }
 
   const exposed = new Map<Ast.Expression, readonly (readonly string[])[]>()
   for (const [name, local] of publicNames) {
@@ -138,8 +140,8 @@ export function scan(
     for (const [member, value] of values)
       exposed.set(value, [...(exposed.get(value) ?? []), [name, member]])
 
-  if (!selectorKeys.size && !exposed.size)
-    return { conditions, exports, identities, localConditions }
+  if (!selectorKeys.size && !exposed.size && !composed.length)
+    return { compositions, conditions, exports, identities, localConditions }
 
   type Entry = { node: Ast.Node; parent: Ast.Node | null | undefined }
   const nodes: Entry[] = []
@@ -179,10 +181,11 @@ export function scan(
     }
   }
 
-  function resolve(
+  // Composition reads the definition itself, so only selector references claim an identity.
+  function target(
     node: Ast.Node,
     seen = new Set<Ast.Node>(),
-  ): Themes.Link | undefined {
+  ): Ast.CallExpression | Themes.Link | undefined {
     node = Expression.unwrap(node)
     if (seen.has(node)) return undefined
     seen.add(node)
@@ -191,7 +194,7 @@ export function scan(
       node.type === 'CallExpression' &&
       definitions.get(node.start)?.end === node.end
     )
-      return link(node)
+      return node
 
     if (node.type === 'Identifier') {
       const declaration = declarations.get(node.start)
@@ -199,7 +202,7 @@ export function scan(
       const external = imported.get(declaration)
       if (external) return external
       const value = bindings.get(declaration)
-      return value ? resolve(value, seen) : undefined
+      return value ? target(value, seen) : undefined
     }
 
     if (node.type === 'MemberExpression' && !node.optional) {
@@ -221,14 +224,25 @@ export function scan(
           declaration === undefined
             ? undefined
             : namespaces.get(declaration)?.get(name)
-        if (value) return resolve(value, seen)
+        if (value) return target(value, seen)
       }
-      return resolve(node.object, seen)?.members?.[name]
+      const object = target(node.object, seen)
+      return object && !('type' in object) ? object.members?.[name] : undefined
     }
 
     return undefined
   }
 
+  function resolve(node: Ast.Node): Themes.Link | undefined {
+    const value = target(node)
+    return value && 'type' in value ? link(value) : value
+  }
+
+  for (const node of composed) {
+    const value = target(node)
+    if (value) compositions.set(node.start, value)
+  }
+
   for (const { node } of nodes) {
     if (node.type === 'VariableDeclarator' && node.init)
       for (const [key, member] of exposed.get(node.init) ?? []) {
@@ -335,5 +349,5 @@ export function scan(
     return [...imported.values()].some(contains)
   }
 
-  return { conditions, exports, identities, localConditions }
+  return { compositions, conditions, exports, identities, localConditions }
 }

package/src/internal/Authoring.ts

@@ -10,6 +10,10 @@ import type * as Theme from './Theme.js'
 /** Private ownership used by uncompiled composition; never spread onto DOM props. */
 export const metadata = Symbol.for('zyzz.authoring')
 
+// Static definitions retain their style data so later compositions can read it,
+// including definitions created by another bundled copy of the runtime.
+const data = Symbol.for('zyzz.style')
+
 /** Identity and replaceable attribute/slot ownership for an applied definition. */
 export type Owner = {
   readonly name: string
@@ -77,24 +81,54 @@ export function create(
   if (!dynamic && !id && Object.keys(input as object).length === 0)
     Identity.requireId(undefined, 'Empty style')
 
-  if (id && !dynamic && options.theme)
-    Style.define({ style: body(input as Record<string, unknown>) } as never, {
-      vars: options.theme,
-    })
-  const className = id
-    ? `z-style-${id}`
-    : Identity.style(
-        (
-          Style.define as (
-            input: Record<string, unknown>,
-            options: Style.define.Options,
-          ) => Style.Definition
-        )(
-          { style: body(input as Record<string, unknown>) },
-          { vars: options.theme },
-        ).styles[0]!,
-        namespace,
-      )
+  const define = (input: unknown) =>
+    (
+      Style.define as (
+        input: Record<string, unknown>,
+        options: Style.define.Options,
+      ) => Style.Definition
+    )(
+      { style: body(input as Record<string, unknown>) },
+      { vars: options.theme },
+    ).styles[0]!
+
+  const style = (() => {
+    if (dynamic) return undefined
+    if (!Array.isArray(input)) return define(input)
+
+    // Mirrors compiled composition: each entry is one ordered declaration segment.
+    const rules: Style.Rule[] = []
+    for (const [index, entry] of (input as readonly unknown[]).entries()) {
+      if (typeof entry !== 'function') {
+        rules.push({ style: define(entry) })
+        continue
+      }
+
+      const style = Object.getOwnPropertyDescriptor(entry, data)?.value as
+        | Style.NamedStyle
+        | undefined
+      if (style) {
+        rules.push({ style })
+        continue
+      }
+
+      // Compiled callables carry only class names, so an explicit id names the composite.
+      if (id) return undefined
+
+      throw new Style.InvalidError([
+        {
+          code: 'invalid_structure',
+          message:
+            'Composition entries require literal objects or static style definitions. Compositions of compiled definitions require an explicit id, and variants and dynamic styles are applied with cx.',
+          path: [String(index)],
+        },
+      ])
+    }
+
+    return { name: 'style', declarations: [], rules } satisfies Style.NamedStyle
+  })()
+
+  const className = id ? `z-style-${id}` : Identity.style(style!, namespace)
   const props = Props.create({ className })
   const apply = (values?: style.Options & Record<string, unknown>) => {
     let result = props(values as style.Options)
@@ -124,6 +158,7 @@ export function create(
   Object.defineProperty(apply, Symbol.toPrimitive, {
     value: () => `.${className}`,
   })
+  if (style) Object.defineProperty(apply, data, { value: style })
   return apply as style.ReturnType
 }
 

package/src/internal/Configuration.ts

@@ -625,15 +625,52 @@ export type StyleFactory<
         ? [options?: style.DefinitionOptions]
         : [invalid: never, unavailable: never]
       : [invalid: never, unavailable: never]
-  ): style.Dynamic<values, output>
+    // TypeScript types a call that matches no overload with this signature. Other
+    // inputs leave `callback` at its constraint, so their definitions stay static.
+  ): ((...args: never[]) => unknown) extends callback
+    ? style.ReturnType<output>
+    : style.Dynamic<values, output>
   <const styles extends Record<string, unknown>>(
     styles: styles &
       NoInfer<Body<styles, tokens, layers, mappings>> &
       Completion.Properties<tokens>,
     options?: style.DefinitionOptions,
   ): style.ReturnType<output>
+  <const entries>(
+    styles: entries & Entries<entries, tokens, layers, mappings>,
+    ...options: entries extends readonly unknown[]
+      ? [options?: style.DefinitionOptions]
+      : [invalid: never, unavailable: never]
+  ): style.ReturnType<output>
 }
 
+// Composition entries are static definitions or checked literal objects.
+type Entries<
+  entries,
+  tokens extends Theme.Tokens,
+  layers extends string,
+  mappings extends Shorthands.Map,
+> = {
+  readonly [index in keyof entries]: Entry<
+    entries[index],
+    tokens,
+    layers,
+    mappings
+  >
+}
+
+// Distributes over mixed element unions so each member keeps its own contract.
+type Entry<
+  entry,
+  tokens extends Theme.Tokens,
+  layers extends string,
+  mappings extends Shorthands.Map,
+> = entry extends (...args: never) => unknown
+  ? style.Composable<entry>
+  : entry &
+      NoInfer<Body<entry, tokens, layers, mappings>> &
+      Completion.Properties<tokens>
+
 type Keys<styles> = styles extends unknown ? keyof styles : never
 
 /** Checked declaration body shared by configured styles and recipe choices. */