zyzz 0.0.8 → 0.0.9

package/src/internal/Value.ts

@@ -29,7 +29,10 @@ export type Accepted<style, properties> = {
 }
 
 type AcceptedValue<value, property extends PropertyKey, properties> =
-  Extract<value, `[${string}]` | `[${string}] !important`> extends never
+  Extract<
+    value,
+    `${string} !custom` | `${string} !custom !important`
+  > extends never
     ? AcceptedMember<Record<property, value>, properties>[property]
     : value extends unknown
       ? AcceptedMember<Record<property, value>, properties>[property]
@@ -37,22 +40,15 @@ type AcceptedValue<value, property extends PropertyKey, properties> =
 
 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
+        | `${infer value} !custom`
+        | `${infer value} !custom !important`
+      ? 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]
@@ -135,15 +131,11 @@ 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]
+    | `${infer value} !custom`
+    | `${infer value} !custom !important`
+    ? value extends `${string} !${'custom' | 'important'}`
+      ? 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]
@@ -214,8 +206,8 @@ export type Tokens<
             | Token.Reference
             | Token.Variable
             | `${Token.Variable} !important`
-            | `[${string}]`
-            | `[${string}] !important`
+            | `${string} !custom`
+            | `${string} !custom !important`
         ? unknown
         : value extends Atom<Token.Names<tokens, property>>
           ? unknown
@@ -361,7 +353,7 @@ export type Fallbacks<atom> = atom | readonly [atom, ...atom[]]
 /** One declaration or a nonempty ordered sequence of declaration fallbacks. */
 export type Input<value> = Fallbacks<Atom<Exclude<value, undefined>>>
 
-/** Splits a trailing importance marker without interpreting quoted or escaped text. */
+/** Splits trailing custom and importance markers without interpreting quoted or escaped text. */
 export function parse(
   input: unknown,
   property: keyof Literal.Properties,
@@ -383,16 +375,6 @@ 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]
@@ -434,37 +416,38 @@ export function parse(
       '',
     )
 
-    if (!escaped(marker) && (suffix === '' || suffix === 'important')) break
+    if (
+      !escaped(marker) &&
+      (suffix === '' || suffix === 'important' || suffix === 'custom')
+    )
+      break
 
     marker = marker === 0 ? -1 : input.lastIndexOf('!', marker - 1)
   }
 
-  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))
+  if (marker < 0) return undefined
+  const suffix = input.slice(marker - 1)
+  if (
+    (suffix !== ' !important' && suffix !== ' !custom') ||
+    escaped(marker - 1)
+  )
     return { invalid: true }
 
   let end = marker
-
   while (end > 0 && /[ \t\n\r\f]/.test(input[end - 1]!) && !escaped(end - 1))
     end--
 
   const body = input.slice(0, end)
-  const custom = bracketed(body)
-  const text = custom ? body.slice(1, -1) : body
-  const value = scalar(text)
+  if (!body) return { invalid: true }
+  const nested = parse(body, property)
+  if (nested && 'invalid' in nested) return nested
+  const custom = suffix === ' !custom'
+  if (nested && (custom || nested.important)) return { invalid: true }
 
   return {
-    ...(custom ? { custom: true } : {}),
-    important: true as const,
-    value,
+    ...(custom || nested?.custom ? { custom: true } : {}),
+    important: !custom,
+    value: nested?.value ?? scalar(body),
   }
 
   function scalar(text: string): number | string {
@@ -476,34 +459,3 @@ export function parse(
       : text
   }
 }
