zyzz 0.0.27 → 0.0.28

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. */

package/src/internal/Literal.ts

@@ -1588,7 +1588,10 @@ const properties = {
   direction: { kind: 'enum', values: ['ltr', 'rtl'] },
   display: {
     kind: 'enum',
+    // The Compat Standard keeps the legacy box keywords that -webkit-line-clamp requires.
     values: [
+      '-webkit-box',
+      '-webkit-inline-box',
       'block',
       'block flex',
       'block flow',

package/src/internal/Theme.ts

@@ -38,6 +38,14 @@ export type StyleFactory<tokens extends Tokens> = {
       (values extends Binding.Inputs<values> ? unknown : never),
     options?: style.DefinitionOptions,
   ): style.Dynamic<values>
+  <const entries>(
+    styles: entries & {
+      readonly [index in keyof entries]: Entry<entries[index], tokens>
+    },
+    ...options: entries extends readonly unknown[]
+      ? [options?: style.DefinitionOptions]
+      : [invalid: never, unavailable: never]
+  ): style.ReturnType
   <const styles extends Record<string, unknown>>(
     styles: styles & NoInfer<Style.Accepted<styles, tokens>>,
     options?: style.DefinitionOptions,
@@ -56,6 +64,13 @@ export type StyleFactory<tokens extends Tokens> = {
   ): style.ReturnType
 }
 
+// Distributes over mixed element unions so each member keeps its own contract.
+type Entry<entry, tokens extends Tokens> = entry extends (
+  ...args: never
+) => unknown
+  ? style.Composable<entry>
+  : entry & NoInfer<Style.Accepted<entry, tokens>>
+
 /**
  * Defines scalar tokens and typography sets without defaults or environment access.
  * Colors currently use the supported literal color grammar; spacing and radius

package/src/styleFunction.ts

@@ -29,9 +29,21 @@ type VariableOptions<input> = input extends {
     }
   : unknown
 
+// Composition entries are static definitions or exact literal objects.
+type Entries<entries> = {
+  readonly [index in keyof entries]: Entry<entries[index]>
+}
+
+// Distributes over mixed element unions so each member keeps its own contract.
+type Entry<entry> = entry extends (...args: never) => unknown
+  ? style.Composable<entry>
+  : entry & NoInfer<Style.Accepted<entry, {}, true>> & Completion.Properties
+
 /**
  * Declares literal styles for source extraction. Requires a compile-time transform.
- * @param styles - Token-free literal CSS properties. Omit for an empty definition.
+ * An array composes static definitions and literal objects in order, so later entries
+ * win as later declarations do.
+ * @param styles - Token-free literal CSS properties, or an array of static definitions and literal objects. Omit for an empty definition.
  * @returns A callable style definition after source rewriting.
  * @throws {Error} When a definition needs an explicit identity and none is supplied.
  */
@@ -53,16 +65,29 @@ export function style<
       ? [options?: style.DefinitionOptions]
       : [invalid: never, unavailable: never]
     : [invalid: never, unavailable: never]
-): style.Dynamic<values>
+  // 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
+  : style.Dynamic<values>
 export function style<const styles extends Record<string, unknown>>(
   styles: styles &
     NoInfer<Style.Accepted<styles, {}, true>> &
     Completion.Properties,
   options?: style.DefinitionOptions,
 ): style.ReturnType
+export function style<const entries>(
+  styles: entries & Entries<entries>,
+  // Exclude non-array inputs by arity so they cannot mask object-property diagnostics.
+  ...options: entries extends readonly unknown[]
+    ? [options?: style.DefinitionOptions]
+    : [invalid: never, unavailable: never]
+): style.ReturnType
 export function style(
   styles?: unknown,
   options: style.DefinitionOptions = {},
+  // Matches the arity-gated overloads, whose invalid branches add parameters.
+  ..._: readonly never[]
 ): style.ReturnType {
   return Authoring.create(styles, options)
 }
@@ -73,6 +98,10 @@ type Reference = { readonly [identity]: true }
 
 /** Contracts for the literal authoring boundary. */
 export declare namespace style {
+  /** Accepts a static definition as a composition entry. Dynamic definitions and variants require cx. */
+  type Composable<entry> = entry extends Reference & (() => unknown)
+    ? entry
+    : ReturnType<Output>
   /** Stable identity for selectors and definitions that cannot be content-addressed. */
   type DefinitionOptions = { readonly id?: string | undefined }
   /** Callable compiled bindings with required scalar inputs and styling overrides. */