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

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,CA0JpE;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,6 +120,16 @@ 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',
@@ -133,15 +143,39 @@ export function createVitePlugin(options = {}) {
         },
         // 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 });
+        },
+        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);
+            if (componentStyles.isLibraryImport(id, importer))
+                return { id, external: true };
             const moved = RETIRED_SUBPATHS[id];
             if (!moved)
                 return null;
@@ -152,6 +186,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 +345,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 +444,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,13 @@
-/*! @fluixi/compiler v1.0.0-alpha.93 | (c) 2026 Ibrahima Touré and Fluixi contributors | MIT */
+/*! @fluixi/compiler v1.0.0-alpha.94 | (c) 2026 Ibrahima Touré and Fluixi contributors | MIT */
 import {
   INTRINSICS,
+  TAG_INTRINSICS,
   builtinComponentMap,
   createComponentResolver
-} from "./chunk-OD53TMER.mjs";
+} from "./chunk-HCCBEJEZ.mjs";
 import {
   __require
-} from "./chunk-TJIH7TLX.mjs";
+} from "./chunk-HIZU7WI2.mjs";
 
 // src/resolve/write-globals.ts
 import { mkdirSync, readdirSync, readFileSync, writeFileSync } from "node:fs";
@@ -75,7 +76,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 +139,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 +229,173 @@ 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-style&index=(\d+)(?:&inline)?&lang\.css$/;
+var LITERAL_ID = /\?fx-literal=([\w$]+)&inline&lang\.css$/;
+var styleId = (file, index) => `${file}?fx-style&index=${index}&lang.css`;
+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) => {
+    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]));
+      result = compile(code, file, { ...styles, imported });
+    }
+    const literal = result?.styleLiterals?.find((l) => l.name === ref.name);
+    return literal ? styles.process(literal.css, file) : null;
+  };
+  const resolveAll = async (refs, importer, ctx, seen) => {
+    const imported = /* @__PURE__ */ new Map();
+    for (const ref of refs) {
+      const nodes = await resolveReference(ref, importer, ctx, seen);
+      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 imported = await resolveAll(result.styleReferences, id, ctx, /* @__PURE__ */ new Set([file]));
+      result = compile(code, file, { ...styles, imported });
+    }
+    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(id, 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(id, 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 should keep: the file's absolute path and the
+     * query. Vite invalidates a module when the file its id names changes, so a root-relative id
+     * (`/src/card.tsx?fx-style…`, which is how a request arrives before the component's imports
+     * were analysed) was never invalidated, and an edited block kept its old CSS until restart.
+     */
+    resolveId(id) {
+      const at = id.indexOf("?");
+      return fileOf(id.slice(0, at)) + id.slice(at);
+    },
+    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 = id.slice(0, id.indexOf("?"));
+      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 };
+      }
+      const index = Number(match[1]);
+      return { code: entry?.css[index] ?? "", map: entry?.maps[index] ?? null };
+    }
+  };
 }
 
 // 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-RJFQVFJW.mjs");
   } catch (e) {
     console.warn("Could not load the babel front-end:", e);
   }
@@ -299,6 +456,11 @@ 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",
@@ -312,14 +474,32 @@ function createVitePlugin(options = {}) {
     },
     // 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-GBP6Y4UI.mjs"));
+    },
+    generateBundle() {
+      for (const [fileName, source] of componentStyles.libraryFiles()) this.emitFile({ type: "asset", fileName, source });
+    },
+    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);
+      if (componentStyles.isLibraryImport(id, importer)) return { id, external: true };
       const moved = RETIRED_SUBPATHS[id];
       if (!moved) return null;
       throw new Error(
@@ -331,6 +511,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 +594,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-GBP6Y4UI.mjs");
   const result = transformProps(code, id);
   reportDiagnostics({ propsDiagnostics: result.diagnostics }, id);
   return result.rewritten > 0 ? result.code : code;
@@ -426,13 +611,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-GBP6Y4UI.mjs");
     const result2 = transformTemplates(code, id, transformOptions(options, id));
     reportDiagnostics(result2, id);
     return result2;
@@ -478,8 +664,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 +703,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 +737,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-BGY3RD4R.mjs");
         return transformServerFunctions(code, args);
       }
-      const { transformServerFns } = await import("./server-fns-ZFRDIQ2X.mjs");
+      const { transformServerFns } = await import("./server-fns-JLSTKWPS.mjs");
       return transformServerFns(code, args);
     }
   };