zyzz 0.0.20 → 0.0.22

package/src/compiler/Source.ts

@@ -32,6 +32,8 @@ import * as Themes from './internal/Themes.js'
 import * as ThemeValues from '../web/internal/Themes.js'
 import * as Token from '../internal/Token.js'
 import * as Literal from '../internal/Literal.js'
+import * as Names from './internal/Names.js'
+import * as ClassName from '../web/internal/ClassName.js'
 import * as Typography from '../internal/Typography.js'
 import * as Value from '../internal/Value.js'
 import * as Vars from './internal/Vars.js'
@@ -57,6 +59,10 @@ export type Call = {
     | undefined
   /** Class identity available without source rewriting. */
   readonly portable?: string | undefined
+  /** Readable authored binding used for contextual CSS names. */
+  readonly cssName?: string | undefined
+  /** Explicit configuration namespace for emitted CSS. */
+  readonly cssNamespace?: string | undefined
   /** Flattened definition identities for nested compositions. */
   readonly portableInputs?: readonly string[] | undefined
   /** Ownership retained by a separately compiled callable. */
@@ -214,6 +220,7 @@ export function extract(options: extract.Options): extract.ReturnType {
   }
 
   const program = parsed.program
+  const authoredNames = Names.collect(program)
   const scopeTracker = new Scope.Tracker({ preserveExitedScopes: true })
 
   Walker.walk(program, { scopeTracker })
@@ -262,6 +269,7 @@ export function extract(options: extract.Options): extract.ReturnType {
   const themes = (() => {
     try {
       return Themes.collect(program, {
+        native: options.target === 'native',
         staticBindings: staticData.bindings,
         namespace: `src-${Identity.label(
           options.moduleId
@@ -329,7 +337,7 @@ export function extract(options: extract.Options): extract.ReturnType {
       contributions.read(node, parent, binding)
 
       try {
-        if (variables.reference(node, parent, binding)) return
+        if (variables.reference(node, parent, ancestors, binding)) return
       } catch (error) {
         if (!(error instanceof Themes.InvalidError)) throw error
 
@@ -340,7 +348,16 @@ export function extract(options: extract.Options): extract.ReturnType {
 
       if (themes)
         try {
-          if (themes.reference(node, parent, ancestors, binding)) return
+          if (
+            themes.reference(
+              node,
+              parent,
+              ancestors,
+              binding,
+              (name) => scopeTracker.getDeclaration(name) ?? null,
+            )
+          )
+            return
         } catch (error) {
           if (!(error instanceof Themes.InvalidError)) throw error
 
@@ -540,6 +557,13 @@ export function extract(options: extract.Options): extract.ReturnType {
         pending,
         options[Themes.context]?.links,
         selectorKeys,
+        new Map(
+          [...(themes?.styles ?? [])].flatMap(([start, context]) => {
+            const id = context.theme[Token.definition].contract[Token.identity]
+            return id?.startsWith('id-') ? [[start, id.slice(3)] as const] : []
+          }),
+        ),
+        options.moduleId,
       )
     } catch (error) {
       if (!(error instanceof Themes.InvalidError)) throw error
@@ -549,7 +573,13 @@ export function extract(options: extract.Options): extract.ReturnType {
     }
   })()
 
+  const cssNameCounts = new Map<string, number>()
   for (const call of pending) {
+    const name = authoredNames.get(call.start)!
+    cssNameCounts.set(name, (cssNameCounts.get(name) ?? 0) + 1)
+  }
+  const cssNameIndices = new Map<string, number>()
+  for (const [callIndex, call] of pending.entries()) {
     const explicitId = (() => {
       try {
         return Identifiers.explicit(call)
@@ -558,10 +588,29 @@ export function extract(options: extract.Options): extract.ReturnType {
         return undefined
       }
     })()
+    const contractIdentity = themes?.styles.get(call.start)?.theme[
+      Token.definition
+    ].contract[Token.identity]
+    const cssNamespace = contractIdentity?.startsWith('id-')
+      ? contractIdentity.slice(3)
+      : undefined
+    const authoredName = authoredNames.get(call.start)!
+    const nameIndex = cssNameIndices.get(authoredName) ?? 0
+    cssNameIndices.set(authoredName, nameIndex + 1)
+    const cssName =
+      explicitId !== undefined
+        ? Identity.name(explicitId)
+        : `${Identity.compact(options.moduleId).slice(-6)}-${
+            authoredName === 'style'
+              ? `style-${callIndex}`
+              : cssNameCounts.get(authoredName)! > 1
+                ? `${authoredName}-${nameIndex}`
+                : authoredName
+          }`
     const definitionId =
       explicitId === undefined
-        ? `${namespace}-${call.start}`
-        : Identity.requireId(explicitId, 'style')
+        ? `${cssNamespace ? `${cssNamespace}-` : ''}${cssName}`
+        : `id-${cssNamespace ? `${cssNamespace}-` : ''}${Identity.requireId(explicitId, 'style').slice(3)}`
     let argument = call.arguments[0]
 
     if (call.arguments.length === 0)
@@ -1305,10 +1354,12 @@ export function extract(options: extract.Options): extract.ReturnType {
                     !definition.styles[0]!.targets)
                 )
                   return undefined
-                return Identity.style(definition.styles[0]!)
+                return Identity.style(definition.styles[0]!, cssNamespace)
               })(),
             }
           : {}),
+        cssName,
+        cssNamespace,
         end: call.end,
         name,
         start: call.start,
@@ -1328,6 +1379,7 @@ export function extract(options: extract.Options): extract.ReturnType {
   }
 
   try {
+    let compositionIndex = 0
     for (const entry of options.target === 'native'
       ? []
       : Compositions.collect({
@@ -1339,7 +1391,16 @@ export function extract(options: extract.Options): extract.ReturnType {
           source: options.source,
           styles,
         })) {
-      calls.push(...(entry.cases ?? []).map((entry) => entry.call), entry.call)
+      const authored = authoredNames.get(entry.call.start)
+      const name = authored && authored !== 'style' ? authored : 'composition'
+      const cssName = `${name}-${compositionIndex++}-${entry.call.cssName ?? 'style'}`
+      calls.push(
+        ...(entry.cases ?? []).map((value, index) => ({
+          ...value.call,
+          cssName: `${cssName}-${index}`,
+        })),
+        { ...entry.call, cssName },
+      )
       styles.push(
         ...(entry.cases ?? []).map((entry) => entry.style),
         entry.style,
@@ -1469,7 +1530,17 @@ export function extract(options: extract.Options): extract.ReturnType {
     const style = call && styles.find((style) => style.name === call.name)
     return {
       ...link,
-      ...(call && style ? { style: PackedStyles.create(call, style) } : {}),
+      ...(call && style
+        ? {
+            style: PackedStyles.create(
+              {
+                ...call,
+                nativeContext: themes?.nativeContext(call.start, call.end),
+              },
+              style,
+            ),
+          }
+        : {}),
       ...(link.members
         ? {
             members: Object.fromEntries(
@@ -1483,6 +1554,35 @@ export function extract(options: extract.Options): extract.ReturnType {
     }
   }
 
+  const callsByName = new Map(calls.map((call) => [call.name, call]))
+  const definition = {
+    styles: Object.freeze(styles),
+    [ClassName.labels]: Object.freeze(
+      Object.fromEntries(
+        styles.map((style) => {
+          let name = style.name
+          let call = callsByName.get(name)
+          while (!call && name.includes('-')) {
+            name = name.slice(0, name.lastIndexOf('-'))
+            call = callsByName.get(name)
+          }
+          return [
+            style.name,
+            {
+              name: call?.cssName
+                ? call.cssName + style.name.slice(call.name.length)
+                : style.name,
+              namespace: call?.cssNamespace,
+            },
+          ]
+        }),
+      ),
+    ),
+  }
+  Object.defineProperty(definition, ClassName.labels, { enumerable: false })
+  const selections =
+    options.target === 'native' ? themes?.selectionUses : themes?.selections
+
   return Object.freeze({
     namespaces: contributionData.filter(
       (value): value is Extract<Css.Contribution, { kind: 'namespace' }> =>
@@ -1522,7 +1622,7 @@ export function extract(options: extract.Options): extract.ReturnType {
           )
         }),
     ),
-    styles: Object.freeze({ styles: Object.freeze(styles) }),
+    styles: Object.freeze(definition),
     ...(variables.calls.length
       ? { variableCalls: Object.freeze(variables.calls) }
       : {}),
@@ -1533,8 +1633,8 @@ export function extract(options: extract.Options): extract.ReturnType {
     ...(themes?.scripts.size
       ? { themeScripts: Object.freeze([...themes.scripts]) }
       : {}),
-    ...(themes?.selections.size
-      ? { themeSelections: Object.freeze([...themes.selections]) }
+    ...(selections?.size
+      ? { themeSelections: Object.freeze([...selections]) }
       : {}),
     themeCalls: Object.freeze(themes?.calls ?? []),
     ...(themes?.staticTokens.length
@@ -1552,6 +1652,9 @@ export function extract(options: extract.Options): extract.ReturnType {
       : {}),
     themeReferences: Object.freeze(themes?.references ?? []),
     vars: themes?.themes ?? Object.freeze({}),
+    ...(themes?.varsReads.length
+      ? { nativeVars: Object.freeze(themes.varsReads) }
+      : {}),
   })
 }
 
@@ -1576,6 +1679,8 @@ export declare namespace extract {
 
   /** Ordered public compiler input and spans for later rewriting. */
   type ReturnType = {
+    /** Readonly native variable arguments and their complete catalogs. */
+    readonly nativeVars?: readonly Themes.VarsRead[] | undefined
     /** Module-owned namespace bindings retained when contributions are shared. */
     readonly namespaces?: readonly Namespace.Definition[] | undefined
     /** Static stylesheet effects and their source replacements. */

package/src/compiler/Transform.ts

@@ -7,6 +7,7 @@ import * as Token from '../internal/Token.js'
 import * as Applications from './internal/Applications.js'
 import type * as Ast from '@oxc-project/types'
 import * as Css from '../web/Css.js'
+import * as ClassName from '../web/internal/ClassName.js'
 import * as Expression from './internal/Expression.js'
 import MagicString from 'magic-string'
 import * as Mapping from '@jridgewell/gen-mapping'
@@ -71,11 +72,7 @@ export function compile(options: compile.Options): compile.ReturnType {
           'CSS-only named stylesheet declarations require an explicit id.',
         )
     for (const call of extracted.variableCalls ?? [])
-      if (
-        Object.values(call.slots).some(
-          (slot) => !slot.name.startsWith('--z-vid-'),
-        )
-      )
+      if (!call.explicit)
         throw new Error('CSS-only output requires an explicit variable id.')
   }
 
@@ -198,7 +195,7 @@ export function compile(options: compile.Options): compile.ReturnType {
   const emitted = Css.compile({
     [ThemeRules.shared]: options[ThemeRules.shared],
     development: options.development,
-    scope: options.moduleId,
+    [ClassName.labels]: extracted.styles[ClassName.labels],
     composition: options.composition,
     cssOutput: options.cssOutput,
     names: portable ? portableNames : undefined,
@@ -291,56 +288,19 @@ export function compile(options: compile.Options): compile.ReturnType {
       `${variables}.create(${JSON.stringify(call.slots.value)})`,
     )
 
-  const first = extracted.calls[0]
-  const scope = first ? first.name.slice(6, first.name.lastIndexOf('-')) : ''
   const identities = new Map(
     extracted.calls
       .filter((call) => call.identity)
       .map((call) => [call.name, call.identity!]),
   )
 
-  const modes = new Map(
-    extracted.styles.styles.map((style) => [style.name, style.cssOutput]),
-  )
-  const ownersByClass = new Map<string, string | false>()
-  for (const [style, value] of Object.entries(emitted.classes))
-    for (const name of value.split(' ').filter(Boolean))
-      ownersByClass.set(name, ownersByClass.has(name) ? false : style)
-
-  const names = new Map<string, string>()
-
-  for (const classes of Object.values(emitted.classes))
-    for (const name of classes.split(' ').filter(Boolean))
-      names.set(
-        name,
-        (() => {
-          const owner = ownersByClass.get(name)
-          const identity = owner && identities.get(owner)
-          if (
-            (modes.get(owner || '') ?? options.cssOutput) === 'grouped' &&
-            options.composition === 'independent' &&
-            name.startsWith('g_') &&
-            identity &&
-            !identity.includes(' ')
-          )
-            return identity
-          if (name.startsWith('g_')) return `g_${scope}_${name.slice(2)}`
-          return name.startsWith('z_base')
-            ? `z-${scope}-${name.slice(2)}`
-            : name
-        })(),
-      )
-
   const classes = Object.freeze(
     Object.fromEntries(
       Object.entries(emitted.classes).map(([name, value]) => [
         name,
         [
           ...new Set([
-            ...value
-              .split(' ')
-              .filter(Boolean)
-              .map((part) => names.get(part)!),
+            ...value.split(' ').filter(Boolean),
             ...(identities.has(name) &&
             (!portable || portableNames[name]?.startsWith('z-compose-'))
               ? [
@@ -930,8 +890,16 @@ export function compile(options: compile.Options): compile.ReturnType {
     (scoped ? scoped.split('\n') : [])
       .map((rule, index) => {
         const line = index + 1 + (prefix ? prefix.split('\n').length : 0)
-        const brace = rule.indexOf('{')
-        const name = rule.slice(1, brace)
+        const openers = new Map<number, number>()
+        const conditionStarts = declarationStarts(rule, true, openers)
+        const selectorStart =
+          conditionStarts.find((start) => rule[start] === '.') ?? 0
+        const brace = openers.get(selectorStart) ?? rule.indexOf('{')
+        const name = rule
+          .slice(selectorStart + 1, brace)
+          .replace(/\\([0-9a-f]+) ?/gi, (_, code: string) =>
+            String.fromCodePoint(Number.parseInt(code, 16)),
+          )
         const linkedOwner = linkedOwners.get(name)
 
         if (linkedOwner) {
@@ -995,11 +963,11 @@ export function compile(options: compile.Options): compile.ReturnType {
           return rule
         }
 
-        const selector = `.${names.get(name)!}`
+        const selector = `.${ClassName.selector(name)}`
         const call = owners.get(name)!
 
         Mapping.addMapping(cssMap, {
-          generated: { column: 0, line },
+          generated: { column: selectorStart, line },
           name: call.name,
           original: position(call.start),
           source: options.moduleId,
@@ -1071,8 +1039,6 @@ export function compile(options: compile.Options): compile.ReturnType {
 
         const ordered = declarations(style)
         const authored = locations(call.body ?? definitions.get(call.start)!)
-        const openers = new Map<number, number>()
-        const conditionStarts = declarationStarts(body, true, openers)
         const conditions: string[] = []
 
         function collectConditions(style: Style.NamedStyle) {
@@ -1084,17 +1050,25 @@ export function compile(options: compile.Options): compile.ReturnType {
         }
 
         collectConditions(style)
-        let conditionCursor = 0
+        const mappedConditions = new Set<number>()
 
         for (const start of conditionStarts) {
-          const condition = body.slice(start, openers.get(start))
-          const index = conditions.indexOf(condition, conditionCursor)
+          const condition = rule.slice(start, openers.get(start))
+          const index = conditions.findIndex(
+            (value, index) =>
+              value === condition && !mappedConditions.has(index),
+          )
           const node = conditionNodes[index]
           if (!node) continue
 
-          conditionCursor = index + 1
+          mappedConditions.add(index)
           Mapping.addMapping(cssMap, {
-            generated: { column: selector.length + start, line },
+            generated: {
+              column:
+                start +
+                (start > brace ? selector.length - (brace - selectorStart) : 0),
+              line,
+            },
             name: options.source.slice(node.key.start, node.key.end),
             original: position(node.key.start),
             source: options.moduleId,
@@ -1124,7 +1098,10 @@ export function compile(options: compile.Options): compile.ReturnType {
           used.add(propertyIndex)
 
           Mapping.addMapping(cssMap, {
-            generated: { column: selector.length + start, line },
+            generated: {
+              column: selectorStart + selector.length + start,
+              line,
+            },
             name: declaration.property,
             original: position(location.start),
             source: options.moduleId,
@@ -1132,7 +1109,7 @@ export function compile(options: compile.Options): compile.ReturnType {
           cursor = start + text.length
         }
 
-        return selector + body
+        return rule.slice(0, selectorStart) + selector + body
       })
       .join('\n'),
   ]
@@ -1153,10 +1130,11 @@ export function compile(options: compile.Options): compile.ReturnType {
     Mapping.toEncodedMap(cssMap),
     true,
   )
-  return Object.freeze({
+  const result = {
     ...(emitted[ThemeRules.shared]
       ? { [ThemeRules.shared]: emitted[ThemeRules.shared] }
       : {}),
+    [ClassName.rules]: emitted[ClassName.rules],
     classes,
     code: portable ? options.source : module.toString(),
     css: namespaced.css,
@@ -1170,7 +1148,9 @@ export function compile(options: compile.Options): compile.ReturnType {
       version: 3 as const,
     },
     vars: emitted.vars,
-  })
+  }
+  Object.defineProperty(result, ClassName.rules, { enumerable: false })
+  return Object.freeze(result)
 }
 
 /** Source transform contracts. */
@@ -1187,7 +1167,7 @@ export declare namespace compile {
     readonly composition?: Css.compile.Options['composition']
     /** Default CSS representation for definitions without an explicit mode. */
     readonly cssOutput?: Css.compile.Options['cssOutput']
-    /** Stable declaration names for CSS-only development updates. */
+    /** Retains live definitions for development updates. */
     readonly development?: boolean | undefined
     /**
      * Emit the `color-scheme` selection classes beside the theme scopes.
@@ -1206,6 +1186,8 @@ export declare namespace compile {
     readonly classes: Readonly<Record<string, string>>
     /** Rewritten source with imports for surviving props callables. */
     readonly code: string
+    /** Exact emitted rules retained for collision diagnostics. */
+    readonly [ClassName.rules]: Readonly<Record<string, string>>
     /** Ordered, unminified stylesheet text. */
     readonly css: string
     /** Standard stylesheet map with authored selector/declaration locations. */

package/src/compiler/internal/Catalogs.ts

@@ -90,7 +90,15 @@ export function read(contract: string): readonly Catalog[] {
   return [...configurations].map(([identity, { entries, storageKey }]) => ({
     entries: [...entries].map(
       ([name, scope]) =>
-        [name, `z_theme-${ThemeValues.encode(scope)}`] as const,
+        [
+          name,
+          ThemeValues.scope(
+            scope.startsWith(`${identity}-`)
+              ? scope.slice(identity.length + 1)
+              : scope,
+            identity,
+          ),
+        ] as const,
     ),
     identity,
     storageKey,

package/src/compiler/internal/Compositions.ts

@@ -503,6 +503,13 @@ export function collect(options: collect.Options) {
           )
         : undefined
     const call: Source.Call = {
+      cssName: selected
+        .map((call) =>
+          [call.cssNamespace, call.cssName ?? call.identity ?? 'style']
+            .filter(Boolean)
+            .join('-'),
+        )
+        .join('-'),
       ...(portable(selected)
         ? {
             portable: portable(selected),

package/src/compiler/internal/Configurations.ts

@@ -162,7 +162,7 @@ export function collect(options: collect.Options): Themes.Link {
 
   for (const [key, original] of Object.entries(catalog)) {
     const name = `${identity}-${key}`
-    const definition = Token.bind(original, contract)
+    const definition = Token.bind(original, contract, key)
     const tokenType = type({
       ...values(original.tokens),
       ...original[Token.definition].queries,
@@ -242,6 +242,7 @@ export function collect(options: collect.Options): Themes.Link {
 
       return {}
     })(),
+    ...(input.id !== undefined ? { id: input.id } : {}),
     ...(input.cssOutput ? { cssOutput: input.cssOutput } : {}),
     ...(input.defaultLayer !== undefined
       ? { defaultLayer: input.defaultLayer }
@@ -251,10 +252,28 @@ export function collect(options: collect.Options): Themes.Link {
     ...(input.layers ? { layers: input.layers } : {}),
     ...(input.storageKey ? { storageKey: input.storageKey } : {}),
   }
+  const authoredType = type(
+    variableMode
+      ? {
+          ...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) }
+            : {}),
+        }
+      : normalized,
+  )
 
   return {
     binding: options.name,
     call: {
+      ...(options.nativeProvider ? { nativeProvider: true } : {}),
       ...(variableMode
         ? { variableConfig: true, variableMappings: authored.mappings }
         : {}),
@@ -268,9 +287,11 @@ export function collect(options: collect.Options): Themes.Link {
       options: normalized,
       start: options.expression.start,
       tokenType: selected?.call.tokenType ?? '{}',
-      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)}>`,
+      type: options.nativeProvider
+        ? `import('zyzz/react-native').defineConfig.ReturnType<${authoredType}>`
+        : variableMode
+          ? `import('zyzz').Config.VariableConfig<${authoredType}>`
+          : `import('zyzz').Config.create.ReturnType<${authoredType}>`,
     },
     definition,
     kind: 'config',
@@ -288,6 +309,8 @@ export declare namespace collect {
     readonly expression: Ast.CallExpression
     /** Stable module/binding identity. */
     readonly name: string
+    /** Native factory supplies an ordinary React Provider export. */
+    readonly nativeProvider?: boolean | undefined
     /** Looks up preceding immutable theme definitions. */
     readonly resolve: (node: Ast.Node) => Themes.Link | undefined
   }