zyzz 0.0.5 → 0.0.7

package/src/next/loader.ts

@@ -1,31 +1,23 @@
 /** Loads a physical source graph through Next.js resolution and emits cache-owned CSS. @module */
+import * as AtRules from '../compiler/internal/AtRules.js'
 import * as Crypto from 'node:crypto'
 import * as Fs from 'node:fs/promises'
 import * as Path from 'node:path'
-import * as Parser from 'oxc-parser'
-import * as Graph from '../compiler/Graph.js'
-import * as AtRules from '../compiler/internal/AtRules.js'
-import * as Contract from '../compiler/internal/Contract.js'
+import * as Project from './internal/Project.js'
 
-type Context = {
-  addContextDependency(directory: string): void
-  addDependency(file: string): void
+type Context = Project.Context & {
   async(): (error: Error | null, code?: string, map?: object) => void
   getOptions(): {
     bundler: string
     mode: 'shared' | 'source' | 'style'
+    reset?: boolean | undefined
     root: string
   }
-  getResolve(
-    options: object,
-  ): (
-    directory: string,
-    specifier: string,
-    callback: (error: Error | null, file?: string | false) => void,
-  ) => void
-  resourcePath: string
 }
 
+// Next owns loader worker lifetimes. Each project retains only its latest graph in that worker.
+const projects = new Map<string, ReturnType<typeof Project.create>>()
+
 /** Loader-runner boundary used by Webpack and Turbopack. */
 export default function loader(this: Context, source: string): void {
   const callback = this.async()
@@ -40,14 +32,6 @@ async function compile(context: Context, source: string) {
   const options = context.getOptions()
   const root = options.root
   const directory = Path.resolve(root, '.zyzz', 'next')
-  const modules: Record<string, string> = Object.create(null)
-  const imports: Record<string, Record<string, string | null>> = Object.create(
-    null,
-  )
-  const contracts: Record<string, string> = Object.create(null)
-  const resolve = context.getResolve({})
-  const id = (file: string) =>
-    `app/${Path.relative(root, file).split(Path.sep).join('/')}`
   const eligible = (file: string) =>
     /\.[cm]?[jt]sx?$/.test(file) &&
     !/\.(?:d|test|test-d|bench|bench-d)\.[cm]?[jt]sx?$/.test(file) &&
@@ -58,142 +42,31 @@ async function compile(context: Context, source: string) {
           part === '..' || part === 'node_modules' || part.startsWith('.'),
       )
 
-  if (options.mode !== 'shared' && !eligible(context.resourcePath))
-    return { code: source, map: undefined }
-
-  async function visit(file: string, text?: string): Promise<void> {
-    const name = id(file)
-    if (Object.hasOwn(modules, name)) return
-
-    context.addDependency(file)
-    modules[name] = text ?? (await Fs.readFile(file, 'utf8'))
-    const links: Record<string, string | null> = Object.create(null)
-    imports[name] = links
-    const parsed = Parser.parseSync(file, modules[name]!, {
-      sourceType: 'module',
-    })
-
-    for (const node of parsed.program.body) {
-      if (
-        (node.type !== 'ImportDeclaration' &&
-          node.type !== 'ExportNamedDeclaration' &&
-          node.type !== 'ExportAllDeclaration') ||
-        !node.source
-      )
-        continue
-      if (
-        node.type === 'ImportDeclaration'
-          ? node.importKind === 'type'
-          : node.exportKind === 'type'
-      )
-        continue
-
-      const specifier = node.source.value
-      links[specifier] = null
-      // Next owns this virtual module, which has no physical stylesheet contract.
-      if (specifier === 'next/root-params') continue
-      if (
-        specifier === 'zyzz' ||
-        (specifier.startsWith('zyzz/') && specifier !== 'zyzz/default') ||
-        specifier.startsWith('node:')
-      )
-        continue
-
-      const resolved = await new Promise<string | false | undefined>(
-        (accept, reject) => {
-          resolve(Path.dirname(file), specifier, (error, value) =>
-            error ? reject(error) : accept(value),
-          )
-        },
-      )
-      if (!resolved || !/\.[cm]?[jt]sx?$/.test(resolved)) continue
-      if (eligible(resolved)) {
-        links[specifier] = id(resolved)
-        await visit(resolved)
-        continue
-      }
-
-      const sidecar = `${resolved}.zyzz.json`
-      try {
-        contracts[resolved] = await Fs.readFile(sidecar, 'utf8')
-        context.addDependency(sidecar)
-        links[specifier] = resolved
-      } catch (error) {
-        if ((error as NodeJS.ErrnoException).code !== 'ENOENT') throw error
-      }
-    }
-  }
-
-  async function discover(directory: string): Promise<void> {
-    const items = await Fs.readdir(directory, { withFileTypes: true })
-
-    // Recursive tracking of a package root follows every installed dependency.
-    // A dependency symlink back to an ancestor, as a package linked from its
-    // own repository, is rejected as a loop, so such a root is tracked through
-    // its files and subdirectories instead.
-    if (
-      !items.some((item) => item.name === 'node_modules') ||
-      !(await loops(directory))
+  // Next.js hoists instrumentation CSS out of route stylesheets without loading it.
+  if (
+    /^(?:src\/)?instrumentation-client\.[cm]?[jt]s$/.test(
+      Path.relative(root, context.resourcePath).split(Path.sep).join('/'),
     )
-      context.addContextDependency(directory)
-
-    for (const item of items) {
-      if (
-        item.name.startsWith('.') ||
-        [
-          'node_modules',
-          'dist',
-          'build',
-          'coverage',
-          'test',
-          'tests',
-          '__tests__',
-        ].includes(item.name)
-      )
-        continue
-      const file = Path.join(directory, item.name)
-      if (item.isDirectory()) await discover(file)
-      else if (item.isFile() && eligible(file)) await visit(file)
-    }
-  }
-
-  if (options.mode !== 'shared') await visit(context.resourcePath, source)
-  await discover(root)
-  const loaded = new Set<string>()
-  async function dependencies(file: string): Promise<void> {
-    if (loaded.has(file)) return
-    loaded.add(file)
+  )
+    return { code: source, map: undefined }
 
-    const metadata = Contract.read(contracts[file]!, new Map(), file)
-    for (const section of metadata.stylesheets) {
-      let owner = file
-      for (const specifier of section.dependency ?? []) {
-        const target = await new Promise<string | false | undefined>(
-          (accept, reject) => {
-            resolve(Path.dirname(owner), specifier, (error, value) =>
-              error ? reject(error) : accept(value),
-            )
-          },
-        )
-        if (!target || !Path.isAbsolute(target))
-          throw new Error('Unable to resolve packed stylesheet dependency.')
+  if (options.mode !== 'shared' && !eligible(context.resourcePath))
+    return { code: source, map: undefined }
 
-        const links = (imports[owner] ??= Object.create(null))
-        links[specifier] = target
-        if (!Object.hasOwn(contracts, target)) {
-          const sidecar = `${target}.zyzz.json`
-          contracts[target] = await Fs.readFile(sidecar, 'utf8')
-          context.addDependency(sidecar)
-        }
-        await dependencies(target)
-        owner = target
-      }
-    }
+  const key = JSON.stringify([root, options.bundler, options.reset ?? false])
+  let project = projects.get(key)
+  if (!project) {
+    project = Project.create(options)
+    projects.set(key, project)
   }
-  for (const file of Object.keys(contracts)) await dependencies(file)
-
-  const graph = Graph.compile({ contracts, imports, modules })
-  const output = graph.modules[id(context.resourcePath)]
+  const graph = await project.compile(
+    context,
+    options.mode === 'shared' ? undefined : source,
+  )
+  const output =
+    graph.modules[
+      `app/${Path.relative(root, context.resourcePath).split(Path.sep).join('/')}`
+    ]
 
   const assets = new Map<string, string>()
   for (const [placeholder, target] of Object.entries(
@@ -346,38 +219,3 @@ async function compile(context: Context, source: string) {
 
   return { code: `${output.code}\n${requests.join('\n')}`, map }
 }
-
-/** Whether an installed dependency links back to the directory or one of its ancestors. */
-async function loops(directory: string): Promise<boolean> {
-  const installed = Path.join(directory, 'node_modules')
-  const entries = await Fs.readdir(installed, { withFileTypes: true }).catch(
-    () => [],
-  )
-  const candidates = (
-    await Promise.all(
-      entries.map(async (entry) => {
-        if (!entry.name.startsWith('@'))
-          return [Path.join(installed, entry.name)]
-
-        const scoped = Path.join(installed, entry.name)
-
-        return (await Fs.readdir(scoped).catch(() => [])).map((name) =>
-          Path.join(scoped, name),
-        )
-      }),
-    )
-  ).flat()
-
-  for (const candidate of candidates) {
-    const stat = await Fs.lstat(candidate).catch(() => undefined)
-    if (!stat?.isSymbolicLink()) continue
-
-    const target = await Fs.realpath(candidate).catch(() => undefined)
-    if (target === undefined) continue
-
-    const relative = Path.relative(target, directory)
-    if (!relative.startsWith('..') && !Path.isAbsolute(relative)) return true
-  }
-
-  return false
-}

package/src/node/Reset.ts

@@ -0,0 +1,7 @@
+/** Loads the canonical reset stylesheet for web bundler adapters. @module */
+import * as Fs from 'node:fs'
+
+/** Reads the packaged stylesheet without adding a dependency on browser CSS loaders. */
+export function read(): string {
+  return Fs.readFileSync(new URL('../reset.css', import.meta.url), 'utf8')
+}

package/src/unplugin/index.ts

@@ -3,6 +3,7 @@ import * as Mapping from '@jridgewell/gen-mapping'
 import * as Crypto from 'node:crypto'
 import * as Fs from 'node:fs/promises'
 import * as Path from 'node:path'
+import * as Reset from '../node/Reset.js'
 import * as Parser from 'oxc-parser'
 import { createUnplugin } from 'unplugin'
 import type { UnpluginBuildContext } from 'unplugin'
@@ -16,6 +17,8 @@ import * as Vite from '../vite/index.js'
 export type Options = {
   /** Rewrite authoring calls. Defaults to true. */
   readonly compiler?: boolean | undefined
+  /** Include the CSS reset. Defaults to false. */
+  readonly reset?: boolean | undefined
   /** Source directory scanned for modules and global contributions. Defaults to the working directory. */
   readonly root?: string | undefined
 }
@@ -280,6 +283,7 @@ const portable = createUnplugin<Options | undefined, false>(
 
           const result = compiler.compile({
             compiler: options.compiler,
+            reset: options.reset ? Reset.read() : undefined,
             contracts,
             imports,
             modules,

package/src/variants.ts

@@ -51,6 +51,7 @@ type CheckedChoice<
       values: values,
     ) => CheckedStyles<body, tokens, layers, mappings> &
       Binding.Checked<body> &
+      Binding.TokenSlots<body, values, tokens, mappings> &
       (string extends keyof values
         ? never
         : values extends Record<string, string | number> &

package/src/vite/index.ts

@@ -10,6 +10,7 @@ import * as Lightning from 'lightningcss'
 import * as Crypto from 'node:crypto'
 import * as Fs from 'node:fs/promises'
 import * as Path from 'node:path'
+import * as Reset from '../node/Reset.js'
 import { isBuiltin } from 'node:module'
 import * as Parser from 'oxc-parser'
 import * as Walker from 'oxc-walker'
@@ -34,6 +35,8 @@ export function zyzz(options: zyzz.Options = {}): Plugin {
           options.native.units && Object.freeze({ ...options.native.units }),
       })
     : undefined
+  if (native && options.reset)
+    throw new Error('The CSS reset is only supported by web builds.')
   if (native && options.compiler === false)
     throw new Error('Native builds require source compilation.')
 
@@ -640,6 +643,7 @@ export function zyzz(options: zyzz.Options = {}): Plugin {
 
     const result = entry.compiler.compile({
       compiler: options.compiler,
+      reset: options.reset ? Reset.read() : undefined,
       native,
       contracts,
       development: entry.environment.mode !== 'build',
@@ -762,17 +766,39 @@ export function zyzz(options: zyzz.Options = {}): Plugin {
     for (const [key, target] of Object.entries(result.sharedAssets ?? {})) {
       const raw = target.split(/[?#]/)[0]!
 
-      const file = await Fs.realpath(
-        target.startsWith('app/')
-          ? Path.join(root, decodeURIComponent(raw.slice(4)))
-          : Path.isAbsolute(raw)
-            ? decodeURIComponent(raw)
-            : (() => {
-                throw new Error('Asset path escapes the Vite graph.')
-              })(),
-      )
-
       const identity = result.sharedAssetOwners?.[key]
+      const path = target.startsWith('app/')
+        ? Path.join(root, decodeURIComponent(raw.slice(4)))
+        : Path.isAbsolute(raw)
+          ? decodeURIComponent(raw)
+          : undefined
+      if (!path) throw new Error('Asset path escapes the Vite graph.')
+
+      const asset = await (async () => {
+        try {
+          return { file: await Fs.realpath(path), package: false }
+        } catch (error) {
+          if (
+            (error as NodeJS.ErrnoException).code !== 'ENOENT' ||
+            !identity?.startsWith('app/')
+          )
+            throw error
+
+          const importer = Path.join(root, identity.slice(4))
+          const specifier = Path.relative(Path.dirname(importer), path)
+            .split(Path.sep)
+            .join('/')
+          if (specifier.startsWith('.') || Path.isAbsolute(specifier))
+            throw error
+          const resolved = await host.resolve(specifier, importer)
+          if (!resolved || resolved.external) throw error
+          return {
+            file: await Fs.realpath(resolved.id.split('?')[0]!),
+            package: true,
+          }
+        }
+      })()
+      const file = asset.file
 
       const owner = identity?.startsWith('app/')
         ? appRoot
@@ -782,9 +808,10 @@ export function zyzz(options: zyzz.Options = {}): Plugin {
 
       const relative = owner ? Path.relative(owner, file) : '..'
       if (
-        relative === '..' ||
-        relative.startsWith(`..${Path.sep}`) ||
-        Path.isAbsolute(relative)
+        !asset.package &&
+        (relative === '..' ||
+          relative.startsWith(`..${Path.sep}`) ||
+          Path.isAbsolute(relative))
       )
         throw new Error('Asset path escapes its owning package.')
 
@@ -793,7 +820,7 @@ export function zyzz(options: zyzz.Options = {}): Plugin {
 
       let url: string
 
-      if (/[?#%]/.test(file)) {
+      if (asset.package || /[?#%]/.test(file)) {
         if (entry.environment.mode === 'build') {
           url = await host.asset(file)
 
@@ -1465,6 +1492,8 @@ export declare namespace zyzz {
     readonly compiler?: boolean | undefined
     /** Native context captured at creation. Disables CSS delivery and initialization scripts. */
     readonly native?: Graph.compile.Options['native']
+    /** Include the CSS reset. Defaults to false. */
+    readonly reset?: boolean | undefined
     /**
      * Inline each configuration's `script()` at the start of index.html's head.
      * False skips injection for documents that inline the script themselves.