zyzz 0.0.20 → 0.0.22

package/src/compiler/internal/Contract.ts

@@ -26,7 +26,7 @@ export function read(
   if (
     ![
       1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21,
-      22, 23, 24, 25, 26, 27, 28, 29,
+      22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33,
     ].includes(data.version as number)
   )
     throw new Error('Unsupported Zyzz contract version.')
@@ -58,6 +58,13 @@ export function read(
     for (const entry of Object.values(record(data.exports))) collect(entry)
   }
 
+  function validateVariables(entry: Record<string, unknown>) {
+    if ((data.version as number) < 31 || entry.variableNaming !== undefined)
+      throw new Error(
+        'Legacy packed variable names are unsupported. Rebuild the library with the current version of Zyzz.',
+      )
+  }
+
   function decode(value: unknown): unknown {
     if (!value || typeof value !== 'object') return value
     if (Array.isArray(value)) return value.map(decode)
@@ -92,6 +99,7 @@ export function read(
     if (Object.hasOwn(fields, '$variable')) {
       const reference = record(fields.$variable)
       const identity = string(reference.identity)
+      validateVariables(reference)
       let contract = identities.get(identity)
       if (contract && !contract.variableSet)
         throw new Error(
@@ -122,6 +130,11 @@ export function read(
   for (const [name, value] of Object.entries(record(data.themes))) {
     const entry = record(value)
     const identity = string(entry.identity)
+    if (
+      Object.keys(record(entry.tokens)).length ||
+      entry.variableNaming !== undefined
+    )
+      validateVariables(entry)
     if (entry.variableSet === true && (data.version as number) < 28)
       throw new Error('Vars contracts require contract version 28 or later.')
     const mappings = VariableSets.mappings(entry.mappings)
@@ -223,12 +236,18 @@ export function read(
         'Packed responsive typography and border widths require contract version 25 or later.',
       )
 
-    themes[name] = Token.bind(definition, contract)
+    themes[name] = Token.bind(
+      definition,
+      contract,
+      entry.cssName === undefined ? undefined : string(entry.cssName),
+    )
     types[name] = type(input(definition))
   }
 
   function link(value: unknown): Themes.Link {
     const raw = record(value)
+    if (raw.nativeProvider !== undefined && (data.version as number) < 32)
+      throw new Error('Native providers require contract version 32 or later.')
     // Contracts before version 19 record style authoring exports as `css`.
     const entry =
       raw.kind === 'css' && (data.version as number) < 19
@@ -249,7 +268,7 @@ export function read(
             key === 'set' ||
             key === '__proto__' ||
             names.has(string(slot.name)) ||
-            !/^--z-v[a-z0-9-]+$/.test(string(slot.name)) ||
+            !/^--z-[a-zA-Z0-9_-]+$/.test(string(slot.name)) ||
             ![
               '*',
               'color',
@@ -314,7 +333,7 @@ export function read(
       if (
         ![
           9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26,
-          27, 28, 29,
+          27, 28, 29, 30, 31, 32, 33,
         ].includes(data.version as number) ||
         ![
           'cssFunction',
@@ -324,7 +343,7 @@ export function read(
           'fontPaletteValues',
           'positionTry',
         ].includes(reference) ||
-        !/^(?:--)?z-[a-z0-9-]+$/.test(name) ||
+        !/^(?:--)?z-[a-zA-Z0-9_-]+$/.test(name) ||
         !name.startsWith(
           `${reference === 'counterStyle' ? '' : '--'}z-${reference.toLowerCase()}`,
         ) ||
@@ -350,7 +369,7 @@ export function read(
 
     if (entry.kind === 'animation') {
       const name = string(entry.name)
-      if (!/^z-k[a-z0-9-]+$/.test(name))
+      if (!/^z-k[a-zA-Z0-9_-]+$/.test(name))
         throw new Error('Invalid animation identity.')
 
       return {
@@ -367,7 +386,7 @@ export function read(
           'Packed callable styles require contract version 16 or later.',
         )
       const binding = string(entry.binding)
-      if (!/^z-style-[a-z0-9_-]+$/.test(binding))
+      if (!/^z-style-[a-zA-Z0-9_-]+$/.test(binding))
         throw new Error('Invalid style reference identity.')
       const members =
         entry.members === undefined
@@ -383,6 +402,34 @@ export function read(
                 return [key, member]
               }),
             )
+      const nativeContext = (() => {
+        if (entry.nativeContext === undefined) return undefined
+        if ((data.version as number) < 33)
+          throw new Error(
+            'Native style catalogs require contract version 33 or later.',
+          )
+        if (entry.style === undefined)
+          throw new Error('Native style catalogs require a packed style.')
+        const context = record(entry.nativeContext)
+        const vars = Object.fromEntries(
+          Object.entries(record(context.vars)).map((entry) => {
+            const [name, value] = entry
+            const theme = themes[string(value)]
+            if (!name || !theme)
+              throw new Error('Unknown packed native style catalog.')
+            return [name, theme]
+          }),
+        )
+        const defaultVars = string(context.defaultVars)
+        if (!Object.hasOwn(vars, defaultVars))
+          throw new Error('Invalid packed native style default.')
+        const identities = new Set(
+          Object.values(vars).map((theme) => theme[Token.definition].contract),
+        )
+        if (identities.size !== 1)
+          throw new Error('Incompatible packed native style catalog.')
+        return { defaultVars, vars }
+      })()
       return {
         binding,
         call: {
@@ -396,11 +443,14 @@ export function read(
         ...(entry.style === undefined
           ? {}
           : {
-              style: PackedStyles.read(
-                entry.style,
-                themes,
-                data.version as number,
-              ),
+              style: {
+                ...PackedStyles.read(
+                  entry.style,
+                  themes,
+                  data.version as number,
+                ),
+                ...(nativeContext ? { nativeContext } : {}),
+              },
             }),
         ...(members ? { members } : {}),
       }
@@ -485,9 +535,11 @@ export function read(
       !!options?.themes &&
       ((data.version as number) < 4 || entry.catalogOnly === true)
     const fullConfigType = options
-      ? entry.variableConfig === true
-        ? `import('zyzz').Config.VariableConfig<${Configurations.type(variableOptions(options, entry.variableMappings as Vars.Mappings | false | undefined))}>`
-        : `import('zyzz').Config.create.ReturnType<${Configurations.type(options)}>`
+      ? entry.nativeProvider === true
+        ? `import('zyzz/react-native/react').defineConfig.ReturnType<${Configurations.type(entry.variableConfig === true ? variableOptions(options, entry.variableMappings as Vars.Mappings | false | undefined) : options)}>`
+        : entry.variableConfig === true
+          ? `import('zyzz').Config.VariableConfig<${Configurations.type(variableOptions(options, entry.variableMappings as Vars.Mappings | false | undefined))}>`
+          : `import('zyzz').Config.create.ReturnType<${Configurations.type(options)}>`
       : ''
     // Helpers a legacy library did not compile are hidden from its consumers' types.
     const hidden = [
@@ -506,6 +558,7 @@ export function read(
     return {
       binding: string(entry.binding),
       call: {
+        ...(entry.nativeProvider === true ? { nativeProvider: true } : {}),
         ...(entry.variableSet === true
           ? {
               variableSet: true,
@@ -577,7 +630,22 @@ export function read(
     ]),
   )
 
-  return { links, themes, stylesheets: Stylesheets.read(data.stylesheets) }
+  const classRules = Object.fromEntries(
+    Object.entries(
+      data.classRules === undefined ? {} : record(data.classRules),
+    ).map(([name, body]) => {
+      if (!name || /\s/.test(name))
+        throw new Error('Invalid packed class name.')
+      return [name, string(body)]
+    }),
+  )
+
+  return {
+    classRules,
+    links,
+    themes,
+    stylesheets: Stylesheets.read(data.stylesheets),
+  }
 }
 
 function record(value: unknown): Record<string, unknown> {
@@ -627,6 +695,7 @@ export function write(
   stylesheets: readonly Stylesheets.Section[] = [],
   moduleId = '',
   configurations: readonly write.Configuration[] = [],
+  classRules: Readonly<Record<string, string>> = {},
 ): string {
   function entry(link: Themes.Link): Record<string, unknown> {
     if (link.kind === 'variables')
@@ -664,6 +733,28 @@ export function write(
       return {
         binding: link.binding,
         kind: link.kind,
+        ...(link.style?.nativeContext
+          ? {
+              nativeContext: {
+                defaultVars: link.style.nativeContext.defaultVars,
+                vars: Object.fromEntries(
+                  Object.entries(link.style.nativeContext.vars).map((entry) => {
+                    const [name, definition] = entry
+                    const theme = Object.entries(themes).find(
+                      (candidate) =>
+                        candidate[1][Token.definition].contract ===
+                          definition[Token.definition].contract &&
+                        JSON.stringify(input(candidate[1])) ===
+                          JSON.stringify(input(definition)),
+                    )
+                    if (!theme)
+                      throw new Error('Missing packed native style catalog.')
+                    return [name, theme[0]]
+                  }),
+                ),
+              },
+            }
+          : {}),
         ...(link.style ? { style: PackedStyles.write(link.style) } : {}),
         ...(link.members
           ? {
@@ -679,6 +770,7 @@ export function write(
 
     return {
       ...(link.call.variableSet ? { variableSet: true } : {}),
+      ...(link.call.nativeProvider ? { nativeProvider: true } : {}),
       ...(link.call.directVariables ? { directVariables: true } : {}),
       ...(link.call.variableConfig
         ? { variableConfig: true, variableMappings: link.call.variableMappings }
@@ -714,6 +806,7 @@ export function write(
   }
 
   return JSON.stringify({
+    ...(Object.keys(classRules).length ? { classRules } : {}),
     ...(stylesheets.length
       ? { stylesheets: Stylesheets.write(stylesheets) }
       : {}),
@@ -727,6 +820,9 @@ export function write(
       Object.entries(themes).map(([name, theme]) => [
         name,
         {
+          ...(theme[Token.definition].cssName !== undefined
+            ? { cssName: theme[Token.definition].cssName }
+            : {}),
           ...(theme[Token.definition].contract.shorthands
             ? { shorthands: theme[Token.definition].contract.shorthands }
             : {}),
@@ -747,243 +843,26 @@ export function write(
         },
       ]),
     ),
-    version: (() => {
-      function composed(value: unknown): boolean {
-        if (Token.isExpression(value)) return true
-        if (Token.is(value)) return composed(value.value)
-        return (
-          !!value &&
-          typeof value === 'object' &&
-          Object.values(value).some(composed)
-        )
-      }
-      if (
-        Object.values(themes).some((theme) =>
-          composed(theme[Token.definition].values),
-        )
-      )
-        return 29
-
-      if (
-        Object.values(themes).some(
-          (theme) =>
-            theme[Token.definition].contract.variableSet ||
-            theme[Token.definition].queries,
-        )
-      )
-        return 28
-
-      if (
-        Object.values(themes).some(
-          (theme) =>
-            theme[Token.definition].contract.defaultLayer !== undefined,
-        )
-      )
-        return 27
-      if (
-        Object.values(themes).some(
-          (theme) =>
-            theme[Token.definition].paths ||
-            Object.hasOwn(theme.tokens, 'borderWidth'),
-        )
-      )
-        return 25
-
-      if (
-        Object.values(themes).some((theme) =>
-          Object.hasOwn(theme.tokens, 'typography'),
-        )
-      )
-        return 24
-
-      function callable(link: Themes.Link): boolean {
-        return !!link.style || Object.values(link.members ?? {}).some(callable)
-      }
-      function styled(link: Themes.Link): boolean {
-        return (
-          link.kind === 'style' ||
-          Object.values(link.members ?? {}).some(styled)
-        )
-      }
-      function branches(style: import('../../Style.js').NamedStyle): boolean {
-        return (
-          !!style.targets || !!style.rules?.some((rule) => branches(rule.style))
-        )
-      }
-      function targeted(link: Themes.Link): boolean {
-        return (
-          (link.style && branches(link.style.style)) ||
-          Object.values(link.members ?? {}).some(targeted)
-        )
-      }
-      function staticRecipe(link: Themes.Link): boolean {
-        return (
-          !!link.style?.staticRecipe ||
-          Object.values(link.members ?? {}).some(staticRecipe)
-        )
-      }
-      function nested(link: Themes.Link): boolean {
-        return Object.values(link.members ?? {}).some(
-          (member) =>
-            (link.kind === 'style-reference' && !!member.members) ||
-            nested(member),
-        )
-      }
-      function dynamic(link: Themes.Link): boolean {
-        return (
-          !!link.style?.dynamic ||
-          Object.values(link.members ?? {}).some(dynamic)
-        )
-      }
-      if (Object.values(links).some(dynamic)) return 23
-      if (Object.values(links).some(nested)) return 22
-      if (Object.values(links).some(staticRecipe)) return 21
-      if (Object.values(links).some(targeted)) return 20
-      // Style authoring exports serialize as `style`; older readers only know `css`.
-      if (Object.values(links).some(styled)) return 19
-      // Root controls call a runtime helper older releases lack, and older
-      // readers reject the storageKey option, so both require readers to opt in.
-      // Local configurations emit the same helper without an exported binding.
-      if (
-        configurations.length ||
-        Object.values(links).some(
-          (link) =>
-            (link.call.appearance &&
-              (link.kind === 'config' || link.call.root)) ||
-            link.call.options?.storageKey !== undefined,
-        )
-      )
-        return 18
-      if (
-        Object.values(links).some(callable) ||
-        Object.values(themes).some(
-          (theme) => theme[Token.definition].contract.cssOutput,
-        )
-      )
-        return 17
-      if (Object.values(links).some((link) => link.call.recipe)) return 15
-      if (Object.values(links).some((link) => link.kind === 'variables'))
-        return 14
-      if (Object.values(links).some((link) => link.kind === 'style-reference'))
-        return 13
-
-      if (
-        Object.values(links).some(
-          (link) => link.call.function && extended(link.call.function),
-        )
-      )
-        return 12
-
-      if (
-        stylesheets.some((section) => section.namespaces?.length) ||
-        Object.values(links).some(
-          (link) =>
-            link.call.function &&
-            [
-              link.call.function.returns,
-              ...link.call.function.parameters.map(
-                (parameter) => parameter.syntax ?? '*',
-              ),
-            ].some(
-              (syntax) =>
-                // Version 10 readers accepted this fixed scalar subset.
-                !(
-                  [
-                    '*',
-                    '<angle>',
-                    '<color>',
-                    '<integer>',
-                    '<length>',
-                    '<length-percentage>',
-                    '<number>',
-                    '<percentage>',
-                    '<time>',
-                  ] as readonly string[]
-                ).includes(syntax),
-            ),
-        )
-      )
-        return 11
-
-      if (
-        Object.values(links).some(
-          (link) =>
-            link.call.reference === 'cssFunction' ||
-            link.call.reference === 'customMedia',
-        )
-      )
-        return 10
-
-      if (Object.values(links).some((link) => link.kind === 'rule-reference'))
-        return 9
-
-      if (Object.values(links).some((link) => link.kind === 'variables'))
-        return 8
-
-      if (
-        stylesheets.length ||
-        Object.values(links).some((link) => link.kind === 'animation')
-      )
-        return 7
-
-      if (
-        Object.values(themes).some(
-          (theme) =>
-            theme[Token.definition].contract.shorthands ||
-            Object.hasOwn(theme.tokens, 'margin') ||
-            Object.hasOwn(theme.tokens, 'padding'),
-        ) ||
-        Object.values(links).some(
-          (link) =>
-            link.call.output === 'html' ||
-            Object.values(link.members ?? {}).some(
-              (member) => member.call.output === 'html',
-            ),
-        )
-      )
-        return 5
-
-      if (
-        stylesheets.length ||
-        Object.values(links).some(
-          (link) =>
-            link.call.selection ||
-            (link.kind === 'config' && !!link.call.options?.themes) ||
-            link.call.initialization ||
-            (link.kind === 'config' && link.call.script) ||
-            link.kind === 'animation' ||
-            link.kind === 'variables',
-        )
-      )
-        return 4
-
-      if (
-        Object.values(themes).some(
-          (theme) =>
-            theme[Token.definition].queries ||
-            Object.keys(theme.tokens).some((group) =>
-              [
-                'fontFamily',
-                'fontSize',
-                'fontWeight',
-                'lineHeight',
-                'letterSpacing',
-              ].includes(group),
-            ),
-        )
-      )
-        return 3
+    version: Object.values(links).some(nativeCatalog)
+      ? 33
+      : Object.values(links).some(nativeProvider)
+        ? 32
+        : 31,
+  })
 
-      if (
-        Object.values(links).some(
-          (link) => link.kind === 'config' || link.call.type,
-        )
-      )
-        return 2
+  function nativeProvider(link: Themes.Link): boolean {
+    return (
+      link.call.nativeProvider === true ||
+      Object.values(link.members ?? {}).some(nativeProvider)
+    )
+  }
 
-      return 1
-    })(),
-  })
+  function nativeCatalog(link: Themes.Link): boolean {
+    return (
+      Boolean(link.style?.nativeContext) ||
+      Object.values(link.members ?? {}).some(nativeCatalog)
+    )
+  }
 }
 
 /** Contract writer contracts. */
@@ -1058,15 +937,6 @@ function signature(
   }
 }
 
-function extended(signature: NonNullable<Themes.Call['function']>): boolean {
-  return (
-    /[\\\u0080-\uffff]/.test(signature.returns) ||
-    signature.parameters.some((parameter) =>
-      /[\\\u0080-\uffff]/.test(parameter.name + (parameter.syntax ?? '*')),
-    )
-  )
-}
-
 function encode(value: unknown): unknown {
   if (Token.isExpression(value) && 'group' in value)
     return {

package/src/compiler/internal/Contributions.ts

@@ -286,11 +286,7 @@ export function scan(
           explicit !== undefined
             ? Identity.contribution(type, explicit)
             : variable?.id.type === 'Identifier'
-              ? `${type === 'keyframes' ? 'z-k' : `${type === 'counterStyle' ? '' : '--'}z-${type.toLowerCase()}`}${namespace}-${Array.from(
-                  variable.id.name,
-                )
-                  .map((value) => value.codePointAt(0)!.toString(16))
-                  .join('-')}`
+              ? `${type === 'keyframes' ? 'z-k-' : `${type === 'counterStyle' ? '' : '--'}z-${type.toLowerCase()}-`}${Identity.name(variable.id.name)}`
               : undefined
 
         const call: Call = {
@@ -1029,7 +1025,13 @@ export function extract(
                   ]
                 if (
                   !margin &&
-                  ['bleed', 'marks', 'pageOrientation', 'size'].includes(key)
+                  [
+                    'bleed',
+                    'marks',
+                    'pageMarginSafety',
+                    'pageOrientation',
+                    'size',
+                  ].includes(key)
                 ) {
                   if (typeof value !== 'string' && typeof value !== 'number')
                     throw new Error('Expected a scalar page descriptor.')

package/src/compiler/internal/Descriptors.ts

@@ -8,11 +8,11 @@ export function check(options: check.Options): void {
     /[A-Z]/g,
     (letter) => `-${letter.toLowerCase()}`,
   )
-  const result = Tree.lexer.matchAtruleDescriptor(
-    options.rule,
-    name,
-    options.value,
-  )
+  // The pinned parser predates this page descriptor.
+  const result =
+    options.rule === 'page' && name === 'page-margin-safety'
+      ? Tree.lexer.match('none | clamp | add', options.value)
+      : Tree.lexer.matchAtruleDescriptor(options.rule, name, options.value)
   if (result.error)
     throw new Error(`Invalid @${options.rule} ${name}: ${result.error.message}`)
   if (
@@ -102,9 +102,13 @@ export function validate(source: string): void {
         rule.block.children.forEach((declaration) => {
           if (declaration.type !== 'Declaration') return
           if (
-            ['bleed', 'marks', 'page-orientation', 'size'].includes(
-              declaration.property,
-            )
+            [
+              'bleed',
+              'marks',
+              'page-margin-safety',
+              'page-orientation',
+              'size',
+            ].includes(declaration.property)
           )
             check({
               rule: 'page',

package/src/compiler/internal/Dynamic.ts

@@ -1,6 +1,7 @@
 /** Extracts typed callback slots and static object bodies without invoking callbacks. @module */
 import type * as Ast from '@oxc-project/types'
-import type * as Binding from '../../internal/Binding.js'
+import * as Binding from '../../internal/Binding.js'
+import * as Identity from '../../internal/Identity.js'
 import * as Expression from './Expression.js'
 import * as Literal from '../../internal/Literal.js'
 import * as Themes from './Themes.js'
@@ -82,14 +83,18 @@ export function read(
         member,
       )
 
-    const slot = (slots[key] = Object.freeze({
-      name: `--z-d${identity}-${Array.from(key)
-        .map((character) => character.codePointAt(0)!.toString(16))
-        .join('-')}`,
-      type: kind === 'number' ? 'number' : 'length',
-      ...(kind === 'zero-string' ? { zero: true } : {}),
-      variable: true,
-    }))
+    const slot = (slots[key] = Object.freeze(
+      Object.defineProperty(
+        {
+          name: Identity.slot(identity, key),
+          type: kind === 'number' ? ('number' as const) : ('length' as const),
+          ...(kind === 'zero-string' ? { zero: true } : {}),
+          variable: true as const,
+        },
+        Binding.dynamic,
+        { value: true },
+      ),
+    ))
 
     const values = numbers(type)
 

package/src/compiler/internal/Names.ts

@@ -0,0 +1,48 @@
+/** Derives emitted names from authored bindings rather than source locations. @module */
+import type * as Ast from '@oxc-project/types'
+import * as Walker from 'oxc-walker'
+import * as Identity from '../../internal/Identity.js'
+
+/** Collects readable declaration paths for calls in constants and namespaces. */
+export function collect(program: Ast.Program): ReadonlyMap<number, string> {
+  const names = new Map<number, string>()
+  const ancestors: Ast.Node[] = []
+
+  Walker.walk(program, {
+    enter(node) {
+      if (node.type === 'CallExpression') {
+        const parts: string[] = []
+        for (const ancestor of ancestors) {
+          if (
+            ancestor.type === 'TSModuleDeclaration' &&
+            ancestor.id.type === 'Identifier'
+          )
+            parts.push(ancestor.id.name)
+          if (
+            ancestor.type === 'VariableDeclarator' &&
+            ancestor.id.type === 'Identifier'
+          )
+            parts.push(ancestor.id.name)
+          if (ancestor.type === 'Property' && !ancestor.computed) {
+            if (ancestor.key.type === 'Identifier')
+              parts.push(ancestor.key.name)
+            else if (ancestor.key.type === 'Literal')
+              parts.push(String(ancestor.key.value))
+          }
+          if (ancestor.type === 'FunctionDeclaration' && ancestor.id)
+            parts.push(ancestor.id.name)
+        }
+        names.set(
+          node.start,
+          parts.length ? parts.map(Identity.name).join('-') : 'style',
+        )
+      }
+      ancestors.push(node)
+    },
+    leave() {
+      ancestors.pop()
+    },
+  })
+
+  return names
+}