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

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,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"}
+{"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

@@ -133,13 +133,16 @@ export function createVitePlugin(options = {}) {
     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.
@@ -162,6 +165,14 @@ export function createVitePlugin(options = {}) {
             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);
         },
@@ -173,7 +184,7 @@ export function createVitePlugin(options = {}) {
         // that asked. Answer it here, where the rename is known.
         resolveId(id, importer) {
             if (componentStyles.isStyle(id))
-                return componentStyles.resolveId(id);
+                return componentStyles.resolveId(id, importer, this);
             if (componentStyles.isLibraryImport(id, importer))
                 return { id, external: true };
             const moved = RETIRED_SUBPATHS[id];

package/dist/integrations.mjs

@@ -1,13 +1,17 @@
-/*! @fluixi/compiler v1.0.0-alpha.94 | (c) 2026 Ibrahima Touré and Fluixi contributors | MIT */
+/*! @fluixi/compiler v1.0.0-alpha.96 | (c) 2026 Ibrahima Touré and Fluixi contributors | MIT */
+import {
+  styleIds
+} from "./chunk-ZPEHDBCH.mjs";
 import {
   INTRINSICS,
   TAG_INTRINSICS,
   builtinComponentMap,
   createComponentResolver
-} from "./chunk-HCCBEJEZ.mjs";
+} from "./chunk-L6WBOEIO.mjs";
+import "./chunk-VX2OBUMB.mjs";
 import {
   __require
-} from "./chunk-HIZU7WI2.mjs";
+} from "./chunk-UVH2BMMY.mjs";
 
 // src/resolve/write-globals.ts
 import { mkdirSync, readdirSync, readFileSync, writeFileSync } from "node:fs";
@@ -236,9 +240,21 @@ function warnIfUnreachable(root, target) {
 // 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 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');
@@ -256,7 +272,7 @@ function createComponentStyles(compile) {
   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 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];
@@ -270,16 +286,20 @@ function createComponentStyles(compile) {
     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 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);
-    return literal ? styles.process(literal.css, file) : null;
+    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) => {
+  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);
+      const nodes = await resolveReference(ref, importer, ctx, seen, modules);
       if (nodes) imported.set(`${ref.source}#${ref.name}`, nodes);
     }
     return imported;
@@ -289,8 +309,9 @@ function createComponentStyles(compile) {
     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 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);
@@ -300,7 +321,7 @@ function createComponentStyles(compile) {
     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));
+        const mod = server.moduleGraph.getModuleById(styleId(file, i));
         if (mod) void server.reloadModule(mod);
       }
     }
@@ -318,7 +339,7 @@ function createComponentStyles(compile) {
 import ${JSON.stringify(`./${name}`)};` };
     }
     const imports = page.map((i) => `
-import ${JSON.stringify(styleId(id, i))};`).join("");
+import ${JSON.stringify(styleId(file, i))};`).join("");
     return { ...result, code: result.code + imports };
   };
   return {
@@ -351,14 +372,30 @@ import ${JSON.stringify(styleId(id, i))};`).join("");
       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.
+     * 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.
      */
-    resolveId(id) {
-      const at = id.indexOf("?");
-      return fileOf(id.slice(0, at)) + id.slice(at);
+    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,
     /**
@@ -369,7 +406,7 @@ import ${JSON.stringify(styleId(id, i))};`).join("");
       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("?"));