-
-/** 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/unplugin/index.ts

@@ -577,9 +577,8 @@ const portable = createUnplugin<Options | undefined, false>(
       },
       webpack(compiler) {
         compiler.hooks.watchRun.tap('zyzz', () => {
-          // Directory invalidations must also discard cached source reads before the graph and loaders rebuild.
-          for (const file of compiler.modifiedFiles ?? [])
-            if (directories.has(file)) compiler.inputFileSystem?.purge?.(file)
+          // The graph rereads every source, including files absent from Webpack's invalidation batch.
+          for (const file of files) compiler.inputFileSystem?.purge?.(file)
         })
       },
     }

package/src/vite/index.ts

@@ -47,6 +47,18 @@ export function zyzz(options: zyzz.Options = {}): Plugin {
     ReturnType<typeof Snapshot.create>
   >()
   const states = new WeakMap<Environment, Map<string, Entry>>()
+  const removed = new WeakMap<Environment, Set<string>>()
+  const reads = new WeakMap<Environment, Map<string, string>>()
+  const compilers = new WeakMap<Environment, Graph.create.ReturnType>()
+
+  function compiler(environment: Environment) {
+    let value = compilers.get(environment)
+    if (!value) {
+      value = Graph.create()
+      compilers.set(environment, value)
+    }
+    return value
+  }
   const discoveries = new WeakMap<Environment, Promise<Map<string, string>>>()
   const contributionFiles = new WeakMap<Environment, Set<string>>()
   const assets = new Map<string, string>()
@@ -55,6 +67,8 @@ export function zyzz(options: zyzz.Options = {}): Plugin {
   const graphs = new Map<string, ReadonlySet<string>>()
   const initializers = new WeakMap<Environment, Entry>()
   const sourceEntrypoints = new Set<string>()
+  const identities = new Map<string, string>()
+  const lazyImports = new WeakMap<Parser.ParseResult, string[]>()
   let root: string
 
   function snapshot(environment: Environment) {
@@ -78,7 +92,12 @@ export function zyzz(options: zyzz.Options = {}): Plugin {
   }
 
   function sourceId(file: string) {
-    return `app/${Path.relative(root, file).split(Path.sep).join('/')}`
+    let id = identities.get(file)
+    if (!id) {
+      id = `app/${Path.relative(root, file).split(Path.sep).join('/')}`
+      identities.set(file, id)
+    }
+    return id
   }
 
   function resource(id: string) {
@@ -288,9 +307,19 @@ export function zyzz(options: zyzz.Options = {}): Plugin {
     file: string,
     event: string,
   ) {
+    reads.delete(environment)
     if (event === 'delete') {
+      if (entries(environment).has(file)) {
+        let files = removed.get(environment)
+        if (!files) {
+          files = new Set()
+          removed.set(environment, files)
+        }
+        files.add(file)
+      }
       entries(environment).delete(file)
       snapshot(environment).delete(file, sourceId(file))
+      identities.delete(file)
     }
 
     const pending = discoveries.get(environment)
@@ -348,7 +377,17 @@ export function zyzz(options: zyzz.Options = {}): Plugin {
       host.watch(file)
 
       const id = sourceId(file)
-      const text = source ?? (await snapshot(entry.environment).read(file))
+      let cached = reads.get(entry.environment)
+      if (!cached) {
+        cached = new Map()
+        reads.set(entry.environment, cached)
+      }
+      // Full-project compilation must not reuse reads from concurrent module transforms.
+      const text =
+        source ??
+        (everything ? undefined : cached.get(file)) ??
+        (await snapshot(entry.environment).read(file))
+      if (!everything) cached.set(file, text)
 
       modules[id] = text
 
@@ -452,18 +491,22 @@ export function zyzz(options: zyzz.Options = {}): Plugin {
       }
 
       // Lazy imports stay outside this compile but scope the documents that load them.
-      const specifiers: string[] = []
-
-      Walker.walk(parsed.program, {
-        enter(node) {
-          if (
-            node.type === 'ImportExpression' &&
-            node.source.type === 'Literal' &&
-            typeof node.source.value === 'string'
-          )
-            specifiers.push(node.source.value)
-        },
-      })
+      let specifiers = lazyImports.get(parsed)
+      if (!specifiers) {
+        specifiers = []
+        const collected = specifiers
+        Walker.walk(parsed.program, {
+          enter(node) {
+            if (
+              node.type === 'ImportExpression' &&
+              node.source.type === 'Literal' &&
+              typeof node.source.value === 'string'
+            )
+              collected.push(node.source.value)
+          },
+        })
+        lazyImports.set(parsed, specifiers)
+      }
 
       const targets = new Set<string>()
 
@@ -490,8 +533,9 @@ export function zyzz(options: zyzz.Options = {}): Plugin {
       const selected = contributionFiles.get(entry.environment)?.has(file)
 
       if (allSources) {
-        const { program } = Parser.parseSync('source.tsx', source, {
-          sourceType: 'module',
+        const { program } = snapshot(entry.environment).parse({
+          moduleId: sourceId(file),
+          source,
         })
         const dynamic: import('@oxc-project/types').ImportExpression[] = []
 
@@ -676,6 +720,8 @@ export function zyzz(options: zyzz.Options = {}): Plugin {
       entry.files = files
       const map = Mapping.toEncodedMap(new Mapping.GenMapping())
       return {
+        imports,
+        modules: result.modules,
         code: output.code,
         contractIds: Object.keys(result.contracts),
         css: '',
@@ -917,6 +963,8 @@ export function zyzz(options: zyzz.Options = {}): Plugin {
     entry.files = files
 
     return {
+      imports,
+      modules: result.modules,
       code: output.code,
       contractIds: Object.keys(compiled),
       css: styles.join('\n'),
@@ -935,6 +983,7 @@ export function zyzz(options: zyzz.Options = {}): Plugin {
   /** Compiles every discovered source once so index.html can inline each configuration's script before modules load. */
   async function initializations(server: ViteDevServer) {
     const environment = server.environments.client
+    reads.delete(environment)
     const host: Host = {
       asset: async (file) => file,
       resolve: (source, importer) =>
@@ -950,7 +999,7 @@ export function zyzz(options: zyzz.Options = {}): Plugin {
       if (file === undefined) return []
 
       entry = {
-        compiler: Graph.create(),
+        compiler: compiler(environment),
         environment,
         file,
         files: new Set([file]),
@@ -1117,6 +1166,9 @@ export function zyzz(options: zyzz.Options = {}): Plugin {
   }
 
   return {
+    buildStart() {
+      reads.delete(this.environment)
+    },
     config: {
       order: 'post',
       handler(config) {
@@ -1261,27 +1313,73 @@ export function zyzz(options: zyzz.Options = {}): Plugin {
     async watchChange(file, change) {
       await updateDiscovery(this.environment, file, change.event)
     },
-    async hotUpdate({ file, modules, timestamp, type }) {
+    async hotUpdate({ file, modules, timestamp, type, server }) {
       await updateDiscovery(this.environment, file, type)
 
-      const affected = new Set(modules)
+      const state = entries(this.environment)
+      const first = [...state.values()].find(
+        (entry) => entry.files.has(file) || eager(file),
+      )
+      if (!first && !removed.get(this.environment)?.has(file)) return modules
+
+      // Failed edits retain normal invalidation so Vite reports errors on reload.
+      const output =
+        first && type === 'update' && eligible(file)
+          ? await compile(
+              first,
+              {
+                resolve: (source, importer) =>
+                  this.environment.pluginContainer.resolveId(source, importer),
+                watch: (file) => {
+                  server.watcher.add(file)
+                },
+                asset: async (file) => file,
+              },
+              undefined,
+              true,
+              true,
+            ).catch(() => undefined)
+          : undefined
+      const affected = new Set(
+        modules.filter((module) => {
+          const entry = module.id && state.get(module.id)
+          return (
+            !output ||
+            !entry ||
+            entry.code !== output.modules[sourceId(entry.file)]?.code ||
+            entry.imports !==
+              JSON.stringify(output.imports[sourceId(entry.file)])
+          )
+        }),
+      )
+      const ids = new Set<string>()
+      if (type === 'delete') ids.add(cssId(file))
 
       for (const entry of entries(this.environment).values()) {
         if (!entry.files.has(file) && !eager(file)) continue
 
         // Theme scopes affect CSS even when Vite's JavaScript import was erased.
-        for (const id of [entry.file, cssId(entry.file), sharedId]) {
-          const module = this.environment.moduleGraph.getModuleById(id)
-          if (!module) continue
-
-          this.environment.moduleGraph.invalidateModule(
-            module,
-            new Set(),
-            timestamp,
-            true,
-          )
-          affected.add(module)
-        }
+        if (
+          !output ||
+          entry.code !== output.modules[sourceId(entry.file)]?.code ||
+          entry.imports !== JSON.stringify(output.imports[sourceId(entry.file)])
+        )
+          ids.add(entry.file)
+        ids.add(cssId(entry.file))
+        ids.add(sharedId)
+      }
+
+      for (const id of ids) {
+        const module = this.environment.moduleGraph.getModuleById(id)
+        if (!module) continue
+
+        this.environment.moduleGraph.invalidateModule(
+          module,
+          new Set(),
+          timestamp,
+          true,
+        )
+        affected.add(module)
       }
 
       return [...affected]
@@ -1298,6 +1396,8 @@ export function zyzz(options: zyzz.Options = {}): Plugin {
         file === undefined
           ? entries(this.environment).values().next().value
           : entries(this.environment).get(file)
+      // A pruned JavaScript module can leave its stylesheet loaded in the browser.
+      if (!entry && file && removed.get(this.environment)?.has(file)) return ''
       if (!entry) throw new Error(`Unknown Zyzz stylesheet: ${file}`)
 
       const output = await compile(
@@ -1353,12 +1453,13 @@ export function zyzz(options: zyzz.Options = {}): Plugin {
 
       if (!entry) {
         entry = {
-          compiler: Graph.create(),
+          compiler: compiler(this.environment),
           environment: this.environment,
           file: id,
           files: new Set([id]),
         }
         state.set(id, entry)
+        removed.get(this.environment)?.delete(id)
       }
 
       const output = await compile(
@@ -1380,6 +1481,9 @@ export function zyzz(options: zyzz.Options = {}): Plugin {
         code,
       )
 
+      entry.imports = JSON.stringify(output.imports[sourceId(entry.file)])
+      entry.code = output.code
+
       if (native) return { code: output.code, map: JSON.stringify(output.map) }
 
       // Keep the CSS dependency even when the current graph has no live rules.
@@ -1479,6 +1583,8 @@ export function zyzz(options: zyzz.Options = {}): Plugin {
 }
 
 type Entry = {
+  code?: string
+  imports?: string
   environment: Environment
   compiler: Graph.create.ReturnType
   file: string