@teacss/vite 0.10.4 → 0.10.6

package/README.md

@@ -33,7 +33,9 @@ Import the generated CSS once from the application entry:
 import "virtual:teacss.css";
 ```
 
-The dev server also serves the inspector at `/__teacss`; pass `inspector: false` to turn it off.
+The dev server also serves the inspector at `/__teacss`; pass `inspector: false` to turn it off. In dev, the dev server serves the Standard preset's fonts under `<base>__teacss_fonts/`, prefixed with `server.origin` when it is set; a build emits them as assets.
+
+Other plugins reach the project through the `api` of the plugin named `teacss:api` (`TeacssVitePluginApi`): `getProject()` returns it, and `invalidate()` updates the generated CSS on the dev client after a module was registered through `getProject().transform()`.
 
 ## Documentation
 

package/dist/finalize.d.ts

@@ -0,0 +1,5 @@
+import { type ResolvedBuildEnvironmentOptions, type ResolvedConfig } from "vite";
+type BuildOptions = Pick<ResolvedBuildEnvironmentOptions, "cssMinify" | "cssTarget">;
+export declare function finalizeBuildCss(css: string, config: ResolvedConfig, build: BuildOptions, viteVersion: string): Promise<string>;
+export {};
+//# sourceMappingURL=finalize.d.ts.map

package/dist/finalize.js

@@ -0,0 +1,104 @@
+import { createRequire } from "node:module";
+import { join } from "node:path";
+import { preprocessCSS } from "vite";
+import { RESOLVED_ENTRY } from "./virtual.js";
+// esbuild and lightningcss are Vite's (a dependency or an optional peer, by version), not this package's: load them as Vite does.
+const fromVite = createRequire(import.meta.resolve("vite"));
+export async function finalizeBuildCss(css, config, build, viteVersion) {
+    const filename = join(config.root, RESOLVED_ENTRY.slice(1));
+    const minifier = minifierOf(build.cssMinify, viteVersion);
+    const lightningcss = config.css.transformer === "lightningcss";
+    // One pass: a second Lightning CSS pass repeats the prefixes the first one added.
+    if (lightningcss && minifier === "lightningcss")
+        return minifyWithLightningcss(css, filename, config, build.cssTarget);
+    const { code } = await preprocessCSS(css, filename, lightningcss ? withoutCssMinify(config) : config);
+    if (minifier === "esbuild")
+        return minifyWithEsbuild(code, filename, config, build.cssTarget);
+    if (minifier === "lightningcss")
+        return minifyWithLightningcss(code, filename, config, build.cssTarget);
+    return code;
+}
+/** `preprocessCSS` runs Lightning CSS with the client environment's `build`, minifying wherever its `cssMinify` is set. */
+function withoutCssMinify(config) {
+    const environments = Object.fromEntries(Object.entries(config.environments).map(([name, options]) => [name, { ...options, build: { ...options.build, cssMinify: false } }]));
+    return { ...config, build: { ...config.build, cssMinify: false }, environments };
+}
+function minifierOf(cssMinify, viteVersion) {
+    if (cssMinify !== true)
+        return cssMinify;
+    // Vite 7 minifies with esbuild for `cssMinify: true`, Vite 8 with Lightning CSS.
+    return Number.parseInt(viteVersion, 10) >= 8 ? "lightningcss" : "esbuild";
+}
+async function minifyWithEsbuild(css, filename, config, cssTarget) {
+    const esbuild = fromVite("esbuild");
+    const result = await esbuild.transform(css, { ...resolveMinifyCssEsbuildOptions(config.esbuild || {}), loader: "css", sourcefile: filename, target: cssTarget || undefined });
+    for (const warning of result.warnings)
+        config.logger.warn(`[esbuild css minify] ${warning.text}`);
+    return result.code;
+}
+function resolveMinifyCssEsbuildOptions(options) {
+    const { charset, legalComments, logLevel, logLimit, logOverride, minifyIdentifiers, minifySyntax, minifyWhitespace } = options;
+    const base = { charset, legalComments, logLevel, logLimit, logOverride };
+    if (minifyIdentifiers == null && minifySyntax == null && minifyWhitespace == null)
+        return { ...base, minify: true };
+    return { ...base, minifyIdentifiers: minifyIdentifiers ?? true, minifySyntax: minifySyntax ?? true, minifyWhitespace: minifyWhitespace ?? true };
+}
+function minifyWithLightningcss(css, filename, config, cssTarget) {
+    const lightningcss = fromVite("lightningcss");
+    const result = lightningcss.transform({ ...config.css.lightningcss, filename, code: Buffer.from(css), minify: true, targets: convertTargets(cssTarget), cssModules: undefined });
+    for (const warning of result.warnings)
+        config.logger.warn(`[lightningcss minify] ${warning.message}`);
+    return new TextDecoder().decode(result.code);
+}
+const CSS_TARGET_BROWSERS = new Map([
+    ["chrome", "chrome"],
+    ["edge", "edge"],
+    ["firefox", "firefox"],
+    ["hermes", false],
+    ["ie", "ie"],
+    ["ios", "ios_saf"],
+    ["node", false],
+    ["opera", "opera"],
+    ["rhino", false],
+    ["safari", "safari"],
+]);
+const ES_TARGETS = new Map([
+    [2015, ["chrome49", "edge13", "safari10", "ios10", "firefox44", "opera36"]],
+    [2016, ["chrome50", "edge13", "safari10", "ios10", "firefox43", "opera37"]],
+    [2017, ["chrome58", "edge15", "safari11", "ios11", "firefox52", "opera45"]],
+    [2018, ["chrome63", "edge79", "safari12", "ios12", "firefox58", "opera50"]],
+    [2019, ["chrome73", "edge79", "safari12.1", "ios12.1", "firefox64", "opera60"]],
+    [2020, ["chrome80", "edge80", "safari14.1", "ios14.5", "firefox80", "opera67"]],
+    [2021, ["chrome85", "edge85", "safari14.1", "ios14.5", "firefox80", "opera71"]],
+    [2022, ["chrome94", "edge94", "safari16.4", "ios16.4", "firefox93", "opera80"]],
+    [2023, ["chrome110", "edge110", "safari16.4", "ios16.4", "firefox146", "opera96"]],
+    [2024, ["chrome119", "edge119", "safari17.4", "ios17.4", "firefox145", "opera105"]],
+    [2025, ["chrome136", "edge136", "safari26.0", "ios26.0", "firefox138", "opera121"]],
+]);
+function convertTargets(cssTarget) {
+    const targets = {};
+    for (const entry of [cssTarget || []].flat().flatMap(esBrowsers)) {
+        if (entry === "esnext")
+            continue;
+        const [, name = "", major, minor = "0"] = /^([a-z_]+)(\d+)(?:\.(\d+))?$/i.exec(entry) ?? [];
+        const browser = CSS_TARGET_BROWSERS.get(name.toLowerCase());
+        if (browser === false)
+            continue;
+        if (browser === undefined)
+            throw new Error(`Unsupported target "${entry}"`);
+        const version = (Number(major) << 16) | (Number(minor) << 8);
+        if (version < (targets[browser] ?? Number.POSITIVE_INFINITY))
+            targets[browser] = version;
+    }
+    return targets;
+}
+function esBrowsers(entry) {
+    const year = /^es(6|\d{4})$/.exec(entry)?.[1];
+    if (year === undefined)
+        return [entry];
+    const browsers = ES_TARGETS.get(year === "6" ? 2015 : Number(year));
+    if (browsers === undefined)
+        throw new Error(`Unsupported target "${entry}"`);
+    return browsers;
+}
+//# sourceMappingURL=finalize.js.map

package/dist/plugin.d.ts

@@ -1,6 +1,11 @@
 import { type Project, type ShellOptions } from "@teacss/engine";
 import type { Plugin } from "vite";
 export interface TeacssViteOptions extends ShellOptions {
+    /**
+     * The engine's own minify of the generated CSS, which drops the layer comments and line breaks. Default false:
+     * a build hands the generated CSS to Vite's minifier, `build.cssMinify`, whatever this option says.
+     */
+    minify?: boolean;
     /** v10.2 §3.6: serve `@teacss/inspector` at `INSPECTOR_BASE` on the dev server. Default true; a build never mounts it. */
     inspector?: boolean;
     /**
@@ -12,6 +17,11 @@ export interface TeacssViteOptions extends ShellOptions {
 }
 export interface TeacssVitePluginApi {
     getProject(): Project;
+    /**
+     * Sends the dev client an update of the generated CSS, as a changed module does: for the modules another plugin
+     * registers through `getProject().transform()`. A build has no client to update.
+     */
+    invalidate(): void;
 }
 /** The dev-server path the inspector's UI and `/api` routes live under; the UI's built asset URLs assume it. */
 export declare const INSPECTOR_BASE = "/__teacss";

package/dist/plugin.js

@@ -1,9 +1,11 @@
+import { createHash } from "node:crypto";
 import { readFileSync } from "node:fs";
 import { createRequire } from "node:module";
 import { join, posix, resolve } from "node:path";
 import { createProject, extractBundledFonts, isCssId, markers, replaceEntryWithMap } from "@teacss/engine";
 import { createInspectorMiddleware } from "@teacss/inspector";
-import { BUILD_PLACEHOLDER, BUILD_PLACEHOLDER_PATTERN, hmrPath, isResolvedEntry, resolveEntryId, shouldTransform } from "./virtual.js";
+import { finalizeBuildCss } from "./finalize.js";
+import { BUILD_PLACEHOLDER, BUILD_PLACEHOLDER_PATTERN, digestPlaceholder, hmrPath, isResolvedEntry, resolveEntryId, shouldTransform } from "./virtual.js";
 const INCLUDE_COMMENT = markers().includeComment;
 /** architecture §5: the files `loadProjectFromRoot` discovers the entry through. */
 const ENTRY_CANDIDATES = ["package.json", "index.css", "src/index.css"];
@@ -11,7 +13,30 @@ const ENTRY_CANDIDATES = ["package.json", "index.css", "src/index.css"];
 const INVALIDATION_DELAY_MS = 10;
 /** The dev-server path the inspector's UI and `/api` routes live under; the UI's built asset URLs assume it. */
 export const INSPECTOR_BASE = "/__teacss";
+/** Where, under Vite's `base`, the dev server serves the fonts of the generated CSS; the path teacss-ts uses. */
+const DEV_FONTS = "__teacss_fonts";
 const HTML_ENTRY = /\.html$/;
+/** `vite:css-post`'s transform, and the stylesheets holding the placeholder it cached, by its hook object. */
+const cssPostCaches = new WeakMap();
+/**
+ * Vite names a CSS file by the hash of what `vite:css-post` cached for its stylesheets, when it renders a chunk,
+ * and the generated CSS replaces the placeholder only in `generateBundle`. So the stylesheets that hold the
+ * placeholder are recorded here, and `renderStart` caches them again with the generated CSS's digest in it.
+ */
+function recordPlaceholderStylesheets(plugins) {
+    const hook = plugins.find((plugin) => plugin.name === "vite:css-post")?.transform;
+    if (typeof hook !== "object" || hook === null || cssPostCaches.has(hook))
+        return;
+    const transform = hook.handler;
+    const cached = new Map();
+    cssPostCaches.set(hook, { transform, cached });
+    const record = function (css, id, ...rest) {
+        if (typeof css === "string" && css.search(BUILD_PLACEHOLDER_PATTERN) !== -1)
+            cached.set(id, css);
+        return transform.call(this, css, id, ...rest);
+    };
+    hook.handler = record;
+}
 export function teacss(options = {}) {
     const { inspector = true, lightningcss, ...shell } = options;
     let project;
@@ -31,6 +56,8 @@ export function teacss(options = {}) {
     const entries = new Set();
     /** `@source` directories already reported as unreadable: Vite's builder resolves the config once per environment. */
     const unreadable = new Set();
+    /** The bytes of each font the dev CSS links to, by its file name under `DEV_FONTS`, which carries its sha256. */
+    const devFonts = new Map();
     function warnUnreadable() {
         for (const path of project.info.unreadableDirectories) {
             if (unreadable.has(path))
@@ -170,7 +197,7 @@ export function teacss(options = {}) {
             ...shell,
             root: shell.root ?? config.root,
             envMode: shell.envMode ?? (isBuild ? "build" : "dev"),
-            minify: shell.minify ?? (isBuild && Boolean(config.build.cssMinify)),
+            minify: shell.minify ?? false,
         });
         disposed = false;
         sources.clear();
@@ -179,9 +206,9 @@ export function teacss(options = {}) {
         syncSources();
     }
     /**
-     * What stands for the generated CSS: the placeholder `generateBundle` replaces in a build, the CSS itself in dev.
-     * While a watcher event has failed, the error goes out again: Vite's own update of a changed entry stylesheet
-     * clears the overlay before the client requests it.
+     * What stands for the generated CSS: the placeholder `generateBundle` replaces in a build, the CSS itself in dev,
+     * with its fonts linked from the dev server. While a watcher event has failed, the error goes out again: Vite's
+     * own update of a changed entry stylesheet clears the overlay before the client requests it.
      */
     function generated(warn) {
         if (config.command === "build")
@@ -190,7 +217,22 @@ export function teacss(options = {}) {
             server?.hot.send({ type: "error", err: failure });
         const result = project.css();
         project.reportUnmatched(result, { warn });
-        return result.css;
+        return linkDevFonts(result.css);
+    }
+    /** `css` with the fonts it inlines linked from the dev server, which serves the bytes recorded here. */
+    function linkDevFonts(css) {
+        return extractBundledFonts(css, (digest, bytes) => {
+            const name = `teacss-${digest}.woff2`;
+            devFonts.set(name, bytes);
+            // As Vite's own dev asset URLs: a page served by another server (`server.origin`) loads them from Vite.
+            return `${config.server.origin ?? ""}${config.base}${DEV_FONTS}/${name}`;
+        }).css;
+    }
+    /** A font this instance has not linked yet, as in CSS another process generated, is looked up in the project's CSS. */
+    function devFont(name) {
+        if (!devFonts.has(name) && !disposed)
+            linkDevFonts(project.css().css);
+        return devFonts.get(name);
     }
     function dispose() {
         if (invalidation)
@@ -202,6 +244,47 @@ export function teacss(options = {}) {
         disposed = true;
         project.dispose();
     }
+    /**
+     * Splices the generated CSS into every CSS file that holds the placeholder. Vite writes a chunk's CSS file
+     * when it renders the chunk, and with `build.cssCodeSplit: false` its single CSS file only in its own
+     * `generateBundle`, so `teacss:api` runs this again after it.
+     */
+    const spliceGenerated = async function (_options, bundle) {
+        let css;
+        const fonts = new Map();
+        for (const file of Object.values(bundle)) {
+            if (file.type !== "asset" || !file.fileName.endsWith(".css"))
+                continue;
+            const source = typeof file.source === "string" ? file.source : new TextDecoder().decode(file.source);
+            if (source.search(BUILD_PLACEHOLDER_PATTERN) === -1)
+                continue;
+            if (css === undefined) {
+                const result = project.css();
+                project.reportUnmatched(result, { warn: (message) => this.warn(message) });
+                css = await finalizeBuildCss(result.css, this.environment.getTopLevelConfig(), this.environment.config.build, viteVersion);
+            }
+            const emitted = new Set();
+            const spliced = extractBundledFonts(css, (digest, bytes) => {
+                let reference = fonts.get(digest);
+                if (reference === undefined) {
+                    reference = this.emitFile({ type: "asset", name: `teacss-${digest}.woff2`, source: bytes });
+                    fonts.set(digest, reference);
+                }
+                const fileName = this.getFileName(reference);
+                emitted.add(fileName);
+                return assetUrl(config.base, file.fileName, fileName);
+            }).css;
+            file.source = source.replace(BUILD_PLACEHOLDER_PATTERN, () => spliced);
+            // Vite's manifest lists a chunk's assets from `viteMetadata.importedAssets`; Astro moves the
+            // fonts of its server build to the client output from that list.
+            for (const chunk of Object.values(bundle)) {
+                if (chunk.type !== "chunk" || !chunk.viteMetadata?.importedCss.has(file.fileName))
+                    continue;
+                for (const fileName of emitted)
+                    chunk.viteMetadata.importedAssets.add(fileName);
+            }
+        }
+    };
     const main = {
         name: "teacss",
         enforce: "pre",
@@ -239,8 +322,21 @@ export function teacss(options = {}) {
             dispose();
             config = resolved;
             viteVersion = this.meta.viteVersion;
+            if (resolved.command === "build")
+                recordPlaceholderStylesheets(resolved.plugins);
             open();
         },
+        async renderStart() {
+            if (config.command !== "build")
+                return;
+            const hook = this.environment.config.plugins.find((plugin) => plugin.name === "vite:css-post")?.transform;
+            const cache = typeof hook === "object" && hook !== null ? cssPostCaches.get(hook) : undefined;
+            if (!cache || cache.cached.size === 0)
+                return;
+            const digest = createHash("sha256").update(project.css().css).digest("hex").slice(0, 16);
+            for (const [id, css] of cache.cached)
+                await cache.transform.call(this, css.replace(BUILD_PLACEHOLDER_PATTERN, () => digestPlaceholder(digest)), id);
+        },
         buildStart() {
             if (disposed)
                 open();
@@ -259,6 +355,19 @@ export function teacss(options = {}) {
                 if (failure)
                     client.send({ type: "error", err: failure });
             });
+            const serveFont = (request, response, next) => {
+                const bytes = devFont(request.url?.split("?", 1)[0]?.slice(1) ?? "");
+                if (!bytes)
+                    return next();
+                response.setHeader("Content-Type", "font/woff2");
+                response.setHeader("Cache-Control", "public, max-age=31536000, immutable");
+                response.end(bytes);
+            };
+            // After Vite's CORS and host check, ahead of the middleware that strips `base`.
+            devServer.middlewares.use(`${config.base}${DEV_FONTS}`, serveFont);
+            // A parent app that mounts Vite's middlewares under `base` strips it before they run.
+            if (config.server.middlewareMode && config.base !== "/")
+                devServer.middlewares.use(`/${DEV_FONTS}`, serveFont);
             if (inspector)
                 devServer.middlewares.use(INSPECTOR_BASE, createInspectorMiddleware(project));
         },
@@ -281,7 +390,7 @@ export function teacss(options = {}) {
                 return null;
             const result = project.transform(id, code);
             const stylesheet = isCssId(id);
-            const entry = stylesheet ? replaceEntryWithMap(result.code, () => generated((message) => this.warn(message)), { id: id.split("?")[0] ?? id, original: code, map: result.map }) : null;
+            const entry = stylesheet ? replaceEntryWithMap(result.code, () => generated((message) => this.warn(message)), { id, original: code, map: result.map }) : null;
             if (entry !== null) {
                 entries.add(id);
                 return { code: entry.code, map: { ...entry.map, file: entry.map.file ?? undefined } };
@@ -303,42 +412,7 @@ export function teacss(options = {}) {
                 return result.code;
             },
         },
-        generateBundle(_options, bundle) {
-            let css;
-            const fonts = new Map();
-            for (const file of Object.values(bundle)) {
-                if (file.type !== "asset" || !file.fileName.endsWith(".css"))
-                    continue;
-                const source = typeof file.source === "string" ? file.source : new TextDecoder().decode(file.source);
-                if (source.search(BUILD_PLACEHOLDER_PATTERN) === -1)
-                    continue;
-                if (css === undefined) {
-                    const result = project.css();
-                    project.reportUnmatched(result, { warn: (message) => this.warn(message) });
-                    css = result.css;
-                }
-                const emitted = new Set();
-                const spliced = extractBundledFonts(css, (digest, bytes) => {
-                    let reference = fonts.get(digest);
-                    if (reference === undefined) {
-                        reference = this.emitFile({ type: "asset", name: `teacss-${digest}.woff2`, source: bytes });
-                        fonts.set(digest, reference);
-                    }
-                    const fileName = this.getFileName(reference);
-                    emitted.add(fileName);
-                    return assetUrl(config.base, file.fileName, fileName);
-                }).css;
-                file.source = source.replace(BUILD_PLACEHOLDER_PATTERN, () => spliced);
-                // Vite's manifest lists a chunk's assets from `viteMetadata.importedAssets`; Astro moves the
-                // fonts of its server build to the client output from that list.
-                for (const chunk of Object.values(bundle)) {
-                    if (chunk.type !== "chunk" || !chunk.viteMetadata?.importedCss.has(file.fileName))
-                        continue;
-                    for (const fileName of emitted)
-                        chunk.viteMetadata.importedAssets.add(fileName);
-                }
-            }
-        },
+        generateBundle: spliceGenerated,
         closeBundle() {
             if (!config.build.watch)
                 dispose();
@@ -350,7 +424,8 @@ export function teacss(options = {}) {
     const api = {
         name: "teacss:api",
         enforce: "post",
-        api: { getProject: () => project },
+        generateBundle: spliceGenerated,
+        api: { getProject: () => project, invalidate: invalidateEntry },
     };
     return [main, api];
 }

package/dist/virtual.d.ts

@@ -8,7 +8,9 @@ export declare const RESOLVED_ENTRY = "\0virtual:teacss.css";
  * warns about an unknown at-rule, esbuild drops the comment, and other CSS can precede the entry in a chunk.
  */
 export declare const BUILD_PLACEHOLDER: string;
-/** `BUILD_PLACEHOLDER` as any minifier prints it. */
+/** `BUILD_PLACEHOLDER` with the digest of the CSS that will replace it, which goes into the CSS file's name. */
+export declare function digestPlaceholder(digest: string): string;
+/** `BUILD_PLACEHOLDER` or a `digestPlaceholder` as any minifier prints it. */
 export declare const BUILD_PLACEHOLDER_PATTERN: RegExp;
 /** Resolves `virtual:teacss.css`, `teacss.css`, their `/`-prefixed forms and the resolved id itself, keeping a `?query`. */
 export declare function resolveEntryId(id: string): string | null;

package/dist/virtual.js

@@ -10,8 +10,12 @@ const PLACEHOLDER_NAME = CSS_PLACEHOLDER.slice(1);
  * warns about an unknown at-rule, esbuild drops the comment, and other CSS can precede the entry in a chunk.
  */
 export const BUILD_PLACEHOLDER = `#${PLACEHOLDER_NAME}{--${PLACEHOLDER_NAME}:0}`;