+      const file = ownerOf(id);
       let source;
       try {
         source = readFileSync2(fileOf(file), "utf8");
@@ -381,10 +418,10 @@ import ${JSON.stringify(styleId(id, i))};`).join("");
       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 };
+        return { code: css, map: null, moduleType: "css" };
       }
       const index = Number(match[1]);
-      return { code: entry?.css[index] ?? "", map: entry?.maps[index] ?? null };
+      return { code: entry?.css[index] ?? "", map: entry?.maps[index] ?? null, moduleType: "css" };
     }
   };
 }
@@ -395,7 +432,7 @@ import { dirname as dirname3, join as _join, resolve as resolvePath2 } from "nod
 async function createBabelPlugin(options = {}) {
   let pluginModule = null;
   try {
-    pluginModule = await import("./babel-RJFQVFJW.mjs");
+    pluginModule = await import("./babel-YG5PQAMX.mjs");
   } catch (e) {
     console.warn("Could not load the babel front-end:", e);
   }
@@ -464,13 +501,14 @@ function createVitePlugin(options = {}) {
   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.
@@ -483,11 +521,18 @@ function createVitePlugin(options = {}) {
       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"));
+      if (componentStyles.active) ({ transformTemplates } = await import("./transform-UODP37VJ.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);
     },
@@ -498,7 +543,7 @@ function createVitePlugin(options = {}) {
     // `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.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;
@@ -594,7 +639,7 @@ function transformOptions(options, id) {
 }
 async function rewriteProps(code, id, options) {
   if (options.propsDestructure === false) return code;
-  const { transformProps } = await import("./transform-GBP6Y4UI.mjs");
+  const { transformProps } = await import("./transform-UODP37VJ.mjs");
   const result = transformProps(code, id);
   reportDiagnostics({ propsDiagnostics: result.diagnostics }, id);
   return result.rewritten > 0 ? result.code : code;
@@ -618,7 +663,7 @@ function reportDiagnostics(result, id) {
 }
 async function compileModule(code, id, options) {
   if (!options.babel) {
-    const { transformTemplates } = await import("./transform-GBP6Y4UI.mjs");
+    const { transformTemplates } = await import("./transform-UODP37VJ.mjs");
     const result2 = transformTemplates(code, id, transformOptions(options, id));
     reportDiagnostics(result2, id);
     return result2;
@@ -737,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-BGY3RD4R.mjs");
+        const { transformServerFunctions } = await import("./server-functions-JNSQMA63.mjs");
         return transformServerFunctions(code, args);
       }
-      const { transformServerFns } = await import("./server-fns-JLSTKWPS.mjs");
+      const { transformServerFns } = await import("./server-fns-PZEOON2D.mjs");
       return transformServerFns(code, args);
     }
   };

package/dist/lower/compile-template.cjs

@@ -1,4 +1,4 @@
-/*! @fluixi/compiler v1.0.0-alpha.94 | (c) 2026 Ibrahima Touré and Fluixi contributors | MIT */
+/*! @fluixi/compiler v1.0.0-alpha.96 | (c) 2026 Ibrahima Touré and Fluixi contributors | MIT */
 "use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -790,14 +790,16 @@ function emitNode(node, used, templates) {
       for (const child of node.children) {
         used.add("insert");
         const childCode = emitNode(child, used, templates);
-        const isFn = child.kind === "expr" && child.reactive || child.kind === "component" || child.kind === "control";
-        parts.push(isFn ? `insert(${el}, ${childCode}, null);` : `insert(${el}, ${childCode});`);
+        const anchored = child.kind === "expr" && (child.reactive || !isLiteralCode(child.code)) || child.kind === "component" || child.kind === "control";
+        parts.push(anchored ? `insert(${el}, ${childCode}, null);` : `insert(${el}, ${childCode});`);
       }
       parts.push(`return ${el};`);
       return `(() => { ${parts.join(" ")} })()`;
     }
   }
 }
+var LITERAL = /^\s*(?:'(?:[^'\\]|\\.)*'|"(?:[^"\\]|\\.)*"|`[^`$]*`|-?\d[\d_.eE+-]*|true|false|null|undefined)\s*$/;
+var isLiteralCode = (code) => LITERAL.test(code);
 function inlineTemplates(code, templates) {
   if (!templates || templates.length === 0) return code;
   const byId = new Map(templates.map((t) => [t.id, JSON.stringify(t.html)]));

package/dist/lower/compile-template.mjs

@@ -1,4 +1,4 @@
-/*! @fluixi/compiler v1.0.0-alpha.94 | (c) 2026 Ibrahima Touré and Fluixi contributors | MIT */
+/*! @fluixi/compiler v1.0.0-alpha.96 | (c) 2026 Ibrahima Touré and Fluixi contributors | MIT */
 
 // ../../node_modules/.pnpm/@jridgewell+sourcemap-codec@1.6.0/node_modules/@jridgewell/sourcemap-codec/dist/sourcemap-codec.mjs
 var comma = ",".charCodeAt(0);
@@ -776,14 +776,16 @@ function emitNode(node, used, templates) {
       for (const child of node.children) {
         used.add("insert");
         const childCode = emitNode(child, used, templates);
-        const isFn = child.kind === "expr" && child.reactive || child.kind === "component" || child.kind === "control";
-        parts.push(isFn ? `insert(${el}, ${childCode}, null);` : `insert(${el}, ${childCode});`);
+        const anchored = child.kind === "expr" && (child.reactive || !isLiteralCode(child.code)) || child.kind === "component" || child.kind === "control";
+        parts.push(anchored ? `insert(${el}, ${childCode}, null);` : `insert(${el}, ${childCode});`);
       }
       parts.push(`return ${el};`);
       return `(() => { ${parts.join(" ")} })()`;
     }
   }
 }
