zyzz 0.0.3 → 0.0.6

package/src/compiler/Transform.ts

@@ -43,7 +43,7 @@ export function compile(options: compile.Options): compile.ReturnType {
         )
       portableNames[call.name] = call.portable
     }
-    for (const [name, theme] of Object.entries(extracted.themes))
+    for (const [name, theme] of Object.entries(extracted.vars))
       if (
         (Object.keys(theme[Token.definition].values).length ||
           extracted.themeCalls.some(
@@ -57,7 +57,7 @@ export function compile(options: compile.Options): compile.ReturnType {
         !theme[Token.definition].contract[Token.identity]?.startsWith('id-')
       )
         throw new Error(
-          'CSS-only themes require an explicit id on Config.create or Theme.define.',
+          'CSS-only themes require an explicit id on Config.create or Vars.define.',
         )
     for (const call of extracted.contributionCalls ?? [])
       if (
@@ -138,7 +138,9 @@ export function compile(options: compile.Options): compile.ReturnType {
               ? property.key.name
               : property.key.type === 'Literal'
                 ? property.key.value
-                : undefined) !== 'themes',
+                : undefined) !== 'themes' &&
+            (property.key.type !== 'Identifier' ||
+              property.key.name !== 'variables'),
         )
       )
         unusedSelections.add(Expression.unwrap(node.init).start)
@@ -215,7 +217,7 @@ export function compile(options: compile.Options): compile.ReturnType {
       }
     })(),
     contributions: extracted.contributions,
-    themes: Object.keys(extracted.themes).length ? extracted.themes : undefined,
+    vars: Object.keys(extracted.vars).length ? extracted.vars : undefined,
   })
 
   let runtime = '__zyzzProps'