-/** `BUILD_PLACEHOLDER` as any minifier prints it. */
-export const BUILD_PLACEHOLDER_PATTERN = new RegExp(`#${PLACEHOLDER_NAME}\\s*\\{\\s*--${PLACEHOLDER_NAME}\\s*:\\s*0\\s*;?\\s*\\}`, "g");
+/** `BUILD_PLACEHOLDER` with the digest of the CSS that will replace it, which goes into the CSS file's name. */
+export function digestPlaceholder(digest) {
+    return `#${PLACEHOLDER_NAME}{--${PLACEHOLDER_NAME}:t${digest}}`;
+}
+/** `BUILD_PLACEHOLDER` or a `digestPlaceholder` as any minifier prints it. */
+export const BUILD_PLACEHOLDER_PATTERN = new RegExp(`#${PLACEHOLDER_NAME}\\s*\\{\\s*--${PLACEHOLDER_NAME}\\s*:\\s*[\\w-]+\\s*;?\\s*\\}`, "g");
 /** Resolves `virtual:teacss.css`, `teacss.css`, their `/`-prefixed forms and the resolved id itself, keeping a `?query`. */
 export function resolveEntryId(id) {
     const [bare = "", query] = splitQuery(id);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teacss/vite",
-  "version": "0.10.4",
+  "version": "0.10.6",
   "description": "Vite plugin for TeaCSS on the Rust engine (@teacss/engine)",
   "license": "MIT",
   "type": "module",
@@ -36,8 +36,8 @@
     "vite": ">=7"
   },
   "dependencies": {
-    "@teacss/engine": "0.10.4",
-    "@teacss/inspector": "0.10.4"
+    "@teacss/engine": "0.10.6",
+    "@teacss/inspector": "0.10.6"
   },
   "devDependencies": {
     "@types/node": "^22.20.5",