+var LITERAL = /^\s*(?:'(?:[^'\\]|\\.)*'|"(?:[^"\\]|\\.)*"|`[^`$]*`|-?\d[\d_.eE+-]*|true|false|null|undefined)\s*$/;
+var isLiteralCode = (code) => LITERAL.test(code);
 function inlineTemplates(code, templates) {
   if (!templates || templates.length === 0) return code;
   const byId = new Map(templates.map((t) => [t.id, JSON.stringify(t.html)]));

package/dist/lower/jsx.cjs

@@ -736,14 +736,16 @@ function emitNode(node, used, templates) {
       for (const child of node.children) {
         used.add("insert");
         const childCode = emitNode(child, used, templates);
-        const isFn = child.kind === "expr" && child.reactive || child.kind === "component" || child.kind === "control";
-        parts.push(isFn ? `insert(${el}, ${childCode}, null);` : `insert(${el}, ${childCode});`);
+        const anchored = child.kind === "expr" && (child.reactive || !isLiteralCode(child.code)) || child.kind === "component" || child.kind === "control";
+        parts.push(anchored ? `insert(${el}, ${childCode}, null);` : `insert(${el}, ${childCode});`);
       }
       parts.push(`return ${el};`);
       return `(() => { ${parts.join(" ")} })()`;
     }
   }
 }
+var LITERAL = /^\s*(?:'(?:[^'\\]|\\.)*'|"(?:[^"\\]|\\.)*"|`[^`$]*`|-?\d[\d_.eE+-]*|true|false|null|undefined)\s*$/;
+var isLiteralCode = (code) => LITERAL.test(code);
 function inlineTemplates(code, templates) {
   if (!templates || templates.length === 0) return code;
   const byId = new Map(templates.map((t) => [t.id, JSON.stringify(t.html)]));

package/dist/lower/jsx.mjs

@@ -709,14 +709,16 @@ function emitNode(node, used, templates) {
       for (const child of node.children) {
         used.add("insert");
         const childCode = emitNode(child, used, templates);
-        const isFn = child.kind === "expr" && child.reactive || child.kind === "component" || child.kind === "control";
-        parts.push(isFn ? `insert(${el}, ${childCode}, null);` : `insert(${el}, ${childCode});`);
+        const anchored = child.kind === "expr" && (child.reactive || !isLiteralCode(child.code)) || child.kind === "component" || child.kind === "control";
+        parts.push(anchored ? `insert(${el}, ${childCode}, null);` : `insert(${el}, ${childCode});`);
       }
       parts.push(`return ${el};`);
       return `(() => { ${parts.join(" ")} })()`;
     }
   }
 }
+var LITERAL = /^\s*(?:'(?:[^'\\]|\\.)*'|"(?:[^"\\]|\\.)*"|`[^`$]*`|-?\d[\d_.eE+-]*|true|false|null|undefined)\s*$/;
+var isLiteralCode = (code) => LITERAL.test(code);
 function inlineTemplates(code, templates) {
   if (!templates || templates.length === 0) return code;
   const byId = new Map(templates.map((t) => [t.id, JSON.stringify(t.html)]));

package/dist/lower/template.cjs

@@ -585,14 +585,16 @@ function emitNode(node, used, templates) {
       for (const child of node.children) {
         used.add("insert");
         const childCode = emitNode(child, used, templates);
-        const isFn = child.kind === "expr" && child.reactive || child.kind === "component" || child.kind === "control";
-        parts.push(isFn ? `insert(${el}, ${childCode}, null);` : `insert(${el}, ${childCode});`);
+        const anchored = child.kind === "expr" && (child.reactive || !isLiteralCode(child.code)) || child.kind === "component" || child.kind === "control";
+        parts.push(anchored ? `insert(${el}, ${childCode}, null);` : `insert(${el}, ${childCode});`);
       }
       parts.push(`return ${el};`);
       return `(() => { ${parts.join(" ")} })()`;
     }
   }
 }