@@ -461,7 +463,7 @@ export function compile(options: compile.Options): compile.ReturnType {
           .join(',')
 
         const className = JSON.stringify(classes[call.name])
-        const value = `(input${typed ? `:Parameters<${type}>[0]` : ''})=>{${reads}const external=input.className;const style=input.style;return {className:external?${className}+" "+external:${className},style:{...input.variables,...style,${assignments}}}}`
+        const value = `(input${typed ? `:Parameters<${type}>[0]` : ''})=>{${reads}const external=input.className;const style=input.style;return {className:external?${className}+" "+external:${className},style:{...input.vars,...style,${assignments}}}}`
         const result = composeHtml
           ? `${compositionHtml}.bind(${value})`
           : call.output === 'html'
@@ -540,11 +542,12 @@ export function compile(options: compile.Options): compile.ReturnType {
   }
 
   for (const call of extracted.themeCalls) {
-    const scope = (name: string) => ({ className: emitted.themes[name] })
+    const scope = (name: string) => ({ className: emitted.vars[name] })
 
     const props = (() => {
+      if (call.variableSet) return '{}'
       if (!call.members)
-        return `{className:${JSON.stringify(emitted.themes[call.name])}}`
+        return `{className:${JSON.stringify(emitted.vars[call.name])}}`
 
       const script = extracted.themeScripts?.includes(call.name)
       const root = extracted.themeAppearances?.includes(call.name)
@@ -559,19 +562,48 @@ export function compile(options: compile.Options): compile.ReturnType {
           : ''
         const rootOptions =
           storage || defaultTheme
-            ? `,${JSON.stringify({ ...(defaultTheme ? { defaultTheme } : {}), ...(storage ? { storageKey: storage } : {}) })}`
+            ? `,${JSON.stringify({ ...(defaultTheme ? { defaultVars: defaultTheme } : {}), ...(storage ? { storageKey: storage } : {}) })}`
             : ''
 
         return `${root ? `appearance:${appearance}.root(${entries}${rootOptions}),` : ''}${script ? `script:${appearance}.create(${entries}${scriptOptions}),` : ''}`
       }
 
+      if (call.variableConfig) {
+        const selected =
+          extracted.themeSelections?.includes(call.name) ||
+          Object.values(extracted.themeExports ?? {}).some(
+            (link) =>
+              link.call.name === call.name &&
+              link.kind === 'config' &&
+              !link.call.initialization &&
+              !link.call.root,
+          )
+        const entries = call.options?.themes
+          ? Object.entries(call.members)
+              .filter(([key]) => {
+                const path = JSON.parse(key) as string[]
+                return path[0] === 'themes' && path.length === 2
+              })
+              .map(([key, name]) => [
+                (JSON.parse(key) as string[])[1],
+                emitted.vars[name],
+              ])
+          : [['default', emitted.vars[call.name]]]
+        const fallback = call.options?.defaultTheme ?? 'default'
+        if (!selected)
+          return `{${helpers(JSON.stringify(call.options?.themes ? entries : []), call.options?.themes ? String(fallback) : undefined).replace(/,$/, '')}}`
+        usesSelection = true
+        const selector = `${selection}.create(${JSON.stringify(entries)},${call.options?.output === 'html'},'set',${JSON.stringify(fallback)})`
+        return `{${helpers(JSON.stringify(call.options?.themes ? entries : []), call.options?.themes ? String(fallback) : undefined)}vars:/*#__PURE__*/${selector}}`
+      }
+
       if (call.options?.themes) {
         const catalog = Object.fromEntries(
           Object.entries(call.members)
             .filter(([key]) => (JSON.parse(key) as string[]).length === 2)
             .map(([key, name]) => [
               (JSON.parse(key) as string[])[1]!,
-              emitted.themes[name],
+              emitted.vars[name],
             ]),
         )
 
@@ -595,7 +627,7 @@ export function compile(options: compile.Options): compile.ReturnType {
     })()
 
     const assertion = /\.[cm]?tsx?$/.test(options.moduleId)
-      ? ` as ${call.type ?? `import('zyzz').Theme.Definition<${call.tokenType}>`}`
+      ? ` as ${call.type ?? `import('zyzz').Vars.Definition<${call.tokenType}>`}`
       : ''
 
     module.overwrite(call.start, call.end, `(${props}${assertion})`)
@@ -607,7 +639,7 @@ export function compile(options: compile.Options): compile.ReturnType {
         module.overwrite(
           alias.start,
           alias.end,
-          `(${options.source.slice(alias.start, alias.end)} as ${alias.type ?? `import('zyzz').Theme.Definition<${alias.tokenType}>`})`,
+          `(${options.source.slice(alias.start, alias.end)} as ${alias.type ?? `import('zyzz').Vars.Definition<${alias.tokenType}>`})`,
         )
 
       continue
@@ -619,7 +651,7 @@ export function compile(options: compile.Options): compile.ReturnType {
       ? `{${members.map((member) => `${member}:undefined`).join(',')}}`
       : 'undefined'
     const type =
-      alias.type ?? `import('zyzz').Theme.Definition<${alias.tokenType}>`
+      alias.type ?? `import('zyzz').Vars.Definition<${alias.tokenType}>`
     const assertion = /\.[cm]?tsx?$/.test(options.moduleId)
       ? ` as unknown as ${alias.destructured ? `{${members.map((member) => `readonly ${member}:${type}['${member}']`).join(';')}}` : `${type}['${member}']`}`
       : ''
@@ -667,7 +699,7 @@ export function compile(options: compile.Options): compile.ReturnType {
       module.overwrite(
         reference.start,
         reference.end,
-        JSON.stringify(emitted.themes[reference.name]),
+        JSON.stringify(emitted.vars[reference.name]),
       )
 
   replacements.push(
@@ -692,7 +724,7 @@ export function compile(options: compile.Options): compile.ReturnType {
         specifier.importKind === 'type' ||
         !(
           node.source.value === 'zyzz'
-            ? ['Config', 'cx', 'style', 'Theme', 'variable', 'variants']
+            ? ['Config', 'cx', 'style', 'Vars', 'variable', 'variants']
             : [
                 'Css',
                 'cssFunction',
@@ -830,14 +862,14 @@ export function compile(options: compile.Options): compile.ReturnType {
   const themeOwners = new Map(
     extracted.themeCalls.flatMap((call) =>
       [...new Set([call.name, ...Object.values(call.members ?? {})])].map(
-        (name) => [emitted.themes[name], { ...call, name }] as const,
+        (name) => [emitted.vars[name], { ...call, name }] as const,
       ),
     ),
   )
 
   const linkedOwners = new Map(
     Object.entries(options[Themes.context]?.owners ?? {}).map(
-      ([key, owner]) => [emitted.themes[key], owner],
+      ([key, owner]) => [emitted.vars[key], owner],
     ),
   )
 
@@ -873,9 +905,7 @@ export function compile(options: compile.Options): compile.ReturnType {
       Css.compile({
         styles: { styles: [] },
         contributions: [contribution.definition],
-        themes: Object.keys(extracted.themes).length
-          ? extracted.themes
-          : undefined,
+        vars: Object.keys(extracted.vars).length ? extracted.vars : undefined,
       }).contributionCss ?? ''
     if (!rendered) continue
     for (const _ of rendered.split('\n')) {
@@ -933,7 +963,7 @@ export function compile(options: compile.Options): compile.ReturnType {
           return rule
         }
 
-        if (Object.values(emitted.themes).includes(name)) {
+        if (Object.values(emitted.vars).includes(name)) {
           // Packed theme declarations have no authored source in this graph.
           Mapping.addMapping(cssMap, { generated: { column: 0, line } })
 
@@ -947,6 +977,19 @@ export function compile(options: compile.Options): compile.ReturnType {
           return rule
         }
 
+        if (
+          rule.startsWith(':root{') ||
+          rule.startsWith(':where(*){--z-f') ||
+          (rule.startsWith('@media ') &&
+            (rule.includes(':root{') ||
+              Object.values(emitted.vars).some((name) =>
+                rule.includes(`.${name}{`),
+              )))
+        ) {
+          Mapping.addMapping(cssMap, { generated: { column: 0, line } })
+          return rule
+        }
+
         const selector = `.${names.get(name)!}`
         const call = owners.get(name)!
 
@@ -995,11 +1038,18 @@ export function compile(options: compile.Options): compile.ReturnType {
                   ? String(property.key.value)
                   : ''
 
-            if (key === 'typography' && call.typography?.has(property.start))
+            if (key === 'typography' && call.typography?.has(property.start)) {
+              conditionNodes.push(
+                ...Array.from(
+                  { length: call.typographyQueries?.get(property.start) ?? 0 },
+                  () => property,
+                ),
+              )
               return Array.from(
                 { length: call.typography.get(property.start)! },
                 () => property,
               )
+            }
 
             const authoredLocations: readonly Ast.Node[] =
               value.type === 'ArrayExpression'
@@ -1111,7 +1161,7 @@ export function compile(options: compile.Options): compile.ReturnType {
       sourcesContent: map.sourcesContent!,
       version: 3 as const,
     },
-    themes: emitted.themes,
+    vars: emitted.vars,
   })
 }
 
@@ -1151,7 +1201,7 @@ export declare namespace compile {
     /** Standard rewritten-module map, including original source content. */
     readonly map: Mapping.EncodedSourceMap
     /** Stable scope classes keyed by local module/binding identity. */
-    readonly themes: Readonly<Record<string, string>>
+    readonly vars: Readonly<Record<string, string>>
   }
 }
 

package/src/compiler/internal/Compositions.ts

@@ -193,6 +193,7 @@ export function collect(options: collect.Options) {
   )) {
     const selected: Source.Call[] = []
     const inputs: NonNullable<Source.Call['runtimeComposition']>[number][] = []
+    const outputs = new Set<'html' | undefined>()
     let runtime = false
     let conditions = 0
     const attributes = new Map<string, string>()
@@ -256,7 +257,6 @@ export function collect(options: collect.Options) {
       const resolved = bindings.resolve(expression, nodes)
       const conditional =
         resolved.type === 'LogicalExpression' && resolved.operator === '&&'
-      const condition = conditional ? conditions++ : undefined
       const value = conditional
         ? bindings.resolve(resolved.right, nodes)
         : resolved
@@ -305,6 +305,19 @@ export function collect(options: collect.Options) {
           'Composition requires statically known local style applications.',
           value,
         )
+      const scope = options.scopes?.get(value.start)
+      if (scope?.end === value.end) {
+        outputs.add(scope.output)
+        inputs.push({
+          start: expression.start,
+          end: expression.end,
+          name: '',
+          owners: [],
+        })
+        runtime = true
+        continue
+      }
+      const condition = conditional ? conditions++ : undefined
       const nested = calls.get(value.start)
       if (nested?.compositionCases && resolved !== expression)
         throw new Themes.InvalidError(
@@ -379,7 +392,8 @@ export function collect(options: collect.Options) {
           options.source.slice(application.start, application.calleeEnd),
         )
     }
-    if (selected.some((call) => call.output !== selected[0]?.output))
+    for (const call of selected) outputs.add(call.output)
+    if (outputs.size > 1)
       throw new Themes.InvalidError(
         'Composition cannot mix HTML and React props.',
         node,
@@ -497,6 +511,12 @@ export function collect(options: collect.Options) {
             ),
           }
         : {}),
+      typography: new Map(
+        selected.flatMap((call) => [...(call.typography ?? [])]),
+      ),
+      typographyQueries: new Map(
+        selected.flatMap((call) => [...(call.typographyQueries ?? [])]),
+      ),
       name,
       start: node.start,
       end: node.end,
@@ -507,7 +527,7 @@ export function collect(options: collect.Options) {
         end: node.end,
         properties: selected.flatMap((call) => properties(call)),
       },
-      ...(selected[0]?.output ? { output: selected[0].output } : {}),
+      ...(outputs.has('html') ? { output: 'html' as const } : {}),
       ...(identities.length ? { identity: identities.join(' ') } : {}),
     }
     calls.set(node.start, call)
@@ -538,6 +558,12 @@ export function collect(options: collect.Options) {
           start: call.start,
           end: call.end,
           compositionCase: true,
+          typography: new Map(
+            included.flatMap((call) => [...(call.typography ?? [])]),
+          ),
+          typographyQueries: new Map(
+            included.flatMap((call) => [...(call.typographyQueries ?? [])]),
+          ),
           body: {
             ...call.body!,
             properties: included.flatMap((call) => properties(call)),
@@ -604,6 +630,13 @@ export declare namespace collect {
     readonly links?: Readonly<Record<string, Themes.Link>> | undefined
     /** Parsed module with lexical binding scopes. */
     readonly program: Ast.Program
+    /** Validated variable scope applications preserved as runtime props. */
+    readonly scopes?:
+      | ReadonlyMap<
+          number,
+          { readonly end: number; readonly output: 'html' | undefined }
+        >
+      | undefined
     /** Source used to preserve initialization-sensitive binding reads. */
     readonly source: string
     /** Validated ordered style bodies. */

package/src/compiler/internal/Configurations.ts

@@ -4,21 +4,32 @@
  */
 import * as Identity from '../../internal/Identity.js'
 import type * as Ast from '@oxc-project/types'
-import * as Config from '../../Config.js'
+import * as Config from '../../internal/Configuration.js'
+import * as PublicConfig from '../../Config.js'
 import * as Shorthands from '../../internal/Shorthands.js'
 import * as Token from '../../internal/Token.js'
-import * as Theme from '../../Theme.js'
+import * as Theme from '../../internal/Theme.js'
+import * as VariableSets from '../../internal/VariableSets.js'
+import * as Vars from '../../Vars.js'
 import type * as Themes from './Themes.js'
 
 /** Reads a direct configuration factory without executing authored expressions. */
 export function collect(options: collect.Options): Themes.Link {
   function data(node: Ast.Node): unknown {
     const linked = options.resolve(node)
-    if (linked?.kind === 'theme') return linked.definition
+    if (
+      linked?.kind === 'theme' ||
+      (linked?.call.variableConfig && linked.call.selection)
+    )
+      return linked.definition[Token.definition].contract.variableSet
+        ? VariableSets.from(linked.definition[Token.definition])
+        : linked.definition
 
     if (node.type === 'TSAsExpression' || node.type === 'TSSatisfiesExpression')
       return data(node.expression)
 
+    if (node.type === 'Literal' && node.value === false) return false
+
     if (node.type === 'ArrayExpression')
       return node.elements.map((node) => {
         if (!node || node.type === 'SpreadElement')
@@ -77,12 +88,40 @@ export function collect(options: collect.Options): Themes.Link {
       'Config.create accepts one literal options object.',
     )
 
-  const input = (
+  let input = (
     options.expression.arguments.length
       ? data(options.expression.arguments[0]!)
       : {}
   ) as Config.create.Options
 
+  PublicConfig.create(input as unknown as PublicConfig.create.Options)
+
+  const authored = input as unknown as Config.VariableOptions
+  const variableMode = authored.vars !== undefined
+  if (variableMode) {
+    Config.create(authored)
+    const wrap = (value: Vars.Definition | Vars.Values) =>
+      VariableSets.theme(
+        Token.definition in value
+          ? (value as Vars.Definition)
+          : Vars.define(value as Vars.Values),
+        authored.mappings,
+      )
+    const { vars, defaultVars, mappings: _mappings, ...rest } = authored
+    input =
+      defaultVars === undefined
+        ? { ...rest, theme: wrap(vars as Vars.Definition) }
+        : {
+            ...rest,
+            defaultTheme: defaultVars,
+            themes: Object.fromEntries(
+              Object.entries(vars).map(([key, value]) => [
+                key,
+                wrap(value as Vars.Definition),
+              ]),
+            ),
+          }
+  }
   const config = Config.create(input)
 
   const catalog = (() => {
@@ -102,8 +141,17 @@ export function collect(options: collect.Options): Themes.Link {
       ? options.name
       : Identity.requireId(input.id, 'Config.create')
   const contract = Object.freeze({
+    ...(variableMode
+      ? {
+          variableSet: true,
+          mappings: VariableSets.mappings(authored.mappings),
+        }
+      : {}),
     [Token.identity]: identity,
     cssOutput: input.cssOutput ?? 'atomic',
+    ...(input.defaultLayer !== undefined
+      ? { defaultLayer: input.defaultLayer }
+      : {}),
     ...(input.shorthands
       ? { shorthands: Shorthands.read(input.shorthands) }
       : {}),
@@ -151,6 +199,16 @@ export function collect(options: collect.Options): Themes.Link {
   if ('themes' in config && selected)
     members[JSON.stringify(['theme'])] = selected
 
+  if (variableMode && selected)
+    members[JSON.stringify(['vars'])] = {
+      ...selected,
+      call: {
+        ...selected.call,
+        directVariables: true,
+        type: `import('zyzz').Vars.References<${selected.call.tokenType}>`,
+      },
+    }
+
   const definition =
     selected?.definition ?? Token.bind(Theme.define({}), contract)
 
@@ -160,10 +218,14 @@ export function collect(options: collect.Options): Themes.Link {
         return {
           defaultTheme: input.defaultTheme,
           themes: Object.fromEntries(
-            Object.entries(catalog).map(([name, theme]) => [
-              name,
-              { ...values(theme.tokens), ...theme[Token.definition].queries },
-            ]),
+            Object.keys(catalog).map((name) => {
+              const theme =
+                members[JSON.stringify(['themes', name])]!.definition!
+              return [
+                name,
+                { ...values(theme.tokens), ...theme[Token.definition].queries },
+              ]
+            }),
           ),
         }
       }
@@ -171,8 +233,8 @@ export function collect(options: collect.Options): Themes.Link {
       if ('theme' in config) {
         return {
           theme: {
-            ...values(config.theme.tokens),
-            ...config.theme[Token.definition].queries,
+            ...values(definition.tokens),
+            ...definition[Token.definition].queries,
           },
         }
       }
@@ -180,6 +242,9 @@ export function collect(options: collect.Options): Themes.Link {
       return {}
     })(),
     ...(input.cssOutput ? { cssOutput: input.cssOutput } : {}),
+    ...(input.defaultLayer !== undefined
+      ? { defaultLayer: input.defaultLayer }
+      : {}),
     ...(input.shorthands ? { shorthands: input.shorthands } : {}),
     ...(input.output ? { output: input.output } : {}),
     ...(input.layers ? { layers: input.layers } : {}),
@@ -189,6 +254,9 @@ export function collect(options: collect.Options): Themes.Link {
   return {
     binding: options.name,
     call: {
+      ...(variableMode
+        ? { variableConfig: true, variableMappings: authored.mappings }
+        : {}),
       appearance: true,
       script: true,
       end: options.expression.end,
@@ -199,7 +267,9 @@ export function collect(options: collect.Options): Themes.Link {
       options: normalized,
       start: options.expression.start,
       tokenType: selected?.call.tokenType ?? '{}',
-      type: `import('zyzz').Config.create.ReturnType<${type(normalized)}>`,
+      type: variableMode
+        ? `import('zyzz').Config.VariableConfig<${type({ ...normalized, theme: undefined, themes: undefined, defaultTheme: undefined, vars: 'themes' in normalized ? normalized.themes : normalized.theme, ...('themes' in normalized ? { defaultVars: normalized.defaultTheme } : {}), ...(authored.mappings !== undefined ? { mappings: VariableSets.mappings(authored.mappings) } : {}) })}>`
+        : `import('zyzz').Config.create.ReturnType<${type(normalized)}>`,
     },
     definition,
     kind: 'config',
@@ -224,10 +294,12 @@ export declare namespace collect {
 
 /** Encodes validated literal options as a declaration type, never executable text. */
 export function type(value: unknown): string {
+  if (Token.is(value)) return `import('zyzz').Vars.Reference<'${value.group}'>`
   if (Array.isArray(value)) return `readonly [${value.map(type).join(',')}]`
   if (!value || typeof value !== 'object') return JSON.stringify(value)
 
   return `{${Object.entries(value)
+    .filter(([, value]) => value !== undefined)
     .map(([key, value]) => `readonly ${JSON.stringify(key)}:${type(value)}`)
     .join(';')}}`
 }