zyzz 0.0.22 → 0.0.24

package/src/compiler/internal/NativeBindings.ts

@@ -157,6 +157,7 @@ export function prepare(
         if (
           !Object.hasOwn(Scalar.properties, property) ||
           [
+            'flex',
             'transform',
             'origin',
             'shadow',

package/src/compiler/internal/NativeVars.ts

@@ -155,6 +155,7 @@ export function compile(options: compile.Options): Runtime.create.Options {
             if (
               typeof kind === 'string' &&
               [
+                'flex',
                 'fontVariant',
                 'origin',
                 'shadow',
@@ -171,6 +172,8 @@ export function compile(options: compile.Options): Runtime.create.Options {
               )
             if (kind === 'box' || kind === 'boxSigned')
               return Scalar.length(value, options, kind === 'boxSigned', [path])
+            if (kind === 'boxOffset')
+              return Scalar.convert('offset', value, options, [path])
             return Scalar.convert(kind, value, options, [path])
           }
 

package/src/compiler/internal/Themes.ts

@@ -120,6 +120,34 @@ export type VarsRead = {
   readonly vars: Readonly<Record<string, Theme.Definition>>
 }
 
+/** Resolves the variable alternatives a linked configuration or variable set exposes to native hooks. */
+export function varsRead(
+  link: Pick<Link, 'call' | 'definition' | 'members'>,
+): Omit<VarsRead, 'end' | 'start'> {
+  const named = link.call.options?.themes !== undefined
+  const vars = (() => {
+    if (!named) return { default: link.definition }
+    return Object.fromEntries(
+      Object.entries(link.members ?? {}).flatMap((entry) => {
+        const [key, member] = entry
+        const path = JSON.parse(key) as string[]
+        if (path.length === 1 && link.call.selection)
+          return [[path[0]!, member.definition]]
+        if (path.length === 2 && path[0] === 'themes')
+          return [[path[1]!, member.definition]]
+        return []
+      }),
+    )
+  })()
+
+  return {
+    defaultVars: named ? String(link.call.options!.defaultTheme) : 'default',
+    owner: link.call.name,
+    unnamed: !named,
+    vars,
+  }
+}
+
 /** Shared graph data; no filesystem or runtime evaluation is involved. */
 export type Context = {
   /** Canonical identifier names collected during graph validation. */
@@ -1796,29 +1824,7 @@ export function collect(program: Ast.Program, options: collect.Options) {
     )
       return false
 
-    const named = link.call.options?.themes !== undefined
-    const vars = (() => {
-      if (!named) return { default: link.definition }
-      return Object.fromEntries(
-        Object.entries(link.members ?? {}).flatMap((entry) => {
-          const [key, member] = entry
-          const path = JSON.parse(key) as string[]
-          if (path.length === 1 && link.call.selection)
-            return [[path[0]!, member.definition]]
-          if (path.length === 2 && path[0] === 'themes')
-            return [[path[1]!, member.definition]]
-          return []
-        }),
-      )
-    })()
-    varsReads.push({
-      defaultVars: named ? String(link.call.options!.defaultTheme) : 'default',
-      end: node.end,
-      owner: link.call.name,
-      start: node.start,
-      unnamed: !named,
-      vars,
-    })
+    varsReads.push({ ...varsRead(link), end: node.end, start: node.start })
     return true
   }
 

package/src/internal/Configuration.ts

@@ -63,7 +63,8 @@ export function create(
           ? (value as Vars.Definition)
           : Vars.define(value as Vars.Values)
       const theme = VariableSets.theme(definition, variableMappings)
-      if (variableMappings === false) return theme
+      // Tokens are ambiguous only through an explicit mapping, so skip the property scan without one.
+      if (!variableMappings) return theme
       const metadata = theme[Token.definition]
       const names = new Map<string, string>()
       for (const path of Object.keys(metadata.values)) {

package/src/metro/Graph.ts

@@ -148,7 +148,10 @@ export function read(
     seen.add(filename)
     const source = snapshot.readSync(filename)
     const file = manifest(filename)
-    if (file && !/['"]zyzz(?:\/default)?['"]/.test(source)) {
+    if (
+      file &&
+      !/['"]zyzz(?:\/default|\/react-native(?:\/react)?)?['"]/.test(source)
+    ) {
       const data = JSON.parse(snapshot.readSync(file)) as Record<
         string,
         unknown
@@ -174,7 +177,19 @@ export function read(
     for (const node of snapshot.parse({ moduleId: identity(filename), source })
       .program.body) {
       const name = specifier(node)
-      if (name === 'zyzz' || name === 'zyzz/default') {
+      // Consumers import vars profiles from defineConfig modules, so those modules must compile.
+      const native =
+        (name === 'zyzz/react-native' || name === 'zyzz/react-native/react') &&
+        node.type === 'ImportDeclaration' &&
+        node.specifiers.some(
+          (entry) =>
+            entry.type === 'ImportSpecifier' &&
+            entry.importKind !== 'type' &&
+            (entry.imported.type === 'Identifier'
+              ? entry.imported.name
+              : entry.imported.value) === 'defineConfig',
+        )
+      if (name === 'zyzz' || name === 'zyzz/default' || native) {
         authored.add(filename)
         return true
       }

package/src/node/Host.ts

@@ -13,6 +13,7 @@ import * as Graph from '../compiler/Graph.js'
 import * as AtRules from '../compiler/internal/AtRules.js'
 import * as Catalogs from '../compiler/internal/Catalogs.js'
 import * as Relative from '../compiler/internal/Relative.js'
+import * as Scheme from '../internal/Scheme.js'
 import * as Snapshot from './internal/Snapshot.js'
 import * as Syntax from '../compiler/internal/Syntax.js'
 import * as Source from '../compiler/Source.js'
@@ -620,7 +621,10 @@ export async function create(options: create.Options): Promise<Runtime> {
       artifacts.set('zyzz.shared.css.map', shared.map)
     }
 
-    const moduleStylesheets = new Map<string, Stylesheet>()
+    const moduleStylesheets = new Map<
+      string,
+      { name: string; stylesheet: Stylesheet }
+    >()
 
     for (const name of Object.keys(sources)) {
       const output = graph.modules[`${options.packageId}/${name}`]!
@@ -661,23 +665,40 @@ export async function create(options: create.Options): Promise<Runtime> {
 
       artifacts.set(`${name}.css`, stylesheet.code)
       artifacts.set(`${name}.css.map`, stylesheet.map)
-      // Module URLs resolve beside the module file; the complete stylesheet at
-      // the output root carries a copy with those URLs rebased.
-      moduleStylesheets.set(
-        `${options.packageId}/${name}`,
-        rebase(stylesheet, name, css === false ? false : css.minify),
-      )
+      moduleStylesheets.set(`${options.packageId}/${name}`, {
+        name,
+        stylesheet,
+      })
     }
 
     // The complete stylesheet follows the module graph so a consumer's rules
     // cascade over the rules of the modules it imports.
     if (shared || moduleStylesheets.size) {
-      const complete = concatenate([
-        ...(shared ? [shared] : []),
-        ...order(graph.dependencies, [...moduleStylesheets.keys()]).map(
-          (id) => moduleStylesheets.get(id)!,
-        ),
-      ])
+      const parts = shared ? [shared] : []
+      let schemes = false
+
+      // Each module stylesheet declares the scheme classes to load alone. The
+      // complete stylesheet keeps the first declaration.
+      for (const id of order(graph.dependencies, [
+        ...moduleStylesheets.keys(),
+      ])) {
+        const { name, stylesheet } = moduleStylesheets.get(id)!
+        const declares = Object.values(Scheme.classes).some((className) =>
+          stylesheet.code.includes(`.${className}`),
+        )
+
+        parts.push(
+          rebase(
+            stylesheet,
+            name,
+            css === false ? false : css.minify,
+            schemes && declares,
+          ),
+        )
+        schemes ||= declares
+      }
+
+      const complete = concatenate(parts)
 
       artifacts.set('zyzz.css', complete.code)
       artifacts.set('zyzz.css.map', complete.map)
@@ -1025,7 +1046,7 @@ function concatenate(parts: readonly { code: string; map: string }[]) {
   let offset = 0
 
   for (const part of parts) {
-    if (!part.code) continue
+    if (!part.code.trim()) continue
 
     const code = part.code.endsWith('\n') ? part.code : `${part.code}\n`
     const traced = Mapping.fromMap(part.map)
@@ -1169,15 +1190,22 @@ async function read(
   }
 }
 
-/** Rewrites a nested module stylesheet's relative URLs against the output root. */
+/**
+ * Copies a module stylesheet into the complete stylesheet at the output root,
+ * rebasing nested relative URLs and optionally dropping the scheme rules.
+ */
 function rebase(
   stylesheet: { code: string; map: string },
   name: string,
   minify: boolean,
+  schemes: boolean,
 ) {
   const directory = Path.posix.dirname(name)
 
-  if (directory === '.' || !stylesheet.code.includes('url(')) return stylesheet
+  if (!schemes && (directory === '.' || !stylesheet.code.includes('url(')))
+    return stylesheet
+
+  const classes = Object.values(Scheme.classes)
 
   const result = AtRules.transform({
     code: Buffer.from(stylesheet.code),
@@ -1186,8 +1214,27 @@ function rebase(
     minify,
     sourceMap: true,
     visitor: {
+      Rule: {
+        style(rule) {
+          const [selector, ...others] = rule.value.selectors
+          const [component, ...rest] = selector ?? []
+
+          if (
+            schemes &&
+            !others.length &&
+            !rest.length &&
+            component?.type === 'class' &&
+            classes.includes(component.name)
+          )
+            return []
+        },
+      },
       Url(url) {
-        if (/^(?:\/|[?#]|[a-z][a-z\d+.-]*:)/i.test(url.url)) return url
+        if (
+          directory === '.' ||
+          /^(?:\/|[?#]|[a-z][a-z\d+.-]*:)/i.test(url.url)
+        )
+          return url
 
         return { ...url, url: Path.posix.join(directory, url.url) }
       },

package/src/react-native/StyleSheet.ts

@@ -278,6 +278,14 @@ export function compile<
                 output[`${property}Right`] = right!
                 output[`${property}Bottom`] = bottom!
                 output[`${property}Left`] = left!
+              } else if (property === 'flex') {
+                Object.assign(output, Scalar.flex(value, options, path))
+              } else if (property === 'inset') {
+                const values =
+                  typeof value === 'string' ? Calculation.parts(value) : [value]
+                const [top, right = top, bottom = top, left = right] =
+                  values.map((value) => convert('offset', value, options, path))
+                Object.assign(output, { top, right, bottom, left })
               } else if (
                 property === 'borderColor' ||
                 property === 'borderWidth'
@@ -613,15 +621,26 @@ type Length =
   | `${number}px`
   | `${number}rem`
   | `${'c' | 'C'}${'a' | 'A'}${'l' | 'L'}${'c' | 'C'}(${string})`
-type Box =
-  | Length
-  | `${Length} ${Length}`
-  | `${Length} ${Length} ${Length}`
-  | Box4
+type Box<item extends string | number = Length> =
+  | item
+  | `${item} ${item}`
+  | `${item} ${item} ${item}`
+  | Box4<item>
 // Distribute the first item to keep case-insensitive calculations below the template expansion limit.
-type Box4<first extends string | number = Length> = first extends unknown
-  ? `${first} ${Length} ${Length} ${Length}`
-  : never
+type Box4<
+  item extends string | number,
+  first extends string | number = item,
+> = first extends unknown ? `${first} ${item} ${item} ${item}` : never
+type FlexBasis = Length | `${number}%` | 'auto'
+type Flex =
+  | number
+  | 'initial'
+  | 'none'
+  | FlexBasis
+  | `${number} ${number | FlexBasis}`
+  | `${FlexBasis} ${number}`
+  | `${number} ${number} ${FlexBasis}`
+  | `${FlexBasis} ${number} ${number}`
 type Weight =
   | 'bold'
   | 'normal'
@@ -666,7 +685,11 @@ type Atom<kind> = kind extends readonly string[]
                         ? Length | number
                         : kind extends 'box' | 'boxSigned'
                           ? Box
-                          : Length
+                          : kind extends 'boxOffset'
+                            ? Box<Length | `${number}%`>
+                            : kind extends 'flex'
+                              ? Flex
+                              : Length
 
 type Reference<property extends keyof typeof properties> = {
   [group in Token.Group]: property extends Token.Properties<group>