+var LITERAL = /^\s*(?:'(?:[^'\\]|\\.)*'|"(?:[^"\\]|\\.)*"|`[^`$]*`|-?\d[\d_.eE+-]*|true|false|null|undefined)\s*$/;
+var isLiteralCode = (code) => LITERAL.test(code);
 function inlineTemplates(code, templates) {
   if (!templates || templates.length === 0) return code;
   const byId = new Map(templates.map((t) => [t.id, JSON.stringify(t.html)]));

package/dist/lower/template.mjs

@@ -563,14 +563,16 @@ function emitNode(node, used, templates) {
       for (const child of node.children) {
         used.add("insert");
         const childCode = emitNode(child, used, templates);
-        const isFn = child.kind === "expr" && child.reactive || child.kind === "component" || child.kind === "control";
-        parts.push(isFn ? `insert(${el}, ${childCode}, null);` : `insert(${el}, ${childCode});`);
+        const anchored = child.kind === "expr" && (child.reactive || !isLiteralCode(child.code)) || child.kind === "component" || child.kind === "control";
+        parts.push(anchored ? `insert(${el}, ${childCode}, null);` : `insert(${el}, ${childCode});`);
       }
       parts.push(`return ${el};`);
       return `(() => { ${parts.join(" ")} })()`;
     }
   }
 }
+var LITERAL = /^\s*(?:'(?:[^'\\]|\\.)*'|"(?:[^"\\]|\\.)*"|`[^`$]*`|-?\d[\d_.eE+-]*|true|false|null|undefined)\s*$/;
+var isLiteralCode = (code) => LITERAL.test(code);
 function inlineTemplates(code, templates) {
   if (!templates || templates.length === 0) return code;
   const byId = new Map(templates.map((t) => [t.id, JSON.stringify(t.html)]));

package/dist/resolve/builtins.cjs

@@ -1,4 +1,4 @@
-/*! @fluixi/compiler v1.0.0-alpha.94 | (c) 2026 Ibrahima Touré and Fluixi contributors | MIT */
+/*! @fluixi/compiler v1.0.0-alpha.96 | (c) 2026 Ibrahima Touré and Fluixi contributors | MIT */
 "use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

package/dist/resolve/builtins.mjs

@@ -1,4 +1,4 @@
-/*! @fluixi/compiler v1.0.0-alpha.94 | (c) 2026 Ibrahima Touré and Fluixi contributors | MIT */
+/*! @fluixi/compiler v1.0.0-alpha.96 | (c) 2026 Ibrahima Touré and Fluixi contributors | MIT */
 
 // src/resolve/builtins.ts
 var DOM_CONTROL_FLOW = [

package/dist/{server-fns-JLSTKWPS.mjs → server-fns-PZEOON2D.mjs}

@@ -1,11 +1,12 @@
-/*! @fluixi/compiler v1.0.0-alpha.94 | (c) 2026 Ibrahima Touré and Fluixi contributors | MIT */
+/*! @fluixi/compiler v1.0.0-alpha.96 | (c) 2026 Ibrahima Touré and Fluixi contributors | MIT */
 import {
   MagicString
-} from "./chunk-E2RWTIYE.mjs";
+} from "./chunk-X735CULF.mjs";
+import "./chunk-VX2OBUMB.mjs";
 import {
   serverFnId
-} from "./chunk-DP2QDWWH.mjs";
-import "./chunk-HIZU7WI2.mjs";
+} from "./chunk-JJ4ZAZKY.mjs";
+import "./chunk-UVH2BMMY.mjs";
 
 // src/transform/server-fns.ts
 import { parse } from "@babel/parser";

package/dist/{server-functions-BGY3RD4R.mjs → server-functions-JNSQMA63.mjs}

@@ -1,8 +1,8 @@
-/*! @fluixi/compiler v1.0.0-alpha.94 | (c) 2026 Ibrahima Touré and Fluixi contributors | MIT */
+/*! @fluixi/compiler v1.0.0-alpha.96 | (c) 2026 Ibrahima Touré and Fluixi contributors | MIT */
 import {
   serverFnId
-} from "./chunk-DP2QDWWH.mjs";
-import "./chunk-HIZU7WI2.mjs";
+} from "./chunk-JJ4ZAZKY.mjs";
+import "./chunk-UVH2BMMY.mjs";
 
 // src/frontend/babel/server-functions.ts
 import { transformSync } from "@babel/core";

