zyzz 0.0.3 → 0.0.5

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,13 +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 Typography from '../internal/Typography.js'
 import * as Value from '../internal/Value.js'
-import * as Variables from './internal/Variables.js'
+import * as Vars from './internal/Vars.js'
 import * as Walker from 'oxc-walker'
 
 // JavaScript extraction supplies untyped values. Keep structural checks without
@@ -49,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. */
@@ -101,6 +101,8 @@ export type Call = {
   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. */
@@ -178,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) {
@@ -220,7 +243,7 @@ export function extract(options: extract.Options): extract.ReturnType {
 
   const variables = (() => {
     try {
-      return Variables.collect(
+      return Vars.collect(
         program,
         namespace,
         scopeTracker,
@@ -294,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)
@@ -348,6 +371,7 @@ export function extract(options: extract.Options): extract.ReturnType {
             name === 'cx' ||
             name === 'style' ||
             name === 'Theme' ||
+            name === 'Vars' ||
             name === 'variable' ||
             name === 'variants'
           )
@@ -645,6 +669,7 @@ 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(
@@ -695,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
         }
@@ -984,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(
@@ -1008,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(
@@ -1113,10 +1144,12 @@ export function extract(options: extract.Options): extract.ReturnType {
           Object.keys(values).flatMap((key) => mappings?.[key] ?? [key]),
         )
         const parsed = Value.parse(values.typography, 'fontFamily')
-        const count = Typography.fields(
+        const keys = Typography.keys(
           theme,
           parsed && !('invalid' in parsed) ? parsed.value : values.typography,
-        ).filter((field) => !explicit.has(field)).length
+          explicit,
+        )
+        const queries = keys.filter(Typography.condition).length
         for (const property of properties) {
           if (property.type !== 'Property') continue
           const key =
@@ -1125,7 +1158,10 @@ export function extract(options: extract.Options): extract.ReturnType {
               : property.key.type === 'Literal'
                 ? property.key.value
                 : undefined
-          if (key === 'typography') typography.set(property.start, count)
+          if (key === 'typography') {
+            typography.set(property.start, keys.length - queries)
+            if (queries) typographyQueries.set(property.start, queries)
+          }
         }
       }
 
@@ -1138,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[]) {
@@ -1194,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 },
           ),
         })),
       }
@@ -1214,6 +1250,7 @@ export function extract(options: extract.Options): extract.ReturnType {
           : {}),
         ...(shorthands ? { shorthands } : {}),
         ...(typography.size ? { typography } : {}),
+        ...(typographyQueries.size ? { typographyQueries } : {}),
         ...(themes?.styles.get(call.start)?.output
           ? { output: 'html' as const }
           : {}),
@@ -1268,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,
         })) {
@@ -1344,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,
@@ -1482,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({}),
   })
 }
 
@@ -1514,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. */
@@ -1541,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>>
   }
 }
 

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>>
   }
 }