@wix/origami-transforms 0.1.26 → 0.1.28

package/dist/cssPlugins/svg.d.ts

@@ -1,4 +1,7 @@
-export function loadSvgs(ids: any): Promise<undefined> | undefined;
+export function loadSvgs(ids: any): Promise<{
+    fetched: number;
+    failed: number;
+}> | undefined;
 export function loadedSvg(id: any): any;
 export function svgInfo(svg: any): {
     type: any;

package/dist/transform/bi.d.ts

@@ -0,0 +1,4 @@
+/** Aggregate completed dev invocations; paths are only in this local set, never in rows. */
+export function countPlugin(context: any, duration: any): void;
+/** @param {'malformed_custom_enum' | 'unmappable_preset' | 'svg_not_loaded' | 'media_not_wix'} key */
+export function warn(key: "malformed_custom_enum" | "unmappable_preset" | "svg_not_loaded" | "media_not_wix"): void;

package/dist/transform/context.d.ts

@@ -1,3 +1,4 @@
+export function pageIdFor(context: any): any;
 export function createContextFactory({ layout, command }: {
     layout: any;
     command: any;

package/dist/transform/css/runPlugins.d.ts

@@ -1,4 +1,7 @@
-export function pluginError(plugin: any, context: any, cause: any): Error;
+export function pluginError(plugin: any, context: any, cause: any): Error & {
+    error_name: import("@wix/origami-bi").ErrorName;
+    error_kind: import("@wix/origami-bi").ErrorKind;
+};
 export function runCssPlugins({ plugins, root, context }: {
     plugins: any;
     root: any;

package/dist/transform/layoutError.d.ts

@@ -9,6 +9,7 @@ export class LayoutError extends Error {
         line?: number;
         column?: number;
     });
+    error_name: string;
     stack: string;
     violations: readonly string[];
     location: {

package/dist/transform/pipeline.d.ts

@@ -15,15 +15,10 @@ export function createTransformPipeline({ layout, jsxPlugins, cssPlugins }: {
      * @param {{ ssr?: boolean | undefined }} [contextOptions] */
     transformJsx: (code: string, id: string, { ssr }?: {
         ssr?: boolean | undefined;
-    }) => Promise<{
-        code: any;
-        map: any;
-    }>;
+    }) => Promise<any>;
     postcssPlugin: {
+        Once: (...args: any[]) => any;
         postcssPlugin: string;
-        Once(root: any, { result }: {
-            result: any;
-        }): void | Promise<void>;
     };
     babelOptionsFor: (id: any, { ssr }?: {
         ssr?: boolean | undefined;
@@ -43,5 +38,8 @@ export function createTransformPipeline({ layout, jsxPlugins, cssPlugins }: {
     };
     /** Whether a stylesheet whose last CSS run failed declared `file`, so an edit to it may fix the stylesheet. */
     failedStylesheetDependsOn: (file: any) => boolean;
+    close: () => any;
+    /** @param {string} file @param {() => void} reload */
+    handleHotUpdate: (file: string, reload: () => void) => any;
     setCommand: (value: any) => void;
 };

package/dist/transform/types.d.ts

@@ -69,7 +69,10 @@ export type JsxTransformPlugin = TransformPluginBase & {
  * that needs nothing loaded stays synchronous for PostCSS.
  */
 export type CssTransformPlugin = TransformPluginBase & {
-    prepare?: (root: import("postcss").Root, context: CssTransformContext) => Promise<void> | void;
+    prepare?: (root: import("postcss").Root, context: CssTransformContext) => Promise<void | {
+        fetched: number;
+        failed: number;
+    }> | void;
     validate?: (root: import("postcss").Root, context: CssTransformContext) => void;
     transform: (root: import("postcss").Root, context: CssTransformContext) => void;
 };
@@ -80,5 +83,5 @@ export type CssTransformPlugin = TransformPluginBase & {
  */
 export type CssTransformContext = TransformContext & {
     addDependency?: (file: string) => void;
-    warn?: (node: import("postcss").Node, text: string) => void;
+    warn?: (node: import("postcss").Node, text: string, key?: "malformed_custom_enum" | "unmappable_preset" | "svg_not_loaded") => void;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/origami-transforms",
-  "version": "0.1.26",
+  "version": "0.1.28",
   "description": "Babel and PostCSS checks and transforms for Wix origami page files.",
   "main": "./src/index.js",
   "files": [
@@ -12,16 +12,18 @@
     "lint": "oxlint .",
     "test": "node --test test/*.spec.js",
     "test:browser": "node test/spx.browser.mjs && node test/semanticContainer.browser.mjs",
-    "clean": "rm -rf dist tsconfig.tsbuildinfo"
+    "clean": "rm -rf dist tsconfig.tsbuildinfo",
+    "typecheck": "tsc --noEmit"
   },
   "dependencies": {
     "@babel/core": "^7.26.0",
     "@babel/parser": "^7.25.0",
     "@babel/types": "^7.25.2",
-    "@wix/origami-fonts": "1.0.3",
+    "@wix/origami-fonts": "1.0.4",
     "@wix/origami-system-components": "1.10.6",
     "postcss": "^8.5.3",
-    "postcss-custom-media": "^12.0.1"
+    "postcss-custom-media": "^12.0.1",
+    "@wix/origami-bi": "0.10.0"
   },
   "devDependencies": {
     "@types/node": "^22.0.0",
@@ -69,5 +71,5 @@
   },
   "type": "module",
   "types": "./dist/index.d.ts",
-  "falconPackageHash": "9227a9507341d80c3e8c3d3ec21398c04bb4a02e81c616a7cfb70ceb"
+  "falconPackageHash": "1fbeabb662063771eaf3dbbb2b84d3ea8ba71598556ee82a91d545fa"
 }

package/src/cssPlugins/customEnums.js

@@ -331,7 +331,8 @@ export const customEnumsPlugin = {
                           `type, such as wixEditorElements.Button, in an element rule under the editor element's. That ` +
                           `element's enums are left as authored.`
                     : `custom-enums: @custom-enum ${block.params}${where(block)}: can't be read; it needs a --key, a ` +
-                          `default: that is one of its @option blocks, and an element rule around it. Its key is left as authored.`
+                          `default: that is one of its @option blocks, and an element rule around it. Its key is left as authored.`,
+                'malformed_custom_enum'
             )
         }
 

package/src/cssPlugins/presets.js

@@ -53,7 +53,8 @@ export const presetsPlugin = {
                     declaration,
                     `presets: ${context.relativePath ?? context.filePath}: ` +
                         `${declaration.prop} on "${selectors.join(', ')}": set --preset on #id or .id alone, ` +
-                        `and an inner element's as --preset-{key} on the rule of the element it sits in. Left as authored.`
+                        `and an inner element's as --preset-{key} on the rule of the element it sits in. Left as authored.`,
+                'unmappable_preset'
                 )
                 continue
             }

package/src/cssPlugins/shapeDividers.js

@@ -125,7 +125,7 @@ export const shapeDividersPlugin = {
             const allVars = { ...baseVars.get(id), ...vars }
             const declarations = layerDeclarations(id, allVars)
             if (declarations === undefined) {
-                if (allVars['--svgId']) context.warn?.(rule, `Couldn't draw the shape divider's SVG ${allVars['--svgId']}: it didn't load from Wix's CDN, or has no view box`)
+                if (allVars['--svgId']) context.warn?.(rule, `Couldn't draw the shape divider's SVG ${allVars['--svgId']}: it didn't load from Wix's CDN, or has no view box`, 'svg_not_loaded')
                 continue
             }
             const layerRule = postcss.rule({ selector: `${rule.selector} ${LAYER}`, source: rule.source })

package/src/cssPlugins/stackChildren.js

@@ -17,14 +17,15 @@ import { literalIdOf, parseStructure, structureFileOf, walk } from './structureF
 const CONTENT_WRAPPER = 'internal-container-content-wrapper'
 const BASE = ''
 
-// What a stack child may write, per direction. `0` is allowed wherever a length is.
+// What a stack child may write, per direction. `0` is allowed wherever a length is. Exports write `width: max-content`
+// on a stack child, and DM's import accepts it.
 const ALLOWED = {
-    vertical: { width: ['spx', 'px', 'vw', 'vh', '%', 'calc'], margin: ['spx', 'px', 'vw', 'vh', '%'] },
-    horizontal: { width: ['spx', 'px', 'vw', 'vh', 'calc'], margin: ['spx', 'px', 'vw', 'vh'] },
+    vertical: { width: ['spx', 'px', 'vw', 'vh', '%', 'calc', 'max-content'], margin: ['spx', 'px', 'vw', 'vh', '%'] },
+    horizontal: { width: ['spx', 'px', 'vw', 'vh', 'calc', 'max-content'], margin: ['spx', 'px', 'vw', 'vh'] },
 }
 
 const UNIT = /^-?(?:\d+\.?\d*|\.\d+)(px|vw|vh|%)$/i
-const LABELS = { spx: '--spx()', px: 'px', vw: 'vw', vh: 'vh', '%': '%', calc: 'calc()' }
+const LABELS = { spx: '--spx()', px: 'px', vw: 'vw', vh: 'vh', '%': '%', calc: 'calc()', 'max-content': 'max-content' }
 
 /** `width` → 'width', `margin`/`margin-*` → 'margin', anything else → undefined. */
 const kindOf = prop =>
@@ -47,9 +48,10 @@ const tokens = value => {
     return result
 }
 
-/** The kind of length a token is: 'spx', 'px', 'vw', 'vh', '%', 'calc', 'zero', or undefined. */
+/** The kind of length a token is: 'spx', 'px', 'vw', 'vh', '%', 'calc', 'max-content', 'zero', or undefined. */
 const lengthOf = token => {
     if (/^--spx\(.*\)$/.test(token)) return 'spx'
+    if (/^max-content$/i.test(token)) return 'max-content'
     if (/^calc\(.*\)$/i.test(token)) return 'calc'
     if (/^-?0*\.?0+$/.test(token)) return 'zero'
     return UNIT.exec(token)?.[1].toLowerCase()

package/src/cssPlugins/svg.js

@@ -16,13 +16,16 @@ const loading = new Map()
 const svgFileName = id => (id.endsWith('.svg') ? id : `${id}.svg`)
 
 const load = async id => {
+    let ok = false
     try {
         const response = await fetch(SHAPES_URL + svgFileName(id), { signal: AbortSignal.timeout(FETCH_TIMEOUT_MS) })
         const svg = response.ok ? await response.text() : ''
-        loaded.set(id, SVG_TAG.test(svg) ? svg : null)
+        ok = SVG_TAG.test(svg)
+        loaded.set(id, ok ? svg : null)
     } catch {
         // Not loaded: the plugin warns and keeps the value as written.
     }
+    return ok
 }
 
 /** Loads the SVGs of `ids` that aren't loaded yet. */
@@ -33,7 +36,7 @@ export const loadSvgs = ids => {
             if (!loading.has(id)) loading.set(id, load(id).finally(() => loading.delete(id)))
             return loading.get(id)
         })
-    return pending.length ? Promise.all(pending).then(() => undefined) : undefined
+    return pending.length ? Promise.all(pending).then(results => ({ fetched: results.length, failed: results.filter(ok => !ok).length })) : undefined
 }
 
 /** The SVG's markup, once `loadSvgs` loaded it. */

package/src/cssPlugins/wixVectorUrls.js

@@ -29,7 +29,7 @@ export const wixVectorUrlsPlugin = {
             declaration.value = declaration.value.replace(WIX_VECTOR_URL, (url, _quote, id) => {
                 const svg = loadedSvg(id)
                 if (svg === undefined) {
-                    context.warn?.(declaration, `Couldn't load the SVG ${id} from Wix's CDN, so ${url} stays as written`)
+                    context.warn?.(declaration, `Couldn't load the SVG ${id} from Wix's CDN, so ${url} stays as written`, 'svg_not_loaded')
                     return url
                 }
                 return svgDataUrl(scaleSvg(svg, svgInfo(svg), 'none'))

package/src/jsxPlugins/mediaValidation/index.js

@@ -1,3 +1,4 @@
+import { warn } from '../../transform/bi.js'
 // Fails the build on an Image whose `uri` is not a Wix media ID, such as a web URL or a local file.
 // The Wix import accepts such a `uri` but the image is broken on the site; `wix origami upload-media`
 // uploads it and points the Image at the uploaded file. `yarn dev` only warns, so the page still
@@ -41,7 +42,10 @@ export const mediaValidationPlugin = {
         })
         if (violations.length === 0) return
         if (context.command === 'serve') {
-            for (const violation of violations) console.warn(`[origami] ${violation}`)
+            for (const violation of violations) {
+                warn('media_not_wix')
+                console.warn(`[origami] ${violation}`)
+            }
             return
         }
         throw new LayoutError(violations, first)

package/src/transform/bi.js

@@ -0,0 +1,34 @@
+import { currentRow } from '@wix/origami-bi'
+const summaries = new WeakMap()
+
+/** Aggregate completed dev invocations; paths are only in this local set, never in rows. */
+export function countPlugin(context, duration) {
+    const parent = currentRow()
+    if (!parent || context.command !== 'serve') return
+    const { run } = parent
+    let summary = summaries.get(run)
+    if (!summary) {
+        summary = { files: new Set(), plugins: 0, duration_ms: 0 }
+        summaries.set(run, summary)
+        const timer = setInterval(() => {
+            if (!run.commandRow.isOpen) { clearInterval(timer); summaries.delete(run); return }
+            if (!summary.plugins) return
+            run.commandRow.runInContext(() => run.openRow('step', 'transform_summary', {
+                step_details: { files: summary.files.size, plugins: summary.plugins, duration_ms: Math.round(summary.duration_ms) },
+            }).end())
+            summary.files.clear(); summary.plugins = 0; summary.duration_ms = 0
+        }, 60_000)
+        timer.unref()
+    }
+    summary.files.add(context.filePath)
+    summary.plugins++
+    summary.duration_ms += duration
+}
+
+/** @param {'malformed_custom_enum' | 'unmappable_preset' | 'svg_not_loaded' | 'media_not_wix'} key */
+export function warn(key) {
+    const current = currentRow()
+    // A passing dev plugin row is discarded; warnings must retain a live parent.
+    const parent = current?.step_type === 'build_plugin' ? current.parent : current
+    parent?.runInContext(() => parent.run.openRow('warning', key, { error_name: key }).end())
+}

package/src/transform/context.js

@@ -1,5 +1,44 @@
+import { currentRow } from '@wix/origami-bi'
+import { existsSync, readFileSync, statSync } from 'node:fs'
+import { dirname, join, relative } from 'node:path'
+import { parse } from '@babel/parser'
 import { relativeToSite } from './relativeToSite.js'
 
+const identities = new Map()
+export function pageIdFor(context) {
+    if (!currentRow()?.run.enabled || !context.layout?.root) return undefined
+    const { root } = context.layout
+    const file = context.filePath
+    let folder = dirname(file)
+    const pages = join(root, 'src/pages')
+    while (relative(pages, folder) && !relative(pages, folder).startsWith('..')) {
+        const structure = ['structure.jsx', 'structure.tsx'].map(name => join(folder, name)).find(existsSync)
+        if (structure) {
+            try {
+                const modified = statSync(structure).mtimeMs
+                if (identities.get(structure)?.modified === modified) return identities.get(structure).id
+                const ast = parse(readFileSync(structure, 'utf8'), { sourceType: 'module', plugins: ['jsx', 'typescript'] })
+                let id
+                const visit = node => {
+                    if (!node || typeof node !== 'object') return
+                    if (node.type === 'JSXOpeningElement' && node.name?.name === 'Page') {
+                        const attribute = node.attributes.find(value => value.type === 'JSXAttribute' && value.name.name === 'id')
+                        if (attribute?.value?.type === 'StringLiteral') id ??= attribute.value.value
+                    }
+                    for (const value of Object.values(node)) {
+                        if (Array.isArray(value)) value.forEach(visit)
+                        else if (value && typeof value === 'object') visit(value)
+                    }
+                }
+                visit(ast)
+                identities.set(structure, { modified, id })
+                return id
+            } catch { return undefined }
+        }
+        folder = dirname(folder)
+    }
+}
+
 export const createContextFactory =
     ({ layout, command }) =>
     (id, { ssr = false } = {}) =>

package/src/transform/css/postcssPlugin.js

@@ -8,6 +8,8 @@
 // stylesheet the plugins see is the whole page: a rule declared in one carrier and a rule that
 // depends on it in another arrive in the same document.
 
+import { currentRow } from '@wix/origami-bi'
+import { warn as biWarn } from '../bi.js'
 import { removeCustomEnums } from '../../cssPlugins/customEnums.js'
 import { pluginError, runCssPlugins } from './runPlugins.js'
 
@@ -54,7 +56,10 @@ export const createCssPostcssPlugin = ({ selectPlugins, contextFor, failures })
         }
         // A plugin reports a problem that need not stop the build as a PostCSS warning, which Vite prints with the
         // node's code frame.
-        const warn = (node, text) => node.warn(result, text)
+        const warn = (node, text, key) => {
+            if (key) biWarn(key)
+            return node.warn(result, text)
+        }
         const context = { ...fileContext, addDependency, warn }
         const fail = error => {
             failures?.set(from, declared)
@@ -70,10 +75,20 @@ export const createCssPostcssPlugin = ({ selectPlugins, contextFor, failures })
         }
         // PostCSS awaits the hook only when it returns a promise; a stylesheet nothing loads for stays synchronous.
         const loading = plugins.flatMap(plugin => {
+            if (!plugin.prepare) return []
+            const row = currentRow()?.run.openRow('op', 'css_prepare', { step_details: { plugin: plugin.name, fetched: 0, failed: 0 } })
             try {
-                const prepared = plugin.prepare?.(root, context)
-                return prepared ? [prepared.catch(cause => fail(pluginError(plugin, context, cause)))] : []
+                const prepared = row ? row.runInContext(() => plugin.prepare(root, context)) : plugin.prepare(root, context)
+                if (!prepared) { row?.end(); return [] }
+                return [prepared.then(counts => {
+                    if (counts) row?.update({ step_details: counts })
+                    row?.end()
+                }, cause => {
+                    row?.end(false, { error_name: 'plugin_error' })
+                    return fail(pluginError(plugin, context, cause))
+                })]
             } catch (cause) {
+                row?.end(false, { error_name: 'plugin_error' })
                 return fail(pluginError(plugin, context, cause))
             }
         })

package/src/transform/css/runPlugins.js

@@ -5,6 +5,9 @@
 // A LayoutError comes from a plugin that only checks, so the Root is as it was and the later plugins still run:
 // the author gets every plugin's violations in one error, at the first one's position, not one plugin's per build.
 
+import { currentRow, namedError } from '@wix/origami-bi'
+import { countPlugin } from '../bi.js'
+import { pageIdFor } from '../context.js'
 import { LayoutError } from '../layoutError.js'
 
 const reason = cause => (cause instanceof Error ? cause.message : String(cause))
@@ -13,7 +16,7 @@ const reason = cause => (cause instanceof Error ? cause.message : String(cause))
 export const pluginError = (plugin, context, cause) =>
     // Tooling such as Vite's error overlay prints only the message, so the reason goes in it as well. A
     // plugin may throw any value, so it is read without assuming an Error.
-    new Error(`CSS transform "${plugin.name}" failed for ${context.relativePath ?? context.filePath}: ${reason(cause)}`, {
+    namedError('plugin_error', `CSS transform "${plugin.name}" failed for ${context.relativePath ?? context.filePath}: ${reason(cause)}`, {
         cause,
     })
 
@@ -22,17 +25,36 @@ export const runCssPlugins = ({ plugins, root, context }) => {
     const layoutErrors = []
     for (const phase of ['validate', 'transform']) {
         for (const plugin of plugins) {
+            if (!plugin[phase]) continue
+            const pageId = pageIdFor(context)
+            const row = currentRow()?.run.openRow('build_plugin', plugin.name, {
+                ...(pageId ? { item_type: 'page', item_id: pageId } : {}),
+                step_details: { phase, outcome: 'ok', violations: 0 },
+            })
+            const started = performance.now()
             try {
-                plugin[phase]?.(root, context)
+                if (row) row.runInContext(() => plugin[phase](root, context))
+                else plugin[phase](root, context)
+                if (context.command === 'serve') row?.discard()
+                else row?.end()
             } catch (cause) {
+                const layout = cause instanceof LayoutError
+                row?.end(false, { error_name: layout ? 'layout_error' : 'plugin_error' }, {
+                    outcome: layout ? 'layout_error' : 'plugin_error', violations: layout ? cause.violations.length : 0,
+                })
                 if (cause instanceof LayoutError) {
                     layoutErrors.push(cause)
                     continue
                 }
                 throw pluginError(plugin, context, cause)
+            } finally {
+                countPlugin(context, performance.now() - started)
             }
         }
     }
+    if (layoutErrors.length) currentRow()?.run.openRow('op', 'css_layout_errors', {
+        step_details: { violations: layoutErrors.reduce((count, error) => count + error.violations.length, 0) },
+    }).end()
     if (layoutErrors.length === 1) throw layoutErrors[0]
     if (layoutErrors.length > 1) {
         throw new LayoutError(

package/src/transform/jsx/runPlugins.js

@@ -2,22 +2,40 @@
 // to Babel, which drives this stage — the only thing added here is attributing a failure to the
 // plugin and the file that caused it. A LayoutError is the author's, so it passes through.
 
+import { currentRow, namedError } from '@wix/origami-bi'
+import { countPlugin } from '../bi.js'
+import { pageIdFor } from '../context.js'
 import { LayoutError } from '../layoutError.js'
 
 const reason = cause => (cause instanceof Error ? cause.message : String(cause))
 
 export const runJsxPlugins = ({ plugins, program, context }) => {
     for (const plugin of plugins) {
+        const pageId = pageIdFor(context)
+        const row = currentRow()?.run.openRow('build_plugin', plugin.name, {
+            ...(pageId ? { item_type: 'page', item_id: pageId } : {}),
+            step_details: { outcome: 'ok', violations: 0 },
+        })
+        const started = performance.now()
         try {
-            plugin.transform(program, context)
+            if (row) row.runInContext(() => plugin.transform(program, context))
+            else plugin.transform(program, context)
+            if (context.command === 'serve') row?.discard()
+            else row?.end()
         } catch (cause) {
+            const layout = cause instanceof LayoutError
+            row?.end(false, { error_name: layout ? 'layout_error' : 'plugin_error' }, {
+                outcome: layout ? 'layout_error' : 'plugin_error', violations: layout ? cause.violations.length : 0,
+            })
             if (cause instanceof LayoutError) throw cause
             // Tooling such as Vite's error overlay prints only the message, so the reason goes in it as well. A
             // plugin may throw any value, so it is read without assuming an Error.
-            throw new Error(
+            throw namedError('plugin_error',
                 `JSX transform "${plugin.name}" failed for ${context.relativePath ?? context.filePath}: ${reason(cause)}`,
                 { cause }
             )
+        } finally {
+            countPlugin(context, performance.now() - started)
         }
     }
 }

package/src/transform/layoutError.js

@@ -11,6 +11,7 @@ export class LayoutError extends Error {
     constructor(violations, location = {}) {
         super(violations.length === 1 ? violations[0] : `\n  ${violations.join('\n  ')}`)
         this.name = 'LayoutError'
+        this.error_name = 'layout_error'
         this.stack = ''
         this.violations = violations
         this.location = location

package/src/transform/pipeline.js

@@ -1,4 +1,6 @@
 // Select and cache transform plugins by stage, file, and SSR context.
+import { AsyncLocalStorage } from 'node:async_hooks'
+import { currentRow, trackStepSync } from '@wix/origami-bi'
 import { transformAsync } from '@babel/core'
 import { cssPlugins as defaultCssPlugins } from '../cssPlugins/index.js'
 import { jsxPlugins as defaultJsxPlugins } from '../jsxPlugins/index.js'
@@ -33,6 +35,10 @@ const createState = ({ layout, registries, command }) => {
  * }} options
  */
 export const createTransformPipeline = ({ layout, jsxPlugins = defaultJsxPlugins, cssPlugins = defaultCssPlugins }) => {
+    // Vite/Rolldown can dispatch hooks outside creation's async context.
+    const snapshot = AsyncLocalStorage.snapshot()
+    let devStep
+    const inContext = fn => snapshot(() => devStep ? devStep.runInContext(fn) : fn())
     const registries = {
         jsx: createTransformRegistry(jsxPlugins),
         css: createTransformRegistry(cssPlugins),
@@ -47,6 +53,7 @@ export const createTransformPipeline = ({ layout, jsxPlugins = defaultJsxPlugins
     const cssFailures = new Map()
 
     const babelOptionsFor = createBabelOptionsSelector({ contextFor, selectPlugins: selectFor('jsx') })
+    const postcssPlugin = createCssPostcssPlugin({ contextFor, selectPlugins: selectFor('css'), failures: cssFailures })
 
     return {
         /** Whether any JSX transform selects this module (structure.jsx/.tsx by default).
@@ -58,7 +65,7 @@ export const createTransformPipeline = ({ layout, jsxPlugins = defaultJsxPlugins
          * @param {string} code
          * @param {string} id
          * @param {{ ssr?: boolean | undefined }} [contextOptions] */
-        transformJsx: async (code, id, { ssr = false } = {}) => {
+        transformJsx: async (code, id, { ssr = false } = {}) => inContext(async () => {
             const filename = id.split('?', 1)[0]
             const options = babelOptionsFor(id, { ssr })
             const result = await transformAsync(code, {
@@ -77,15 +84,28 @@ export const createTransformPipeline = ({ layout, jsxPlugins = defaultJsxPlugins
                 },
             })
             return { code: result.code, map: result.map }
-        },
+        }),
 
-        postcssPlugin: createCssPostcssPlugin({ contextFor, selectPlugins: selectFor('css'), failures: cssFailures }),
+        postcssPlugin: { ...postcssPlugin, Once: (...args) => inContext(() => postcssPlugin.Once(...args)) },
         babelOptionsFor,
 
         /** Whether a stylesheet whose last CSS run failed declared `file`, so an edit to it may fix the stylesheet. */
         failedStylesheetDependsOn: file => [...cssFailures.values()].some(files => files.has(file)),
 
+        close: () => devStep?.end(),
+
+        /** @param {string} file @param {() => void} reload */
+        handleHotUpdate: (file, reload) => inContext(() => {
+            if (command === 'serve' && [...cssFailures.values()].some(files => files.has(file)))
+                trackStepSync('op', 'hmr_full_reload', {}, reload)
+        }),
+
         setCommand: value => {
+            if (value === 'serve' && !devStep) snapshot(() => {
+                const run = currentRow()?.run
+                devStep = run?.commandRow.runInContext(() => run.openRow('step', 'build_plugins', {}))
+            })
+            inContext(() => currentRow()?.run.openRow('op', 'pipeline_create', { step_details: { plugins: jsxPlugins.length + cssPlugins.length, command: value } }).end())
             command = value
             state = undefined
         },

package/src/transform/types.js

@@ -36,7 +36,7 @@
  * and applied before any of them run.
  *
  * @typedef {TransformPluginBase & {
- *     prepare?: (root: import('postcss').Root, context: CssTransformContext) => Promise<void> | void,
+ *     prepare?: (root: import('postcss').Root, context: CssTransformContext) => Promise<void | { fetched: number, failed: number }> | void,
  *     validate?: (root: import('postcss').Root, context: CssTransformContext) => void,
  *     transform: (root: import('postcss').Root, context: CssTransformContext) => void
  * }} CssTransformPlugin
@@ -46,7 +46,7 @@
  *
  * @typedef {TransformContext & {
  *     addDependency?: (file: string) => void,
- *     warn?: (node: import('postcss').Node, text: string) => void
+ *     warn?: (node: import('postcss').Node, text: string, key?: 'malformed_custom_enum' | 'unmappable_preset' | 'svg_not_loaded') => void
  * }} CssTransformContext
  * `addDependency` declares a file the plugin read besides the stylesheet, so the bundler re-runs the
  * stylesheet when it changes. `warn` reports a problem at `node` without failing the run, as a PostCSS