package/dist/transform/index.cjs

@@ -1,4 +1,4 @@
-/*! @fluixi/compiler v1.0.0-alpha.94 | (c) 2026 Ibrahima Touré and Fluixi contributors | MIT */
+/*! @fluixi/compiler v1.0.0-alpha.96 | (c) 2026 Ibrahima Touré and Fluixi contributors | MIT */
 "use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -101,7 +101,7 @@ function collectStyles(program, sourceName, options, tags = { html: /* @__PURE__
     const imported = literalsOf.imports.get(name);
     if (imported) {
       const nodes = options?.imported?.get(`${imported.source}#${imported.name}`);
-      if (nodes) return nodes.map(dropLoc);
+      if (nodes) return nodes.map((n) => keepLocIn(n, options?.importedModules));
       plan.references.push({ name: imported.name, source: imported.source, ...at });
       plan.diagnostics.push({
         ...at,
@@ -125,7 +125,7 @@ function collectStyles(program, sourceName, options, tags = { html: /* @__PURE__
     const nodes = resolveLiteral(name, at, []);
     const id = hash(`${sourceName}:css:${name}`);
     plan.edits.push({ start: literal.start, end: literal.end, code: `({ $fxStyle: ${JSON.stringify(id)} })` });
-    if (nodes) plan.literals.push({ id, name, css: printStyle(nodes, options.minify) });
+    if (nodes) plan.literals.push({ id, name, css: printStyle(nodes, options.minify), nodes });
   }
   const scopeOf = /* @__PURE__ */ new Map();
   const names = /* @__PURE__ */ new Map();
@@ -200,7 +200,7 @@ function collectStyles(program, sourceName, options, tags = { html: /* @__PURE__
       if (!plan.scopes.some((s) => s.value === id)) plan.scopes.push({ start: owner.start, end: owner.end, value: id });
       nodes = scopeNodes(nodes, id, (message) => plan.diagnostics.push({ ...at, message }));
     }
-    const printed = module2 ? printStyleWithMap(nodes, options.minify, sourceName, module2) : { css: printStyle(nodes, options.minify) };
+    const printed = module2 ? printStyleWithMap(nodes, options.minify, sourceName, module2, options.importedModules) : { css: printStyle(nodes, options.minify) };
     plan.styles.push({ id, scoped: scoped && !shadow, component, ...printed, ...shadow ? { shadow: true } : {}, ...at });
     if (shadow) shadow.indexes.push(plan.styles.length - 1);
   };
@@ -239,6 +239,11 @@ function staticMember(cls, name) {
     (m) => m.type === "ClassProperty" && m.static && (m.key.type === "Identifier" && m.key.name === name || m.key.type === "StringLiteral" && m.key.value === name)
   );
 }
+var styleIds = {
+  block: (owner, index) => `${owner}.fx-${index}.css`,
+  inline: (owner, index) => `${owner}.fx-${index}.css?inline`,
+  literal: (owner, name) => `${owner}.fx-literal-${name}.css?inline`
+};
 function finishShadowStyles(plan, code, moduleId) {
   const edits = [];
   const imports = [];
@@ -250,7 +255,7 @@ function finishShadowStyles(plan, code, moduleId) {
     return local;
   };
   for (const shadow of plan.shadowClasses.values()) {
-    const blocks = shadow.indexes.map((i) => importOf(`${moduleId}?fx-style&index=${i}&inline&lang.css`));
+    const blocks = shadow.indexes.map((i) => importOf(styleIds.inline(moduleId, i)));
     let value;
     const prop = shadow.styles;
     if (prop?.value) {
@@ -258,7 +263,7 @@ function finishShadowStyles(plan, code, moduleId) {
       let text = code.slice(start, prop.value.end);
       const replacements = [];
       walkIdentifiers(prop.value, (id) => {
-        const local = plan.names?.literals.has(id.name) ? importOf(`${moduleId}?fx-literal=${id.name}&inline&lang.css`) : plan.names?.imports.has(id.name) && !/\.css(\?|$)/.test(plan.names.imports.get(id.name).source) ? importOf(`${plan.names.imports.get(id.name).source}?fx-literal=${plan.names.imports.get(id.name).name}&inline&lang.css`) : void 0;
+        const local = plan.names?.literals.has(id.name) ? importOf(styleIds.literal(moduleId, id.name)) : plan.names?.imports.has(id.name) && !/\.css(\?|$)/.test(plan.names.imports.get(id.name).source) ? importOf(styleIds.literal(plan.names.imports.get(id.name).source, plan.names.imports.get(id.name).name)) : void 0;
         if (local) replacements.push({ at: id.start - start, length: id.name.length, with: local });
       });
       for (const r of replacements.sort((a, b) => b.at - a.at)) text = text.slice(0, r.at) + r.with + text.slice(r.at + r.length);
@@ -540,12 +545,23 @@ function shiftLoc(node, source, start) {
   if (node.kind === "rule" || node.kind === "at-rule") return { ...node, loc, nodes: node.nodes.map((n) => shiftLoc(n, source, start)) };
   return { ...node, loc };
 }
-function dropLoc(node) {
-  const { loc: _loc, ...rest } = node;
-  if (rest.kind === "rule" || rest.kind === "at-rule") return { ...rest, nodes: rest.nodes.map(dropLoc) };
-  return rest;
-}
-function printStyleWithMap(nodes, minify, sourceName, module2) {
+function keepLocIn(node, modules) {
+  const keep = node.loc !== void 0 && modules?.has(node.loc.source) === true;
+  const { loc, ...rest } = node;
+  const kept = keep ? { ...rest, loc } : rest;
+  if (kept.kind === "rule" || kept.kind === "at-rule") return { ...kept, nodes: kept.nodes.map((n) => keepLocIn(n, modules)) };
+  return kept;
+}
+function printStyleWithMap(nodes, minify, sourceName, module2, others) {
+  const sources = [module2];
+  const index = /* @__PURE__ */ new Map([[sourceName, 0]]);
+  const sourceOf = (name) => {
+    if (index.has(name)) return index.get(name);
+    const other = others?.get(name);
+    if (!other) return void 0;
+    index.set(name, sources.push(other) - 1);
+    return index.get(name);
+  };
   const lines = [[]];
   let css = "";
   let column = 0;
@@ -559,7 +575,8 @@ function printStyleWithMap(nodes, minify, sourceName, module2) {
     }
   };
   const mark = (loc) => {
-    if (loc && loc.source === sourceName) lines[lines.length - 1].push([column, 0, loc.line - 1, loc.column]);
+    const at = loc ? sourceOf(loc.source) : void 0;
+    if (loc && at !== void 0) lines[lines.length - 1].push([column, at, loc.line - 1, loc.column]);
   };
   const write = (node, depth) => {
     const pad = minify ? "" : "  ".repeat(depth);
@@ -578,7 +595,7 @@ function printStyleWithMap(nodes, minify, sourceName, module2) {
     }
   };
   for (const node of nodes) write(node, 0);
-  return { css, map: { version: 3, sources: [module2.id], sourcesContent: [module2.code], names: [], mappings: (0, import_sourcemap_codec.encode)(lines) } };
+  return { css, map: { version: 3, sources: sources.map((s) => s.id), sourcesContent: sources.map((s) => s.code), names: [], mappings: (0, import_sourcemap_codec.encode)(lines) } };
 }
 function printStyle(nodes, minify = false) {
   const out = [];
@@ -1706,14 +1723,16 @@ function emitNode(node, used, templates) {
       for (const child of node.children) {
         used.add("insert");
         const childCode = emitNode(child, used, templates);
-        const isFn = child.kind === "expr" && child.reactive || child.kind === "component" || child.kind === "control";
-        parts.push(isFn ? `insert(${el}, ${childCode}, null);` : `insert(${el}, ${childCode});`);
+        const anchored = child.kind === "expr" && (child.reactive || !isLiteralCode(child.code)) || child.kind === "component" || child.kind === "control";
+        parts.push(anchored ? `insert(${el}, ${childCode}, null);` : `insert(${el}, ${childCode});`);
       }
       parts.push(`return ${el};`);
       return `(() => { ${parts.join(" ")} })()`;
     }
   }
 }
+var LITERAL = /^\s*(?:'(?:[^'\\]|\\.)*'|"(?:[^"\\]|\\.)*"|`[^`$]*`|-?\d[\d_.eE+-]*|true|false|null|undefined)\s*$/;
+var isLiteralCode = (code) => LITERAL.test(code);
 function inlineTemplates(code, templates) {
   if (!templates || templates.length === 0) return code;
   const byId = new Map(templates.map((t) => [t.id, JSON.stringify(t.html)]));