@teacss/vite 0.10.5 → 0.10.7

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. The generated CSS writes these URLs as `URL(`, as teacss-ts does: CSS function names are case-insensitive, and Vite skips PostCSS for a stylesheet with no lowercase `url(`. A build emits the fonts 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/plugin.d.ts

@@ -17,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

@@ -13,6 +13,8 @@ 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();
@@ -54,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))
@@ -202,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")
@@ -213,7 +217,27 @@ 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) {
+        // As Vite's own dev asset URLs: a page served by another server (`server.origin`) loads them from Vite.
+        const prefix = `${config.server.origin ?? ""}${config.base}${DEV_FONTS}/`;
+        const linked = extractBundledFonts(css, (digest, bytes) => {
+            const name = `teacss-${digest}.woff2`;
+            devFonts.set(name, bytes);
+            return `${prefix}${name}`;
+        }).css;
+        // Vite runs PostCSS on a stylesheet with a lowercase `url(`, and these URLs are final. CSS function names
+        // are case-insensitive, so writing them `URL(`, as teacss-ts does, lets the sheet skip PostCSS.
+        const quoted = JSON.stringify(prefix).slice(0, -1);
+        return linked.replaceAll(`url(${quoted}`, `URL(${quoted}`);
+    }
+    /** 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)
@@ -336,6 +360,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));
         },
@@ -393,7 +430,7 @@ export function teacss(options = {}) {
         name: "teacss:api",
         enforce: "post",
         generateBundle: spliceGenerated,
-        api: { getProject: () => project },
+        api: { getProject: () => project, invalidate: invalidateEntry },
     };
     return [main, api];
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teacss/vite",
-  "version": "0.10.5",
+  "version": "0.10.7",
   "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.5",
-    "@teacss/inspector": "0.10.5"
+    "@teacss/engine": "0.10.7",
+    "@teacss/inspector": "0.10.7"
   },
   "devDependencies": {
     "@types/node": "^22.20.5",