@fluixi/compiler 1.0.0-alpha.93 → 1.0.0-alpha.95

package/dist/integrations.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"integrations.d.ts","sourceRoot":"","sources":["../src/integrations.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAMH,MAAM,WAAW,eAAe;IAC9B;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,qBAAqB,EAAE,CAAC;IAC3C;;;;;;;;;;;;;;OAcG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IACzB,6FAA6F;IAC7F,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,qFAAqF;IACrF,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;;OAIG;IACH,MAAM,CAAC,EAAE,KAAK,GAAG,KAAK,GAAG,MAAM,CAAC;IAEhC;;;;;;;;;;;;OAYG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG;QAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC;IAE5C;;;;;;;;;OASG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;;;;;;;;;OAWG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAMD;;GAEG;AACH,wBAAsB,iBAAiB,CAAC,OAAO,GAAE,eAAoB;;;;;;;;;;;;;;;;;GAwCpE;AAMD;;GAEG;AACH,wBAAgB,2BAA2B,CAAC,OAAO,GAAE,eAAoB,aAIpD,GAAG,MAAM,YAAY,GAAG,SAkB5C;AAqCD;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,EAAE,OAAO,GAAE,eAAoB,GAAG,CAAC,CAsHpE;AAoID;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,OAAO,GAAE,eAAoB,IACxC,MAAM,GAAG,EAAE,QAAQ,MAAM,mBAUjD;AAMD;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,OAAO,GAAE,eAAoB;;oBAItC,MAAM,MAAM,MAAM;;;;;;;;;;;;EAK3C;AAMD;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,OAAO,GAAE,eAAoB;;iBAIhD,GAAG;EAwBnB;AAWD,YAAY,EAAE,wBAAwB,EAAE,MAAM,sCAAsC,CAAC;AACrF,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,iCAAiC,CAAC;AAoD7E;;;;;;;GAOG;AACH,wBAAgB,yBAAyB,CAAC,CAAC,GAAG,GAAG,EAAE,OAAO,GAAE;IAAE,KAAK,CAAC,EAAE,OAAO,CAAA;CAAO,GAAG,CAAC,CAqCvF;;;;;;;;;AAED,wBAOE"}
+{"version":3,"file":"integrations.d.ts","sourceRoot":"","sources":["../src/integrations.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAMH,MAAM,WAAW,eAAe;IAC9B;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,qBAAqB,EAAE,CAAC;IAC3C;;;;;;;;;;;;;;OAcG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IACzB,6FAA6F;IAC7F,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,qFAAqF;IACrF,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;;OAIG;IACH,MAAM,CAAC,EAAE,KAAK,GAAG,KAAK,GAAG,MAAM,CAAC;IAEhC;;;;;;;;;;;;OAYG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG;QAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC;IAE5C;;;;;;;;;OASG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;;;;;;;;;OAWG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAMD;;GAEG;AACH,wBAAsB,iBAAiB,CAAC,OAAO,GAAE,eAAoB;;;;;;;;;;;;;;;;;GAwCpE;AAMD;;GAEG;AACH,wBAAgB,2BAA2B,CAAC,OAAO,GAAE,eAAoB,aAIpD,GAAG,MAAM,YAAY,GAAG,SAkB5C;AAqCD;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,EAAE,OAAO,GAAE,eAAoB,GAAG,CAAC,CAqKpE;AAsID;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,OAAO,GAAE,eAAoB,IACxC,MAAM,GAAG,EAAE,QAAQ,MAAM,mBAUjD;AAMD;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,OAAO,GAAE,eAAoB;;oBAItC,MAAM,MAAM,MAAM;;;;;;;;;;;;EAK3C;AAMD;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,OAAO,GAAE,eAAoB;;iBAIhD,GAAG;EAwBnB;AAWD,YAAY,EAAE,wBAAwB,EAAE,MAAM,sCAAsC,CAAC;AACrF,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,iCAAiC,CAAC;AAqD7E;;;;;;;GAOG;AACH,wBAAgB,yBAAyB,CAAC,CAAC,GAAG,GAAG,EAAE,OAAO,GAAE;IAAE,KAAK,CAAC,EAAE,OAAO,CAAA;CAAO,GAAG,CAAC,CAqCvF;;;;;;;;;AAED,wBAOE"}

package/dist/integrations.js

@@ -120,28 +120,73 @@ const RETIRED_SUBPATHS = {
  * Create a Vite plugin for JSX transformation
  */
 export function createVitePlugin(options = {}) {
+    // Component `<style>` blocks, when @fluixi-css/vite is in the build to process them.
+    let transformTemplates;
+    let projectRoot = process.cwd();
+    const componentStyles = createComponentStyles((code, id, styles) => {
+        // Scope ids hash the path from the project root, marks or not: the same on every machine
+        // and for every id a module is reached by.
+        // Reported by `transform`, from the module's last pass: a first pass, or a compile of
+        // another module whose values this one uses, would report what the next pass resolves.
+        return transformTemplates(code, id, { ...transformOptions(options, id), sourceRoot: projectRoot, styles });
+    });
     return {
         name: 'vite-fluixi-jsx',
         enforce: 'pre',
-        config() {
-            return {
-                esbuild: {
-                    jsx: 'automatic',
-                    jsxImportSource: options.importSource || '@fluixi/jsx',
-                },
-            };
+        // JSX the compiler leaves alone goes to Vite's own transform: Oxc in Vite 8 (Rolldown),
+        // esbuild before, which Vite 8 warns about.
+        // In dev, CSS maps are on unless the app says otherwise, so devtools show the line a
+        // component's rule was written on. Vite leaves them off by default; a build never has them.
+        config(user) {
+            const importSource = options.importSource || '@fluixi/jsx';
+            const jsx = this && this.meta?.rolldownVersion
+                ? { oxc: { jsx: { runtime: 'automatic', importSource } } }
+                : { esbuild: { jsx: 'automatic', jsxImportSource: importSource } };
+            return user?.css?.devSourcemap === undefined ? { ...jsx, css: { devSourcemap: true } } : jsx;
         },
         // Written once per build, and on dev-server start, rather than per transform: the
         // set of resolvable names comes from config, so nothing a file does can change it.
-        configResolved(config) {
+        async configResolved(config) {
             const outcome = writeComponentGlobals(options, config?.root ?? process.cwd());
             if (outcome.warning)
                 console.warn(outcome.warning);
+            if (options.babel)
+                return;
+            projectRoot = config?.root ?? projectRoot;
+            componentStyles.connect(config?.plugins, config?.root);
+            const entry = config?.command === 'build' && config.build?.lib ? config.build.lib.entry : undefined;
+            const first = typeof entry === 'string' ? entry : Array.isArray(entry) ? entry[0] : entry && typeof entry === 'object' ? Object.values(entry)[0] : undefined;
+            if (typeof first === 'string')
+                componentStyles.setLibrary(dirname(resolvePath(config.root ?? process.cwd(), first)));
+            if (componentStyles.active)
+                ({ transformTemplates } = await import('./transform/index.js'));
+        },
+        generateBundle() {
+            for (const [fileName, source] of componentStyles.libraryFiles())
+                this.emitFile({ type: 'asset', fileName, source });
+        },
+        // An edited component's style modules go out with its update: their ids end in `.css`, so
+        // Vite does not connect them to the file.
+        handleHotUpdate(ctx) {
+            if (!componentStyles.active)
+                return undefined;
+            const styles = componentStyles.hotModules(ctx.file, ctx.server.moduleGraph);
+            return styles.length ? [...ctx.modules, ...styles] : undefined;
+        },
+        configureServer(server) {
+            componentStyles.setServer(server);
+        },
+        load(id) {
+            return componentStyles.isStyle(id) ? componentStyles.load(id, this) : null;
         },
         // A subpath we retired resolves to nothing, and the bundler reports that as
         // `Missing "./x" specifier`, which names neither the replacement nor the file
         // that asked. Answer it here, where the rename is known.
         resolveId(id, importer) {
+            if (componentStyles.isStyle(id))
+                return componentStyles.resolveId(id, importer, this);
+            if (componentStyles.isLibraryImport(id, importer))
+                return { id, external: true };
             const moved = RETIRED_SUBPATHS[id];
             if (!moved)
                 return null;
@@ -152,6 +197,11 @@ export function createVitePlugin(options = {}) {
             if (!/\.(jsx|tsx|ts)$/i.test(id)) {
                 return null;
             }
+            if (!options.babel && componentStyles.active) {
+                const result = await componentStyles.compile(code, id, this);
+                reportDiagnostics(result, id);
+                return result;
+            }
             if (!options.babel)
                 return compileModule(code, id, options);
             const babelPlugin = await createBabelPlugin(options);
@@ -306,6 +356,8 @@ function reportDiagnostics(result, id) {
         say(d.message);
     for (const d of r?.intrinsicDiagnostics ?? [])
         say(d.message);
+    for (const d of r?.styleDiagnostics ?? [])
+        say(`${d.line}:${d.column + 1} ${d.message}`);
     for (const d of r?.propsDiagnostics ?? []) {
         say(`\`${d.name}\` was left destructured: ${d.message}. It reads once instead of tracking.`);
     }
@@ -403,8 +455,9 @@ export function createESBuildPlugin(options = {}) {
     };
 }
 import { writeComponentGlobals } from './resolve/write-globals.js';
+import { createComponentStyles } from './vite-styles.js';
 import { readdirSync, readFileSync } from 'node:fs';
-import { join as _join } from 'node:path';
+import { dirname, join as _join, resolve as resolvePath } from 'node:path';
 const SERVER_FNS_VMOD = 'virtual:fluixi-server-fns';
 /** Recursively find source files containing the `"use server"` directive under `dir`. */
 /**

package/dist/integrations.mjs

@@ -1,12 +1,17 @@
-/*! @fluixi/compiler v1.0.0-alpha.93 | (c) 2026 Ibrahima Touré and Fluixi contributors | MIT */
+/*! @fluixi/compiler v1.0.0-alpha.95 | (c) 2026 Ibrahima Touré and Fluixi contributors | MIT */
+import {
+  styleIds
+} from "./chunk-XCWP7WJG.mjs";
 import {
   INTRINSICS,
+  TAG_INTRINSICS,
   builtinComponentMap,
   createComponentResolver
-} from "./chunk-OD53TMER.mjs";
+} from "./chunk-C3AK5PBV.mjs";
+import "./chunk-HUABRVWB.mjs";
 import {
   __require
-} from "./chunk-TJIH7TLX.mjs";
+} from "./chunk-GLFUPZ27.mjs";
 
 // src/resolve/write-globals.ts
 import { mkdirSync, readdirSync, readFileSync, writeFileSync } from "node:fs";
@@ -75,7 +80,7 @@ function componentGlobals(rules, options = {}) {
       resolved.set(name, target);
     }
   }
-  const usableIntrinsics = intrinsics ? Object.entries(INTRINSICS).filter(([, i]) => {
+  const usableIntrinsics = intrinsics ? Object.entries({ ...INTRINSICS, ...TAG_INTRINSICS }).filter(([, i]) => {
     const pkg = packageOf(i.module);
     return !available || !pkg || available.has(pkg);
   }) : [];
@@ -138,11 +143,11 @@ function coveredByInclude(root, target) {
   }
   if (config.extends !== void 0) return void 0;
   if (!Array.isArray(config.include)) return true;
-  const relative2 = relativePosix(root, target);
+  const relative3 = relativePosix(root, target);
   return config.include.some((entry) => {
     if (typeof entry !== "string") return false;
     const pattern = entry.replace(/[.+^${}()|[\]\\]/g, "\\$&").replace(/\*\*\//g, "(?:.*/)?").replace(/\*/g, "[^/]*");
-    return new RegExp(`^${pattern}(?:/.*)?$`).test(relative2);
+    return new RegExp(`^${pattern}(?:/.*)?$`).test(relative3);
   });
 }
 function relativePosix(from, to) {
@@ -228,17 +233,206 @@ function writeComponentGlobals(options, root) {
 }
 function warnIfUnreachable(root, target) {
   if (coveredByInclude(root, target) !== false) return void 0;
-  const relative2 = relativePosix(root, target);
-  return `[fluixi] ${relative2} is not covered by "include" in tsconfig.json, so TypeScript will ignore it and every resolved component stays "Cannot find name". Add "${relative2}" to "include".`;
+  const relative3 = relativePosix(root, target);
+  return `[fluixi] ${relative3} is not covered by "include" in tsconfig.json, so TypeScript will ignore it and every resolved component stays "Cannot find name". Add "${relative3}" to "include".`;
+}
+
+// src/vite-styles.ts
+import { existsSync, readFileSync as readFileSync2 } from "node:fs";
+import { basename as basename2, dirname as dirname2, extname, join, relative as relative2 } from "node:path";
+var STYLE_ID = /\.fx-(\d+)\.css(?:\?inline)?$/;
+var LITERAL_ID = /\.fx-literal-([\w$]+)\.css\?inline$/;
+var SUFFIX = /\.fx-(?:\d+|literal-[\w$]+)\.css(?:\?inline)?$/;
+var styleId = styleIds.block;
+function firstLoc(nodes) {
+  for (const node of nodes) {
+    if (node.loc) return node.loc.source;
+    if ((node.kind === "rule" || node.kind === "at-rule") && node.nodes.length) {
+      const inner = firstLoc(node.nodes);
+      if (inner) return inner;
+    }
+  }
+  return void 0;
+}
+var ownerOf = (id) => id.slice(0, id.search(SUFFIX));
+var loader = (name) => `const href = new URL(${JSON.stringify(`./${name}`)}, import.meta.url).href;
+if (typeof document !== 'undefined' && !document.querySelector(\`link[data-fx-css="\${href}"]\`)) {
+  const link = document.createElement('link');
+  link.rel = 'stylesheet';
+  link.href = href;
+  link.dataset.fxCss = href;
+  document.head.appendChild(link);
+}
+`;
+function createComponentStyles(compile) {
+  let api;
+  let server;
+  let root = process.cwd();
+  let library;
+  const emitted = /* @__PURE__ */ new Map();
+  const fileOf = (id) => existsSync(id) ? id : join(root, id);
+  const cache = /* @__PURE__ */ new Map();
+  const resolveReference = async (ref, importer, ctx, seen, modules) => {
+    const resolved = await ctx.resolve?.(ref.source, importer);
+    if (!resolved) return null;
+    const file = resolved.id.split("?")[0];
+    if (seen.has(file)) return null;
+    let code;
+    try {
+      code = readFileSync2(fileOf(file), "utf8");
+    } catch {
+      return null;
+    }
+    const styles = api.styles(file);
+    let result = compile(code, file, styles);
+    if (result?.styleReferences?.length) {
+      const imported = await resolveAll(result.styleReferences, file, ctx, /* @__PURE__ */ new Set([...seen, file]), modules);
+      result = compile(code, file, { ...styles, imported, importedModules: modules });
+    }
+    const literal = result?.styleLiterals?.find((l) => l.name === ref.name);
+    if (!literal) return null;
+    const nodes = literal.nodes ?? styles.process(literal.css, file);
+    const named = firstLoc(nodes);
+    if (named) modules.set(named, { id: file, code });
+    return nodes;
+  };
+  const resolveAll = async (refs, importer, ctx, seen, modules) => {
+    const imported = /* @__PURE__ */ new Map();
+    for (const ref of refs) {
+      const nodes = await resolveReference(ref, importer, ctx, seen, modules);
+      if (nodes) imported.set(`${ref.source}#${ref.name}`, nodes);
+    }
+    return imported;
+  };
+  const run = async (code, id, ctx) => {
+    const file = fileOf(id);
+    const styles = api.styles(file);
+    let result = compile(code, file, styles);
+    if (result?.styleReferences?.length) {
+      const modules = /* @__PURE__ */ new Map();
+      const imported = await resolveAll(result.styleReferences, id, ctx, /* @__PURE__ */ new Set([file]), modules);
+      result = compile(code, file, { ...styles, imported, importedModules: modules });
+    }
+    const css = (result?.styles ?? []).map((s) => s.css);
+    const maps = (result?.styles ?? []).map((s) => s.map ?? null);
+    const literals = new Map((result?.styleLiterals ?? []).map((l) => [l.name, l.css]));
+    const before = cache.get(file);
+    cache.set(file, { source: code, css, maps, literals });
+    if (server && before) {
+      for (let i = 0; i < css.length; i++) {
+        if (before.css[i] === css[i]) continue;
+        const mod = server.moduleGraph.getModuleById(styleId(file, i));
+        if (mod) void server.reloadModule(mod);
+      }
+    }
+    const page = (result?.styles ?? []).flatMap((s, i) => s.shadow ? [] : [i]);
+    if (!result || page.length === 0) return result;
+    if (library) {
+      const name = `${basename2(file, extname(file))}.css`;
+      if (existsSync(join(dirname2(file), name))) {
+        throw new Error(`[fluixi] ${file} has <style> blocks, and ${name} next to it would be overwritten by their CSS. Rename one of them.`);
+      }
+      const out = join(relative2(library, dirname2(file)), name);
+      emitted.set(out, page.map((i) => css[i]).join("\n"));
+      emitted.set(`${out}.js`, loader(name));
+      return { ...result, code: `${result.code}
+import ${JSON.stringify(`./${name}`)};` };
+    }
+    const imports = page.map((i) => `
+import ${JSON.stringify(styleId(file, i))};`).join("");
+    return { ...result, code: result.code + imports };
+  };
+  return {
+    /** Looks for @fluixi-css/vite among the plugins; without it component styles stay off. */
+    connect(plugins, projectRoot) {
+      if (projectRoot) root = projectRoot;
+      api = (plugins ?? []).map((p) => p?.api?.fluixiCss).find((a) => Boolean(a));
+      api?.useComponentStyles();
+    },
+    /** Turns on library output, from the directory of a `build.lib` entry. */
+    setLibrary(entryDir) {
+      library = entryDir;
+    },
+    /** A library build's style import: left for the package's consumer to bundle. */
+    isLibraryImport(id, importer) {
+      if (library === void 0 || !importer || !id.startsWith("./") || !id.endsWith(".css")) return false;
+      return emitted.has(join(relative2(library, dirname2(fileOf(importer))), id));
+    },
+    /** The style files a library build writes, by path under the output directory. */
+    libraryFiles() {
+      return emitted;
+    },
+    get active() {
+      return api !== void 0;
+    },
+    setServer(dev) {
+      server = dev;
+    },
+    isStyle(id) {
+      return STYLE_ID.test(id) || LITERAL_ID.test(id);
+    },
+    /**
+     * A style request as the module id Vite keeps: its owner's absolute path, then the suffix.
+     * One id per block however it was asked for (`/src/card.tsx.fx-0.css` from a page, the
+     * absolute path from the component), or the reload after an edit misses the copy in use.
+     * A css`` value imported from another module names that module relatively, as written.
+     */
+    async resolveId(id, importer, ctx) {
+      const at = id.search(SUFFIX);
+      const owner = id.slice(0, at);
+      if (!owner.startsWith(".")) return fileOf(owner) + id.slice(at);
+      const resolved = importer ? await ctx.resolve?.(owner, importer) : null;
+      return resolved ? resolved.id.split("?")[0] + id.slice(at) : null;
+    },
+    /**
+     * The style modules of a changed file, for the update Vite sends. Their ids do not name the
+     * file (they end in `.css`), so Vite would not find them itself.
+     */
+    hotModules(file, graph) {
+      const entry = cache.get(file);
+      if (!entry) return [];
+      const paths = [
+        ...entry.css.map((_, i) => styleId(file, i)),
+        ...[...entry.literals.keys()].map((name) => styleIds.literal(file, name).replace(/\?inline$/, ""))
+      ];
+      return paths.flatMap((path) => [...graph.getModulesByFile(path) ?? []]);
+    },
+    compile: run,
+    /**
+     * A block's CSS and its map back to the module, compiling the module again when the cache
+     * does not match the file.
+     */
+    async load(id, ctx) {
+      const match = STYLE_ID.exec(id);
+      const literal = LITERAL_ID.exec(id);
+      if (!match && !literal || !api) return null;
+      const file = ownerOf(id);
+      let source;
+      try {
+        source = readFileSync2(fileOf(file), "utf8");
+      } catch {
+        return null;
+      }
+      if (cache.get(fileOf(file))?.source !== source) await run(source, file, ctx);
+      const entry = cache.get(fileOf(file));
+      if (literal) {
+        const css = entry?.literals.get(literal[1]);
+        if (css === void 0) throw new Error(`[fluixi] ${literal[1]} in ${file} is not a css\`\` value, so it cannot be a shadow root's styles.`);
+        return { code: css, map: null, moduleType: "css" };
+      }
+      const index = Number(match[1]);
+      return { code: entry?.css[index] ?? "", map: entry?.maps[index] ?? null, moduleType: "css" };
+    }
+  };
 }
 
 // src/integrations.ts
-import { readdirSync as readdirSync2, readFileSync as readFileSync2 } from "node:fs";
-import { join as _join } from "node:path";
+import { readdirSync as readdirSync2, readFileSync as readFileSync3 } from "node:fs";
+import { dirname as dirname3, join as _join, resolve as resolvePath2 } from "node:path";
 async function createBabelPlugin(options = {}) {
   let pluginModule = null;
   try {
-    pluginModule = await import("./babel-RJHJQVEM.mjs");
+    pluginModule = await import("./babel-V33QLJBF.mjs");
   } catch (e) {
     console.warn("Could not load the babel front-end:", e);
   }
@@ -299,27 +493,58 @@ var RETIRED_SUBPATHS = {
   "@fluixi/core/rx": "is gone — import signals and effects from @fluixi/reactive, or the server primitives it resolved to under node from @fluixi/core/server"
 };
 function createVitePlugin(options = {}) {
+  let transformTemplates;
+  let projectRoot = process.cwd();
+  const componentStyles = createComponentStyles((code, id, styles) => {
+    return transformTemplates(code, id, { ...transformOptions(options, id), sourceRoot: projectRoot, styles });
+  });
   return {
     name: "vite-fluixi-jsx",
     enforce: "pre",
-    config() {
-      return {
-        esbuild: {
-          jsx: "automatic",
-          jsxImportSource: options.importSource || "@fluixi/jsx"
-        }
-      };
+    // JSX the compiler leaves alone goes to Vite's own transform: Oxc in Vite 8 (Rolldown),
+    // esbuild before, which Vite 8 warns about.
+    // In dev, CSS maps are on unless the app says otherwise, so devtools show the line a
+    // component's rule was written on. Vite leaves them off by default; a build never has them.
+    config(user) {
+      const importSource = options.importSource || "@fluixi/jsx";
+      const jsx = this && this.meta?.rolldownVersion ? { oxc: { jsx: { runtime: "automatic", importSource } } } : { esbuild: { jsx: "automatic", jsxImportSource: importSource } };
+      return user?.css?.devSourcemap === void 0 ? { ...jsx, css: { devSourcemap: true } } : jsx;
     },
     // Written once per build, and on dev-server start, rather than per transform: the
     // set of resolvable names comes from config, so nothing a file does can change it.
-    configResolved(config) {
+    async configResolved(config) {
       const outcome = writeComponentGlobals(options, config?.root ?? process.cwd());
       if (outcome.warning) console.warn(outcome.warning);
+      if (options.babel) return;
+      projectRoot = config?.root ?? projectRoot;
+      componentStyles.connect(config?.plugins, config?.root);
+      const entry = config?.command === "build" && config.build?.lib ? config.build.lib.entry : void 0;
+      const first = typeof entry === "string" ? entry : Array.isArray(entry) ? entry[0] : entry && typeof entry === "object" ? Object.values(entry)[0] : void 0;
+      if (typeof first === "string") componentStyles.setLibrary(dirname3(resolvePath2(config.root ?? process.cwd(), first)));
+      if (componentStyles.active) ({ transformTemplates } = await import("./transform-P4AETYV4.mjs"));
+    },
+    generateBundle() {
+      for (const [fileName, source] of componentStyles.libraryFiles()) this.emitFile({ type: "asset", fileName, source });
+    },
+    // An edited component's style modules go out with its update: their ids end in `.css`, so
+    // Vite does not connect them to the file.
+    handleHotUpdate(ctx) {
+      if (!componentStyles.active) return void 0;
+      const styles = componentStyles.hotModules(ctx.file, ctx.server.moduleGraph);
+      return styles.length ? [...ctx.modules, ...styles] : void 0;
+    },
+    configureServer(server) {
+      componentStyles.setServer(server);
+    },
+    load(id) {
+      return componentStyles.isStyle(id) ? componentStyles.load(id, this) : null;
     },
     // A subpath we retired resolves to nothing, and the bundler reports that as
     // `Missing "./x" specifier`, which names neither the replacement nor the file
     // that asked. Answer it here, where the rename is known.
     resolveId(id, importer) {
+      if (componentStyles.isStyle(id)) return componentStyles.resolveId(id, importer, this);
+      if (componentStyles.isLibraryImport(id, importer)) return { id, external: true };
       const moved = RETIRED_SUBPATHS[id];
       if (!moved) return null;
       throw new Error(
@@ -331,6 +556,11 @@ function createVitePlugin(options = {}) {
       if (!/\.(jsx|tsx|ts)$/i.test(id)) {
         return null;
       }
+      if (!options.babel && componentStyles.active) {
+        const result = await componentStyles.compile(code, id, this);
+        reportDiagnostics(result, id);
+        return result;
+      }
       if (!options.babel) return compileModule(code, id, options);
       const babelPlugin = await createBabelPlugin(options);
       try {
@@ -409,7 +639,7 @@ function transformOptions(options, id) {
 }
 async function rewriteProps(code, id, options) {
   if (options.propsDestructure === false) return code;
-  const { transformProps } = await import("./transform-QWWQDCXE.mjs");
+  const { transformProps } = await import("./transform-P4AETYV4.mjs");
   const result = transformProps(code, id);
   reportDiagnostics({ propsDiagnostics: result.diagnostics }, id);
   return result.rewritten > 0 ? result.code : code;
@@ -426,13 +656,14 @@ function reportDiagnostics(result, id) {
   for (const d of r?.unresolvedDiagnostics ?? []) say(d.message);
   for (const d of r?.loadDiagnostics ?? []) say(d.message);
   for (const d of r?.intrinsicDiagnostics ?? []) say(d.message);
+  for (const d of r?.styleDiagnostics ?? []) say(`${d.line}:${d.column + 1} ${d.message}`);
   for (const d of r?.propsDiagnostics ?? []) {
     say(`\`${d.name}\` was left destructured: ${d.message}. It reads once instead of tracking.`);
   }
 }
 async function compileModule(code, id, options) {
   if (!options.babel) {
-    const { transformTemplates } = await import("./transform-QWWQDCXE.mjs");
+    const { transformTemplates } = await import("./transform-P4AETYV4.mjs");
     const result2 = transformTemplates(code, id, transformOptions(options, id));
     reportDiagnostics(result2, id);
     return result2;
@@ -478,8 +709,8 @@ function createESBuildPlugin(options = {}) {
     name: "esbuild-fluixi-jsx",
     setup(build) {
       build.onLoad({ filter: /\.[jt]sx?$/ }, async (args) => {
-        const { readFileSync: readFileSync3 } = await import("node:fs");
-        const source = readFileSync3(args.path, "utf8");
+        const { readFileSync: readFileSync4 } = await import("node:fs");
+        const source = readFileSync4(args.path, "utf8");
         try {
           const result = await compileModule(source, args.path, options);
           return {
@@ -517,7 +748,7 @@ function findServerFnModules(dir, out = []) {
     if (e.isDirectory()) findServerFnModules(full, out);
     else if (/\.[jt]sx?$/.test(e.name)) {
       try {
-        if (hasServerDirective(readFileSync2(full, "utf8"))) out.push(full);
+        if (hasServerDirective(readFileSync3(full, "utf8"))) out.push(full);
       } catch {
       }
     }
@@ -551,10 +782,10 @@ export { isServerFnRequest, handleServerFn } from '@fluixi/start/server-fn';
       if (!code.includes("use server")) return null;
       const args = { ssr: !!opts?.ssr, filename: id, root };
       if (options.babel) {
-        const { transformServerFunctions } = await import("./server-functions-CTDXX67X.mjs");
+        const { transformServerFunctions } = await import("./server-functions-LVS66Q4R.mjs");
         return transformServerFunctions(code, args);
       }
-      const { transformServerFns } = await import("./server-fns-ZFRDIQ2X.mjs");
+      const { transformServerFns } = await import("./server-fns-N3SDJXA7.mjs");
       return transformServerFns(code, args);
     }
   };