zyzz 0.0.6 → 0.0.8

package/src/internal/Value.ts

@@ -21,6 +21,60 @@ export type Atom<value> =
  * Checks authored properties and retains validated input types to avoid expanding whole-property fallback unions.
  */
 export type Accepted<style, properties> = {
+  [property in keyof style]: AcceptedValue<
+    style[property],
+    property,
+    properties
+  >
+}
+
+type AcceptedValue<value, property extends PropertyKey, properties> =
+  Extract<value, `[${string}]` | `[${string}] !important`> extends never
+    ? AcceptedMember<Record<property, value>, properties>[property]
+    : value extends unknown
+      ? AcceptedMember<Record<property, value>, properties>[property]
+      : never
+
+type AcceptedMember<style, properties> = {
+  [property in keyof style]: property extends keyof properties
+    ? style[property] extends `[${infer value}]` | `[${infer value}] !important`
+      ?
+          | (property extends 'gridTemplateColumns' | 'gridTemplateRows'
+              ? style[property] extends LiteralAccepted<
+                  Pick<style, property>,
+                  Literal.Properties
+                >[property]
+                ? style[property]
+                : never
+              : never)
+          | (ScalarValue<value, property> extends LiteralAccepted<
+              Record<property, ScalarValue<value, property>>,
+              Literal.Properties
+            >[property]
+              ? style[property]
+              : never)
+      : style[property] extends readonly [unknown, ...unknown[]]
+        ? AcceptedArray<style[property], property, properties>
+        : LiteralAccepted<Pick<style, property>, properties>[property]
+    : never
+}
+
+type ScalarValue<value, property> =
+  value extends `${infer numeric extends number}`
+    ? property extends keyof Literal.Properties
+      ? number extends Literal.Properties[property]
+        ? numeric
+        : value
+      : value
+    : value
+
+type AcceptedArray<values, property extends PropertyKey, properties> = {
+  [index in keyof values]: values[index] extends readonly unknown[]
+    ? never
+    : Accepted<Record<property, values[index]>, properties>[property]
+}
+
+type LiteralAccepted<style, properties> = {
   [property in keyof style]: property extends keyof properties
     ? style[property] extends { readonly [Token.scalar]: infer scalar }
       ? property extends keyof Literal.Properties
@@ -80,6 +134,22 @@ type Fold<value> = value extends string
 
 /** Refines concrete scalar spellings; already-broad property contracts need no literal refinement. */
 export type Checked<style, tokens = {}> = {
+  [property in keyof style]: style[property] extends
+    | `[${infer value}]`
+    | `[${infer value}] !important`
+    ?
+        | (property extends 'gridTemplateColumns' | 'gridTemplateRows'
+            ? LiteralChecked<Pick<style, property>>[property]
+            : never)
+        | LiteralChecked<
+            Record<property, ScalarValue<value, property>>
+          >[property]
+    : style[property] extends readonly [unknown, ...unknown[]]
+      ? CheckedArray<style[property], property, tokens>
+      : LiteralChecked<Pick<style, property>, tokens>[property]
+}
+
+type LiteralChecked<style, tokens = {}> = {
   [property in keyof style]: style[property] extends string & Binding.Reference
     ? style[property] extends Binding.Reference<'*'>
       ? unknown
@@ -121,6 +191,40 @@ export type Checked<style, tokens = {}> = {
             : unknown)
 }
 
+type CheckedArray<values, property extends PropertyKey, tokens> = {
+  [index in keyof values]: Checked<
+    Record<property, values[index]>,
+    tokens
+  >[property]
+}
+
+/** Requires tokens for properties with configured values. */
+export type Tokens<
+  value,
+  tokens,
+  property extends keyof Literal.Properties,
+> = property extends `--${string}`
+  ? unknown
+  : [Token.Names<tokens, property>] extends [never]
+    ? unknown
+    : value extends readonly unknown[]
+      ? { [index in keyof value]: Tokens<value[index], tokens, property> }
+      : value extends
+            | Binding.Reference
+            | Token.Reference
+            | Token.Variable
+            | `${Token.Variable} !important`
+            | `[${string}]`
+            | `[${string}] !important`
+        ? unknown
+        : value extends Atom<Token.Names<tokens, property>>
+          ? unknown
+          : value extends number
+            ? `${value}` extends Token.Names<tokens, property>
+              ? unknown
+              : never
+            : never
+
 type Importance<value> = value extends readonly unknown[]
   ? { [key in keyof value]: Importance<value[key]> }
   : value extends `${infer body}!${infer suffix}`
@@ -263,7 +367,11 @@ export function parse(
   property: keyof Literal.Properties,
 ):
   | { invalid: true }
-  | { important: boolean; value: number | string | Token.Expression }
+  | {
+      custom?: true
+      important: boolean
+      value: number | string | Token.Expression
+    }
   | undefined {
   if (Token.isExpression(input)) {
     const text = input.parts
@@ -275,6 +383,16 @@ export function parse(
 
     const parts = [...input.parts]
     let remaining = text.length - String(parsed.value).length
+    if (parsed.custom) {
+      for (let index = 0; index < parts.length; index++) {
+        const part = parts[index]
+        if (part === '') continue
+        if (typeof part !== 'string') return undefined
+        parts[index] = part.slice(1)
+        break
+      }
+      remaining--
+    }
 
     for (let index = parts.length - 1; remaining > 0 && index >= 0; index--) {
       const part = parts[index]
@@ -286,7 +404,11 @@ export function parse(
       remaining -= count
     }
 
-    return { important: parsed.important, value: Token.compose(parts) }
+    return {
+      ...(parsed.custom ? { custom: true } : {}),
+      important: parsed.important,
+      value: Token.compose(parts.filter((part) => part !== '')),
+    }
   }
 
   if (typeof input !== 'string') return undefined
@@ -317,7 +439,15 @@ export function parse(
     marker = marker === 0 ? -1 : input.lastIndexOf('!', marker - 1)
   }
 
-  if (marker < 0) return undefined
+  if (marker < 0) {
+    if (bracketed(input))
+      return {
+        custom: true,
+        important: false,
+        value: scalar(input.slice(1, -1)),
+      }
+    return undefined
+  }
   if (input.slice(marker - 1) !== ' !important' || escaped(marker - 1))
     return { invalid: true }
 
@@ -326,14 +456,54 @@ export function parse(
   while (end > 0 && /[ \t\n\r\f]/.test(input[end - 1]!) && !escaped(end - 1))
     end--
 
-  const text = input.slice(0, end)
-  const numeric =
-    Literal.rule(property)?.kind === 'number' ||
-    Literal.rule(property)?.kind === 'grid-line'
-  const value =
-    numeric && /^[+-]?(?:\d*\.\d+|\d+)(?:[eE][+-]?\d+)?$/.test(text)
+  const body = input.slice(0, end)
+  const custom = bracketed(body)
+  const text = custom ? body.slice(1, -1) : body
+  const value = scalar(text)
+
+  return {
+    ...(custom ? { custom: true } : {}),
+    important: true as const,
+    value,
+  }
+
+  function scalar(text: string): number | string {
+    const numeric =
+      Literal.rule(property)?.kind === 'number' ||
+      Literal.rule(property)?.kind === 'grid-line'
+    return numeric && /^[+-]?(?:\d*\.\d+|\d+)(?:[eE][+-]?\d+)?$/.test(text)
       ? Number(text)
       : text
+  }
+}
 
-  return { important: true as const, value }
+/** Recognizes one enclosing pair without consuming native grid line lists. */
+function bracketed(value: string): boolean {
+  if (!value.startsWith('[') || !value.endsWith(']')) return false
+  let depth = 0
+  let quote = ''
+  for (let index = 0; index < value.length; index++) {
+    const character = value[index]!
+    if (character === '\\') {
+      index++
+      continue
+    }
+    if (quote) {
+      if (character === quote) quote = ''
+      continue
+    }
+    if (character === '/' && value[index + 1] === '*') {
+      const end = value.indexOf('*/', index + 2)
+      if (end < 0) return false
+      index = end + 1
+      continue
+    }
+    if (character === '"' || character === "'") {
+      quote = character
+      continue
+    }
+    if (character === '[') depth++
+    if (character === ']' && --depth === 0) return index === value.length - 1
+  }
+  return false
 }

package/src/metro/Graph.ts

@@ -1,7 +1,7 @@
 /** Reads a closed local source graph for native authoring without evaluating modules. @module */
 import * as Fs from 'node:fs'
 import * as Path from 'node:path'
-import * as Parser from 'oxc-parser'
+import * as Snapshot from '../node/internal/Snapshot.js'
 import type * as Graph from '../compiler/Graph.js'
 
 /** Collects relative source imports; package and asset imports remain owned by Metro. */
@@ -10,6 +10,7 @@ export function read(
   source: string,
   platform: string,
   root: string,
+  snapshot = Snapshot.create(),
 ) {
   const files = new Set<string>()
   const modules: Record<string, string> = Object.create(null)
@@ -31,7 +32,8 @@ export function read(
     modules[id] = source
     const resolved: Record<string, string | null> = Object.create(null)
     imports[id] = resolved
-    for (const statement of Parser.parseSync(filename, source).program.body) {
+    for (const statement of snapshot.parse({ moduleId: id, source }).program
+      .body) {
       if (
         !('source' in statement) ||
         !statement.source ||
@@ -62,7 +64,7 @@ export function read(
       )
       if (!target || !/\.[cm]?[jt]sx?$/.test(target)) continue
       resolved[specifier] = identity(target)
-      visit(target, Fs.readFileSync(target, 'utf8'))
+      visit(target, snapshot.readSync(target))
     }
   }
   visit(filename, source)

package/src/metro/transformer.ts

@@ -1,4 +1,7 @@
 /** Chains native authoring compilation into the configured Metro Babel transformer. @module */
+import * as Compilation from '../babel/internal/Compilation.js'
+import * as Compiler from '../compiler/Graph.js'
+import * as Snapshot from '../node/internal/Snapshot.js'
 import type * as Babel from '@babel/core'
 import * as Crypto from 'node:crypto'
 import * as Fs from 'node:fs'
@@ -28,6 +31,8 @@ export function create(
     'platform' | 'target' | 'moduleId' | 'modules' | 'imports' | 'colorScheme'
   > & { readonly root: string },
 ) {
+  const compilers = new Map<string, ReturnType<typeof Compiler.create>>()
+  const snapshot = Snapshot.create()
   const upstream: Upstream = Module.createRequire(import.meta.url)(upstreamPath)
   return {
     getCacheKey(...args: readonly unknown[]) {
@@ -77,6 +82,21 @@ export function create(
         Path.relative(options.root, filename).startsWith(`..${Path.sep}`)
       )
         return upstream.transform(input)
+
+      const graph = Graph.read(
+        filename,
+        input.src,
+        platform,
+        options.root,
+        snapshot,
+      )
+      const key = `${platform}:${filename}`
+      let compiler = compilers.get(key)
+      if (!compiler) {
+        compiler = Compiler.create()
+        compilers.set(key, compiler)
+      }
+
       return upstream.transform({
         ...input,
         plugins: [
@@ -86,7 +106,12 @@ export function create(
               ...options,
               platform,
               target: 'native',
-              ...Graph.read(filename, input.src, platform, options.root),
+              ...graph,
+              [Compilation.key]: {
+                compile: compiler.compile,
+                parse: snapshot.parse,
+                programs: snapshot.programs(graph.modules),
+              },
             },
           ],
           ...(input.plugins ?? []),

package/src/next/index.ts

@@ -5,9 +5,9 @@ import * as Module from 'node:module'
 import * as Path from 'node:path'
 
 /**
- * Adds source transformation, CSS delivery, and project dependency watching to both bundlers.
- * Preserves existing configuration hooks and creates `.zyzz/next` beneath the working directory.
- * Throws file-system errors during setup; compilation errors are reported by the bundler.
+ * Adds source transformation, CSS delivery, and imported dependency watching to both bundlers.
+ * Preserves configuration hooks. Compilation emits stylesheets beneath `.zyzz/next`.
+ * Compilation and file-system errors are reported by the bundler.
  */
 export function zyzz(config: NextConfig, options?: zyzz.Options): NextConfig
 export function zyzz(config: zyzz.Factory, options?: zyzz.Options): zyzz.Factory
@@ -27,24 +27,32 @@ export function zyzz(
   const loader = Module.createRequire(import.meta.url).resolve(
     'zyzz/next/loader',
   )
-  const loaderOptions = { reset: options.reset ?? false, root: process.cwd() }
-  const shared = Path.join(loaderOptions.root, '.zyzz', 'next', 'shared.css')
-  Fs.mkdirSync(Path.dirname(shared), { recursive: true })
-  try {
-    Fs.writeFileSync(shared, '', { flag: 'wx' })
-  } catch (error) {
-    if ((error as NodeJS.ErrnoException).code !== 'EEXIST') throw error
+  const loaderOptions = {
+    development: process.env.NODE_ENV === 'development',
+    reset: options.reset ?? false,
+    root: process.cwd(),
+  }
+  // Turbopack must observe the output directory before taking its filesystem snapshot.
+  const directory = Path.join(loaderOptions.root, '.zyzz', 'next')
+  Fs.mkdirSync(directory, { recursive: true })
+  for (const [name, source] of Object.entries({
+    'package.json': JSON.stringify({ sideEffects: true, type: 'module' }),
+    'style.css': '',
+  })) {
+    try {
+      Fs.writeFileSync(Path.join(directory, name), source, { flag: 'wx' })
+    } catch (error) {
+      if ((error as NodeJS.ErrnoException).code !== 'EEXIST') throw error
+    }
   }
   const pattern = '*.{ts,tsx,js,jsx,mts,cts,mjs,cjs}'
   const existing = config.turbopack?.rules?.[pattern]
   const rule = {
-    condition: {
-      all: [{ not: 'foreign' as const }, { not: { query: /zyzz-style/ } }],
-    },
+    condition: { not: 'foreign' as const },
     loaders: [
       {
         loader,
-        options: { ...loaderOptions, bundler: 'turbopack', mode: 'source' },
+        options: { ...loaderOptions, bundler: 'turbopack' },
       },
     ],
   }
@@ -70,29 +78,16 @@ export function zyzz(
         [pattern]: [
           ...(Array.isArray(existing) ? existing : existing ? [existing] : []),
           rule,
-          {
-            condition: { query: /zyzz-style/ },
-            loaders: [
-              {
-                loader,
-                options: {
-                  ...loaderOptions,
-                  bundler: 'turbopack',
-                  mode: 'style',
-                },
-              },
-            ],
-            as: '*.css',
-          },
         ],
-        '**/.zyzz/next/shared.css': {
+        '**/.zyzz/next/style.css': {
+          condition: { query: /zyzz=/ },
           loaders: [
             {
               loader,
               options: {
                 ...loaderOptions,
                 bundler: 'turbopack',
-                mode: 'shared',
+                mode: 'style',
               },
             },
           ],
@@ -111,7 +106,7 @@ export function zyzz(
         use: [
           {
             loader,
-            options: { ...loaderOptions, bundler: 'webpack', mode: 'source' },
+            options: { ...loaderOptions, bundler: 'webpack' },
           },
         ],
       })