zyzz 0.0.2 → 0.0.5

package/src/compiler/Graph.ts

@@ -13,7 +13,7 @@ import type * as Ast from '@oxc-project/types'
 import * as Parser from 'oxc-parser'
 import * as Syntax from './internal/Syntax.js'
 import * as Walker from 'oxc-walker'
-import type * as Theme from '../Theme.js'
+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'
@@ -135,7 +135,7 @@ function build(options: compile.Options, cache?: Cache): Cache {
       Object.keys(options.native ?? {}).length ||
     Object.entries(cache?.native ?? {}).some(([key, value]) => {
       const next = Reflect.get(options.native ?? {}, key)
-      if (key !== 'fonts' && key !== 'themes' && key !== 'units')
+      if (key !== 'fonts' && key !== 'vars' && key !== 'units')
         return value !== next
 
       return (
@@ -961,7 +961,7 @@ function build(options: compile.Options, cache?: Cache): Cache {
           source: options.modules[moduleId]!,
         }
 
-    Object.assign(themes, result.themes)
+    Object.assign(themes, result.vars)
     visiting.delete(moduleId)
 
     return result
@@ -1060,7 +1060,7 @@ function build(options: compile.Options, cache?: Cache): Cache {
       native: {
         ...options.native,
         ...(options.native.fonts && { fonts: { ...options.native.fonts } }),
-        ...(options.native.themes && { themes: { ...options.native.themes } }),
+        ...(options.native.vars && { vars: { ...options.native.vars } }),
         ...(options.native.units && { units: { ...options.native.units } }),
       },
       resolutions: Object.freeze(resolutions),
@@ -1121,7 +1121,7 @@ function build(options: compile.Options, cache?: Cache): Cache {
             ? ''
             : (Css.compile({
                 styles: { styles: [] },
-                themes: sharedThemes,
+                vars: sharedThemes,
                 contributions: [contribution],
               }).contributionCss ?? ''),
         layers: contribution.kind === 'layers' ? [contribution.names] : [],
@@ -1345,7 +1345,7 @@ function build(options: compile.Options, cache?: Cache): Cache {
           )
         identities.set(name, signature)
       }
-      for (const [name, theme] of Object.entries(module.themes)) {
+      for (const [name, theme] of Object.entries(module.vars)) {
         const data = theme[Token.definition]
         if (data.contract[Token.identity]?.startsWith('id-'))
           register(`theme:${name}`, JSON.stringify(data.values))
@@ -1403,7 +1403,7 @@ function build(options: compile.Options, cache?: Cache): Cache {
             [Themes.context]: {
               extracted: Object.freeze({
                 ...extracted.get(moduleId)!,
-                themes: sharedThemes,
+                vars: sharedThemes,
                 contributions: undefined,
               }),
               links: {},
@@ -1435,7 +1435,12 @@ function build(options: compile.Options, cache?: Cache): Cache {
       }
 
     for (const call of extracted.get(moduleId)!.calls)
-      if (call.identity)
+      if (
+        call.identity &&
+        !call.composition &&
+        !call.runtimeComposition &&
+        !call.compositionCase
+      )
         styleClasses[call.identity] = modules[moduleId]!.classes[call.name]!
   }
 
@@ -1581,6 +1586,6 @@ function nativeOutput(
     get map() {
       return (sourceMap ??= JSON.parse(output.map) as Mapping.EncodedSourceMap)
     },
-    themes: Object.freeze({}),
+    vars: Object.freeze({}),
   })
 }

package/src/compiler/Native.ts

@@ -13,7 +13,7 @@ import * as Walker from 'oxc-walker'
 
 /**
  * Compiles local style and variants calls for an explicit native context.
- * @param options - Shared source, destination mappings, and selected theme/scheme.
+ * @param options - Shared source, destination mappings, and selected set/scheme.
  * @returns Native callables, source map, and static recipe tables.
  * @throws {Source.ExtractError} For invalid source authoring.
  * @throws {CompileError} For native features outside the static source boundary.
@@ -38,7 +38,7 @@ export function compile(options: compile.Options): compile.ReturnType {
       (extracted.themeAppearances?.length || extracted.themeScripts?.length))
   )
     throw new CompileError(
-      'Native static modules do not support CSS contributions, variables, or web theme controls.',
+      'Native static modules do not support CSS contributions, variables, or web set controls.',
     )
   const parsed = options[Themes.context]?.parsed ?? Syntax.parse(options)
   const names = new Set(options[Themes.context]?.identifiers)
@@ -93,10 +93,7 @@ export function compile(options: compile.Options): compile.ReturnType {
 
   const staticTables = new Map<Source.Call, Variants.Definition>()
   if (options.contextual) {
-    const groups = new Map<
-      StyleSheet.compile.Options['themes'],
-      Source.Call[]
-    >()
+    const groups = new Map<StyleSheet.compile.Options['vars'], Source.Call[]>()
     for (const call of extracted.calls) {
       if (
         call.recipe ||
@@ -106,12 +103,12 @@ export function compile(options: compile.Options): compile.ReturnType {
         call.output === 'html'
       )
         continue
-      const themes = call.nativeContext?.themes ?? options.themes
-      const group = groups.get(themes)
+      const vars = call.nativeContext?.vars ?? options.vars
+      const group = groups.get(vars)
       if (group) group.push(call)
-      else groups.set(themes, [call])
+      else groups.set(vars, [call])
     }
-    for (const [themes, calls] of groups) {
+    for (const [vars, calls] of groups) {
       if (calls.length < 2) continue
       try {
         const compiled = StyleSheet.compile({
@@ -126,13 +123,13 @@ export function compile(options: compile.Options): compile.ReturnType {
               })),
             })),
           },
-          themes,
+          vars,
           units: options.units,
         })
         for (const call of calls) {
           const styles = Object.fromEntries(
-            Object.entries(compiled.styles).map(([theme, schemes]) => [
-              theme,
+            Object.entries(compiled.styles).map(([set, schemes]) => [
+              set,
               Object.freeze({
                 light: Object.freeze({ '0': schemes.light[call.name]! }),
                 dark: Object.freeze({ '0': schemes.dark[call.name]! }),
@@ -237,32 +234,32 @@ export function compile(options: compile.Options): compile.ReturnType {
     bindings?: ReturnType<typeof NativeBindings.prepare>,
   ): string {
     if (contextOptions.contextual) {
-      const themes = call?.nativeContext?.themes ?? contextOptions.themes
+      const vars = call?.nativeContext?.vars ?? contextOptions.vars
       if (!call?.slots && !call?.recipe?.payloads?.length)
         compiled ??= Variants.compile({
           recipe,
           fonts: contextOptions.fonts,
           platform: contextOptions.platform,
-          themes,
+          vars,
           units: contextOptions.units,
         })
       else {
         try {
           bindings = NativeBindings.prepare(recipe, call!, {
             ...contextOptions,
-            themes,
+            vars,
           })
         } catch (error) {
           if (error instanceof StyleSheet.CompileError) throw error
           throw new CompileError((error as Error).message)
         }
       }
-      const defaultTheme =
-        call?.nativeContext?.defaultTheme ?? contextOptions.theme ?? 'default'
+      const defaultVars =
+        call?.nativeContext?.defaultVars ?? contextOptions.set ?? 'default'
       const tables = new Map<string, string>()
-      const alternatives = (themes ? Object.keys(themes) : ['default']).map(
-        (theme) => ({
-          theme,
+      const alternatives = (vars ? Object.keys(vars) : ['default']).map(
+        (set) => ({
+          set,
           schemes: (['light', 'dark'] as const).map((colorScheme) => {
             const value = callable(
               recipe,
@@ -271,8 +268,8 @@ export function compile(options: compile.Options): compile.ReturnType {
               {
                 ...contextOptions,
                 contextual: false,
-                themes,
-                theme,
+                vars,
+                set,
                 colorScheme,
               },
               compiled,
@@ -285,8 +282,8 @@ export function compile(options: compile.Options): compile.ReturnType {
         }),
       )
       const entries = alternatives.map(
-        ({ theme, schemes }) =>
-          `${JSON.stringify(theme)}:{${schemes.map(({ colorScheme, value }) => `${JSON.stringify(colorScheme)}:${tables.get(value)}`).join(',')}}`,
+        ({ set, schemes }) =>
+          `${JSON.stringify(set)}:{${schemes.map(({ colorScheme, value }) => `${JSON.stringify(colorScheme)}:${tables.get(value)}`).join(',')}}`,
       )
       const parameters = [...tables.values()].map((name, index) =>
         typed ? `${name}:T${index}` : name,
@@ -294,7 +291,7 @@ export function compile(options: compile.Options): compile.ReturnType {
       const types = typed
         ? `<${parameters.map((_, index) => `const T${index} extends (input:never)=>import('zyzz/runtime').Native.Props<object>`).join(',')},>`
         : ''
-      const expression = `${types}(${parameters.join(',')})=>${helper}Context.create({${entries.join(',')}},${JSON.stringify(defaultTheme)})`
+      const expression = `${types}(${parameters.join(',')})=>${helper}Context.create({${entries.join(',')}},${JSON.stringify(defaultVars)})`
       let context = contexts.get(expression)
       if (!context) {
         context = `${helper}ContextFactory${contexts.size}`
@@ -351,12 +348,12 @@ export function compile(options: compile.Options): compile.ReturnType {
       recipe,
       fonts: contextOptions.fonts,
       platform: contextOptions.platform,
-      themes: contextOptions.themes,
+      vars: contextOptions.vars,
       units: contextOptions.units,
     })
     recipes[name] = compiled
     const styles = StyleSheet.select(compiled.styles, {
-      theme: contextOptions.theme ?? 'default',
+      set: contextOptions.set ?? 'default',
       colorScheme: contextOptions.colorScheme,
     })
     const cached = compiledCalls.get(compiled)
@@ -743,7 +740,7 @@ export declare namespace compile {
     readonly [Edits.runtime]?: boolean | undefined
     /** Compiler-owned graph context. */
     readonly [Themes.context]?: Themes.Context | undefined
-    /** Retain every theme and scheme for render-local selection. */
+    /** Retain every set and scheme for render-local selection. */
     readonly contextual?: boolean | undefined
     /** Scheme compiled into this module's callables. Recompile to select another scheme. */
     readonly colorScheme: StyleSheet.ColorScheme
@@ -751,8 +748,8 @@ export declare namespace compile {
     readonly moduleId: string
     /** Shared local style and variants authoring. */
     readonly source: string
-    /** Label selected from supplied themes. Defaults to the token-fallback default table. */
-    readonly theme?: string | undefined
+    /** Label selected from supplied vars. Defaults to the token-fallback default table. */
+    readonly set?: string | undefined
   }
   /** Executable source with immutable recipe tables and authored source mappings. */
   type ReturnType = {
@@ -762,7 +759,7 @@ export declare namespace compile {
     readonly code: string
     /** Version-three source map encoded as JSON. */
     readonly map: string
-    /** All theme/scheme tables for each extracted definition. */
+    /** All set/scheme tables for each extracted definition. */
     readonly recipes: Readonly<Record<string, Variants.Definition>>
   }
 }

package/src/compiler/Source.ts

@@ -27,11 +27,13 @@ import * as Scope from './internal/Scope.js'
 import type * as Shorthands from '../internal/Shorthands.js'
 import * as Static from './internal/Static.js'
 import * as Style from '../Style.js'
-import type * as Theme from '../Theme.js'
+import type * as Theme from '../internal/Theme.js'
 import * as Themes from './internal/Themes.js'
 import * as ThemeValues from '../web/internal/Themes.js'
 import * as Token from '../internal/Token.js'
-import * as Variables from './internal/Variables.js'
+import * as Typography from '../internal/Typography.js'
+import * as Value from '../internal/Value.js'
+import * as Vars from './internal/Vars.js'
 import * as Walker from 'oxc-walker'
 
 // JavaScript extraction supplies untyped values. Keep structural checks without
@@ -47,9 +49,9 @@ export type Call = {
   readonly nativeContext?:
     | {
         /** Default label selected when the provider omits its theme. */
-        readonly defaultTheme: string
+        readonly defaultVars: string
         /** Compatible alternatives from the owning configuration. */
-        readonly themes: Readonly<Record<string, Theme.Definition>>
+        readonly vars: Readonly<Record<string, Theme.Definition>>
       }
     | undefined
   /** Class identity available without source rewriting. */
@@ -97,6 +99,10 @@ export type Call = {
   readonly body?: Ast.ObjectExpression | undefined
   /** Alias targets retained for declaration source locations. */
   readonly shorthands?: Shorthands.Map | undefined
+  /** Emitted typography field counts keyed by authored property offsets. */
+  readonly typography?: ReadonlyMap<number, number> | undefined
+  /** Emitted typography query counts keyed by authored property offsets. */
+  readonly typographyQueries?: ReadonlyMap<number, number> | undefined
   /** Native HTML attribute output selected by the bound configuration. */
   readonly output?: 'html' | undefined
   /** Typed runtime slots for callback definitions. */
@@ -174,6 +180,27 @@ export function extract(options: extract.Options): extract.ReturnType {
 
   const namespace = identity(options.moduleId)
   const parsed = options[Themes.context]?.parsed ?? Syntax.parse(options)
+  for (const node of parsed.program.body) {
+    if (node.type !== 'ImportDeclaration' || node.source.value !== 'zyzz')
+      continue
+    for (const specifier of node.specifiers) {
+      if (specifier.type !== 'ImportSpecifier') continue
+      const name =
+        specifier.imported.type === 'Identifier'
+          ? specifier.imported.name
+          : specifier.imported.value
+      if (name === 'Theme' || name === 'Variables')
+        throw new ExtractError([
+          {
+            code: 'unsupported_syntax',
+            message: `Import Vars instead of ${name}.`,
+            source: options.moduleId,
+            start: specifier.start,
+            end: specifier.end,
+          },
+        ])
+    }
+  }
 
   if (parsed.errors.length) {
     for (const error of parsed.errors) {
@@ -216,7 +243,7 @@ export function extract(options: extract.Options): extract.ReturnType {
 
   const variables = (() => {
     try {
-      return Variables.collect(
+      return Vars.collect(
         program,
         namespace,
         scopeTracker,
@@ -290,7 +317,7 @@ export function extract(options: extract.Options): extract.ReturnType {
 
       const binding =
         node.type === 'Identifier'
-          ? declaration ?? null
+          ? (declaration ?? null)
           : scopeTracker.getDeclaration(node.name)
 
       contributions.read(node, parent, binding)
@@ -344,6 +371,7 @@ export function extract(options: extract.Options): extract.ReturnType {
             name === 'cx' ||
             name === 'style' ||
             name === 'Theme' ||
+            name === 'Vars' ||
             name === 'variable' ||
             name === 'variants'
           )
@@ -640,6 +668,8 @@ export function extract(options: extract.Options): extract.ReturnType {
     }
     const name = `style-${namespace}-${call.start}`
     const locations: Style.SourceLocation[] = []
+    const typography = new Map<number, number>()
+    const typographyQueries = new Map<number, number>()
     const conditionKeys = new Map<string, Ast.Node>()
 
     function object(
@@ -690,7 +720,7 @@ export function extract(options: extract.Options): extract.ReturnType {
                 ? entry.key.value
                 : undefined
             : undefined
-        if (key !== 'selectors' && key !== 'variables') {
+        if (key !== 'selectors' && key !== 'vars') {
           properties.push(entry)
           continue
         }
@@ -979,11 +1009,17 @@ export function extract(options: extract.Options): extract.ReturnType {
                 !(Binding.is(part)
                   ? (dynamicValues !== undefined &&
                       Object.values(dynamicValues.slots).includes(part)) ||
-                    targets.every((target) =>
-                      Binding.accepts(part.type, target),
+                    targets.every(
+                      (target) =>
+                        Binding.accepts(part.type, target) ||
+                        (part.type === 'color' &&
+                          Expression.acceptsColor(template, target)),
                     )
-                  : targets.every((target) =>
-                      Token.accepts(part.group, target),
+                  : targets.every(
+                      (target) =>
+                        Token.acceptsReference(part, target) ||
+                        (part.group === 'color' &&
+                          Expression.acceptsColor(template, target)),
                     ))
               ) {
                 report(
@@ -1003,7 +1039,7 @@ export function extract(options: extract.Options): extract.ReturnType {
             reference &&
             Token.is(reference) &&
             !targets.every((target) =>
-              Token.accepts(reference.group, target),
+              Token.acceptsReference(reference, target),
             ) &&
             !targets.every((target) =>
               dynamicValues?.accepts(
@@ -1101,6 +1137,34 @@ export function extract(options: extract.Options): extract.ReturnType {
         values[key] = value(property.value, [name, ...prefix, key])
       }
 
+      if (typeof values.typography === 'string') {
+        const theme = themes?.styles.get(call.start)?.theme
+        const mappings = theme?.[Token.definition].contract.shorthands
+        const explicit = new Set(
+          Object.keys(values).flatMap((key) => mappings?.[key] ?? [key]),
+        )
+        const parsed = Value.parse(values.typography, 'fontFamily')
+        const keys = Typography.keys(
+          theme,
+          parsed && !('invalid' in parsed) ? parsed.value : values.typography,
+          explicit,
+        )
+        const queries = keys.filter(Typography.condition).length
+        for (const property of properties) {
+          if (property.type !== 'Property') continue
+          const key =
+            property.key.type === 'Identifier'
+              ? property.key.name
+              : property.key.type === 'Literal'
+                ? property.key.value
+                : undefined
+          if (key === 'typography') {
+            typography.set(property.start, keys.length - queries)
+            if (queries) typographyQueries.set(property.start, queries)
+          }
+        }
+      }
+
       return values
     }
 
@@ -1110,7 +1174,7 @@ export function extract(options: extract.Options): extract.ReturnType {
     try {
       const definition = define(
         { [name]: values },
-        { locations, theme: themes?.styles.get(call.start)?.theme },
+        { locations, vars: themes?.styles.get(call.start)?.theme },
       )
 
       function validate(style: Style.NamedStyle, path: readonly string[]) {
@@ -1166,7 +1230,7 @@ export function extract(options: extract.Options): extract.ReturnType {
           matches,
           value: define(
             { [`${name}-${index}`]: object(value) },
-            { locations, theme: themes?.styles.get(call.start)?.theme },
+            { locations, vars: themes?.styles.get(call.start)?.theme },
           ),
         })),
       }
@@ -1185,6 +1249,8 @@ export function extract(options: extract.Options): extract.ReturnType {
           ? { body: argument }
           : {}),
         ...(shorthands ? { shorthands } : {}),
+        ...(typography.size ? { typography } : {}),
+        ...(typographyQueries.size ? { typographyQueries } : {}),
         ...(themes?.styles.get(call.start)?.output
           ? { output: 'html' as const }
           : {}),
@@ -1239,6 +1305,7 @@ export function extract(options: extract.Options): extract.ReturnType {
           identity: namespace,
           links: options[Themes.context]?.links,
           program,
+          scopes: themes?.scopeApplications,
           source: options.source,
           styles,
         })) {
@@ -1315,7 +1382,7 @@ export function extract(options: extract.Options): extract.ReturnType {
       const rendered = Css.compile({
         styles: { styles: [] },
         contributions: contributionData,
-        themes: themes?.themes,
+        vars: themes?.themes,
       }).css
       AtRules.transform({
         filename: options.moduleId,
@@ -1453,7 +1520,7 @@ export function extract(options: extract.Options): extract.ReturnType {
         }
       : {}),
     themeReferences: Object.freeze(themes?.references ?? []),
-    themes: themes?.themes ?? Object.freeze({}),
+    vars: themes?.themes ?? Object.freeze({}),
   })
 }
 
@@ -1485,7 +1552,7 @@ export declare namespace extract {
     readonly contributions?: readonly Css.Contribution[] | undefined
     readonly contributionCalls?: readonly Contributions.Call[] | undefined
     /** Explicit variable contracts replaced by fixed slot data. */
-    readonly variableCalls?: readonly Variables.Call[] | undefined
+    readonly variableCalls?: readonly Vars.Call[] | undefined
     /** Direct calls in source order. */
     readonly calls: readonly Call[]
     /** Validated definitions accepted by Css.compile. */
@@ -1512,7 +1579,7 @@ export declare namespace extract {
     /** Resolved authoring exports when extracted as part of a source graph. */
     readonly themeExports?: Readonly<Record<string, Themes.Link>> | undefined
     /** Stable scope keys and validated local theme definitions. */
-    readonly themes: Readonly<Record<string, Theme.Definition>>
+    readonly vars: Readonly<Record<string, Theme.Definition>>
   }
 }