zyzz 0.0.19 → 0.0.21

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 })
@@ -375,6 +382,9 @@ export function extract(options: extract.Options): extract.ReturnType {
           if (
             name === 'Config' ||
             name === 'cx' ||
+            name === 'defineConfig' ||
+            name === 'defineVars' ||
+            name === 'extendVars' ||
             name === 'style' ||
             name === 'Theme' ||
             name === 'Vars' ||
@@ -537,6 +547,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
@@ -546,7 +563,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)
@@ -555,10 +578,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)
@@ -1302,10 +1344,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,
@@ -1325,6 +1369,7 @@ export function extract(options: extract.Options): extract.ReturnType {
   }
 
   try {
+    let compositionIndex = 0
     for (const entry of options.target === 'native'
       ? []
       : Compositions.collect({
@@ -1336,7 +1381,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,
@@ -1480,6 +1534,33 @@ 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 })
+
   return Object.freeze({
     namespaces: contributionData.filter(
       (value): value is Extract<Css.Contribution, { kind: 'namespace' }> =>
@@ -1519,7 +1600,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) }
       : {}),

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

@@ -148,6 +148,7 @@ export function collect(options: collect.Options): Themes.Link {
         }
       : {}),
     [Token.identity]: identity,
+    ...(input.id !== undefined ? { [Token.complete]: true } : {}),
     cssOutput: input.cssOutput ?? 'atomic',
     ...(input.defaultLayer !== undefined
       ? { defaultLayer: input.defaultLayer }
@@ -161,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,
@@ -241,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 }
@@ -294,6 +296,8 @@ export declare namespace collect {
 
 /** Encodes validated literal options as a declaration type, never executable text. */
 export function type(value: unknown): string {
+  if (Token.isExpression(value) && 'group' in value)
+    return `import('zyzz').Vars.Composition<'${value.group}'>`
   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)