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

package/dist/transform/index.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/transform/templates.ts
 import { parse as parse2 } from "@babel/parser";
@@ -1137,7 +1137,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((n2) => keepLocIn(n2, options?.importedModules));
       plan.references.push({ name: imported.name, source: imported.source, ...at });
       plan.diagnostics.push({
         ...at,
@@ -1161,7 +1161,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();
@@ -1236,7 +1236,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 = module ? printStyleWithMap(nodes, options.minify, sourceName, module) : { css: printStyle(nodes, options.minify) };
+    const printed = module ? printStyleWithMap(nodes, options.minify, sourceName, module, 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);
   };
@@ -1275,6 +1275,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 = [];
@@ -1286,7 +1291,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) {
@@ -1294,7 +1299,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);
@@ -1576,12 +1581,23 @@ function shiftLoc(node, source, start) {
   if (node.kind === "rule" || node.kind === "at-rule") return { ...node, loc, nodes: node.nodes.map((n2) => shiftLoc(n2, 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, module) {
+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((n2) => keepLocIn(n2, modules)) };
+  return kept;
+}
+function printStyleWithMap(nodes, minify, sourceName, module, others) {
+  const sources = [module];
+  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;
@@ -1595,7 +1611,8 @@ function printStyleWithMap(nodes, minify, sourceName, module) {
     }
   };
   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);
@@ -1614,7 +1631,7 @@ function printStyleWithMap(nodes, minify, sourceName, module) {
     }
   };
   for (const node of nodes) write(node, 0);
-  return { css, map: { version: 3, sources: [module.id], sourcesContent: [module.code], names: [], mappings: encode(lines) } };
+  return { css, map: { version: 3, sources: sources.map((s) => s.id), sourcesContent: sources.map((s) => s.code), names: [], mappings: encode(lines) } };
 }
 function printStyle(nodes, minify = false) {
   const out = [];
@@ -2742,14 +2759,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/transform/styles.cjs

@@ -28,7 +28,8 @@ __export(styles_exports, {
   printStyle: () => printStyle,
   printStyleWithMap: () => printStyleWithMap,
   scopeNodes: () => scopeNodes,
-  scopeSelector: () => scopeSelector
+  scopeSelector: () => scopeSelector,
+  styleIds: () => styleIds
 });
 module.exports = __toCommonJS(styles_exports);
 var import_sourcemap_codec = require("@jridgewell/sourcemap-codec");
@@ -87,7 +88,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,
@@ -111,7 +112,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();
@@ -186,7 +187,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);
   };
@@ -225,6 +226,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 = [];
@@ -236,7 +242,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) {
@@ -244,7 +250,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);
@@ -526,12 +532,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 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) {
+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;
@@ -545,7 +562,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);
@@ -564,7 +582,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 = [];

package/dist/transform/styles.d.cts

@@ -59,6 +59,14 @@ export interface StyleOptions {
      * the import names them. A reference not in here is reported in `styleReferences`.
      */
     imported?: Map<string, StyleNode[]>;
+    /**
+     * The modules those values were written in, by the name their positions carry: with them, a
+     * composed value's rules map back to that module's lines. Without, they are left unmapped.
+     */
+    importedModules?: Map<string, {
+        id: string;
+        code: string;
+    }>;
 }
 /** A `css`` value: portable, unscoped, emitted only where something uses it. */
 export interface StyleLiteral {
@@ -66,6 +74,8 @@ export interface StyleLiteral {
     /** The variable it is bound to. */
     name: string;
     css: string;
+    /** Its rules, positions in this module kept, for a module that composes it. */
+    nodes: StyleNode[];
 }
 /** An interpolated style value from another module, for the build to resolve. */
 export interface StyleReference {
@@ -185,6 +195,17 @@ export declare function applyTemplateStyles(ir: IRLike, t: TemplateStyles): void
  * `css`` values named in its `static styles` become `?inline` imports of their processed CSS
  * (the text `static styles` takes), and the class's `static styles` lists them.
  */
+/**
+ * Where a component's style blocks and css`` values are served: next to the component, a path
+ * ending in `.css`. Every CSS tool in the bundler then sees CSS, and none sees TSX: Vite 8
+ * matches its transforms on the path without the query, so `card.tsx?…` would read as a .tsx.
+ * `?inline` (Vite's own) asks for the CSS as a string, for a shadow root.
+ */
+export declare const styleIds: {
+    block: (owner: string, index: number) => string;
+    inline: (owner: string, index: number) => string;
+    literal: (owner: string, name: string) => string;
+};
 export declare function finishShadowStyles(plan: StylePlan, code: string, moduleId: string): {
     start: number;
     end: number;
@@ -203,7 +224,12 @@ export declare function scopeSelector(selector: string, id: string, warn?: (mess
 export declare function printStyleWithMap(nodes: StyleNode[], minify: boolean | undefined, sourceName: string, module: {
     id: string;
     code: string;
-}): {
+}, 
+/** Other modules rules came from (composed css`` values), by the name their positions carry. */
+others?: ReadonlyMap<string, {
+    id: string;
+    code: string;
+}>): {
     css: string;
     map: StyleMap;
 };

package/dist/transform/styles.d.ts

@@ -59,6 +59,14 @@ export interface StyleOptions {
      * the import names them. A reference not in here is reported in `styleReferences`.
      */
     imported?: Map<string, StyleNode[]>;
+    /**
+     * The modules those values were written in, by the name their positions carry: with them, a
+     * composed value's rules map back to that module's lines. Without, they are left unmapped.
+     */
+    importedModules?: Map<string, {
+        id: string;
+        code: string;
+    }>;
 }
 /** A `css`` value: portable, unscoped, emitted only where something uses it. */
 export interface StyleLiteral {
@@ -66,6 +74,8 @@ export interface StyleLiteral {
     /** The variable it is bound to. */
     name: string;
     css: string;
+    /** Its rules, positions in this module kept, for a module that composes it. */
+    nodes: StyleNode[];
 }
 /** An interpolated style value from another module, for the build to resolve. */
 export interface StyleReference {
@@ -185,6 +195,17 @@ export declare function applyTemplateStyles(ir: IRLike, t: TemplateStyles): void
  * `css`` values named in its `static styles` become `?inline` imports of their processed CSS
  * (the text `static styles` takes), and the class's `static styles` lists them.
  */
+/**
+ * Where a component's style blocks and css`` values are served: next to the component, a path
+ * ending in `.css`. Every CSS tool in the bundler then sees CSS, and none sees TSX: Vite 8
+ * matches its transforms on the path without the query, so `card.tsx?…` would read as a .tsx.
+ * `?inline` (Vite's own) asks for the CSS as a string, for a shadow root.
+ */
+export declare const styleIds: {
+    block: (owner: string, index: number) => string;
+    inline: (owner: string, index: number) => string;
+    literal: (owner: string, name: string) => string;
+};
 export declare function finishShadowStyles(plan: StylePlan, code: string, moduleId: string): {
     start: number;
     end: number;
@@ -203,7 +224,12 @@ export declare function scopeSelector(selector: string, id: string, warn?: (mess
 export declare function printStyleWithMap(nodes: StyleNode[], minify: boolean | undefined, sourceName: string, module: {
     id: string;
     code: string;
-}): {
+}, 
+/** Other modules rules came from (composed css`` values), by the name their positions carry. */
+others?: ReadonlyMap<string, {
+    id: string;
+    code: string;
+}>): {
     css: string;
     map: StyleMap;
 };

package/dist/transform/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/transform/styles.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/transform/styles.ts"],"names":[],"mappings":"AAcA,uEAAuE;AACvE,UAAU,IAAI;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,GAAG,CAAC,EAAE;QAAE,KAAK,EAAE;YAAE,IAAI,EAAE,MAAM,CAAC;YAAC,MAAM,EAAE,MAAM,CAAA;SAAE,CAAA;KAAE,GAAG,IAAI,CAAC;IACzD,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAED,oEAAoE;AACpE,4DAA4D;AAC5D,MAAM,WAAW,QAAQ;IACvB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,MAAM,SAAS,GACjB;IAAE,IAAI,EAAE,aAAa,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,OAAO,CAAC;IAAC,GAAG,CAAC,EAAE,QAAQ,CAAA;CAAE,GAC5F;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,SAAS,EAAE,CAAC;IAAC,GAAG,CAAC,EAAE,QAAQ,CAAA;CAAE,GACtE;IAAE,IAAI,EAAE,SAAS,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,SAAS,EAAE,CAAC;IAAC,GAAG,CAAC,EAAE,QAAQ,CAAA;CAAE,GACrF;IAAE,IAAI,EAAE,KAAK,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,GAAG,CAAC,EAAE,QAAQ,CAAA;CAAE,CAAC;AAElD,uBAAuB;AACvB,MAAM,WAAW,QAAQ;IACvB,OAAO,EAAE,CAAC,CAAC;IACX,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,cAAc,EAAE,MAAM,EAAE,CAAC;IACzB,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,YAAY;IAC3B,6FAA6F;IAC7F,OAAO,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,SAAS,EAAE,CAAC;IAChD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,qGAAqG;IACrG,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,SAAS,EAAE,CAAC,CAAC;IACpC;;;OAGG;IACH,eAAe,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CAC7D;AAED,gFAAgF;AAChF,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,mCAAmC;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,+EAA+E;IAC/E,KAAK,EAAE,SAAS,EAAE,CAAC;CACpB;AAED,iFAAiF;AACjF,MAAM,WAAW,cAAc;IAC7B,qCAAqC;IACrC,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,aAAa;IAC5B,yEAAyE;IACzE,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,OAAO,CAAC;IAChB,kEAAkE;IAClE,SAAS,EAAE,MAAM,CAAC;IAClB,GAAG,EAAE,MAAM,CAAC;IACZ,8DAA8D;IAC9D,GAAG,CAAC,EAAE,QAAQ,CAAC;IACf,mGAAmG;IACnG,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,kFAAkF;AAClF,UAAU,WAAW;IACnB,IAAI,EAAE,IAAI,CAAC;IACX,gDAAgD;IAChD,MAAM,CAAC,EAAE,IAAI,CAAC;IACd,+DAA+D;IAC/D,OAAO,EAAE,MAAM,EAAE,CAAC;CACnB;AAED,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,SAAS;IACxB,8EAA8E;IAC9E,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IACxD,sFAAsF;IACtF,cAAc,EAAE,GAAG,CAAC,MAAM,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC/D,4EAA4E;IAC5E,IAAI,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAClB,MAAM,EAAE,aAAa,EAAE,CAAC;IACxB,WAAW,EAAE,eAAe,EAAE,CAAC;IAC/B,oFAAoF;IACpF,KAAK,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IACtD,QAAQ,EAAE,YAAY,EAAE,CAAC;IACzB,UAAU,EAAE,cAAc,EAAE,CAAC;IAC7B,aAAa,EAAE,GAAG,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;IACtC,6FAA6F;IAC7F,KAAK,CAAC,EAAE;QAAE,QAAQ,EAAE,GAAG,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;QAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE;YAAE,MAAM,EAAE,MAAM,CAAC;YAAC,IAAI,EAAE,MAAM,CAAA;SAAE,CAAC,CAAA;KAAE,CAAC;CACjG;AAED,eAAO,MAAM,UAAU,cAAc,CAAC;AAItC,gGAAgG;AAChG,wBAAgB,aAAa,CAC3B,OAAO,EAAE,IAAI,EACb,UAAU,EAAE,MAAM,EAClB,OAAO,EAAE,YAAY,GAAG,SAAS;AACjC,wGAAwG;AACxG,IAAI,GAAE;IAAE,IAAI,EAAE,WAAW,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAAC,GAAG,CAAC,EAAE,MAAM,EAAE,CAAA;CAA0C;AACnG,2EAA2E;AAC3E,MAAM,CAAC,EAAE;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,GACpC,SAAS,CAoMX;AAID,uFAAuF;AACvF,MAAM,WAAW,cAAc;IAC7B,OAAO,EAAE,YAAY,CAAC;IACtB,2DAA2D;IAC3D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sFAAsF;IACtF,KAAK,CAAC,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1C,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,aAAa,EAAE,CAAC;IACxB,WAAW,EAAE,eAAe,EAAE,CAAC;CAChC;AAED,UAAU,MAAM;IACd,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,OAAO,CAAA;KAAE,EAAE,CAAC;IAC5D,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,cAAc,GAAG,IAAI,CAevE;AAQD;;;;GAIG;AACH;;;;;GAKG;AACH,eAAO,MAAM,QAAQ;mBACJ,MAAM,SAAS,MAAM;oBACpB,MAAM,SAAS,MAAM;qBACpB,MAAM,QAAQ,MAAM;CACtC,CAAC;AAEF,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,EAAE,CAwClI;AAkJD,0FAA0F;AAC1F,wBAAgB,IAAI,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAOzC;AAOD,oGAAoG;AACpG,wBAAgB,UAAU,CAAC,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,IAAI,GAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAe,GAAG,SAAS,EAAE,CAMlH;AAED,yFAAyF;AACzF,wBAAgB,aAAa,CAAC,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,IAAI,GAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAe,GAAG,MAAM,CAI9G;AA4JD;;;GAGG;AACH,wBAAgB,iBAAiB,CAC/B,KAAK,EAAE,SAAS,EAAE,EAClB,MAAM,EAAE,OAAO,GAAG,SAAS,EAC3B,UAAU,EAAE,MAAM,EAClB,MAAM,EAAE;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE;AACpC,gGAAgG;AAChG,MAAM,CAAC,EAAE,WAAW,CAAC,MAAM,EAAE;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC,GACzD;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,QAAQ,CAAA;CAAE,CA4ChC;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,SAAS,EAAE,EAAE,MAAM,UAAQ,GAAG,MAAM,CAmBrE"}

package/dist/transform/styles.js

@@ -75,9 +75,9 @@ module) {
         const imported = literalsOf.imports.get(name);
         if (imported) {
             const nodes = options?.imported?.get(`${imported.source}#${imported.name}`);
-            // Their positions count from printed CSS, not from any source file.
+            // Positions in a module the build named stay, for the map; any other is dropped.
             if (nodes)
-                return nodes.map(dropLoc);
+                return nodes.map((n) => keepLocIn(n, options?.importedModules));
             plan.references.push({ name: imported.name, source: imported.source, ...at });
             // Without `imported` the host has not looked yet; with it, it looked and found nothing.
             plan.diagnostics.push({
@@ -106,7 +106,7 @@ module) {
         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) });
+            plan.literals.push({ id, name, css: printStyle(nodes, options.minify), nodes });
     }
     const scopeOf = new Map();
     const names = new Map();
@@ -202,7 +202,9 @@ module) {
                 plan.scopes.push({ start: owner.start, end: owner.end, value: id });
             nodes = scopeNodes(nodes, id, (message) => plan.diagnostics.push({ ...at, message }));
         }
-        const printed = module ? printStyleWithMap(nodes, options.minify, sourceName, module) : { css: printStyle(nodes, options.minify) };
+        const printed = module
+            ? printStyleWithMap(nodes, options.minify, sourceName, module, 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);
@@ -252,6 +254,17 @@ function staticMember(cls, name) {
  * `css`` values named in its `static styles` become `?inline` imports of their processed CSS
  * (the text `static styles` takes), and the class's `static styles` lists them.
  */
+/**
+ * Where a component's style blocks and css`` values are served: next to the component, a path
+ * ending in `.css`. Every CSS tool in the bundler then sees CSS, and none sees TSX: Vite 8
+ * matches its transforms on the path without the query, so `card.tsx?…` would read as a .tsx.
+ * `?inline` (Vite's own) asks for the CSS as a string, for a shadow root.
+ */
+export const 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`,
+};
 export function finishShadowStyles(plan, code, moduleId) {
     const edits = [];
     const imports = [];
@@ -262,7 +275,7 @@ export 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) {
@@ -272,9 +285,9 @@ export function finishShadowStyles(plan, code, moduleId) {
             const replacements = [];
             walkIdentifiers(prop.value, (id) => {
                 const local = plan.names?.literals.has(id.name)
-                    ? importOf(`${moduleId}?fx-literal=${id.name}&inline&lang.css`)
+                    ? importOf(styleIds.literal(moduleId, id.name))
                     : 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`)
+                        ? importOf(styleIds.literal(plan.names.imports.get(id.name).source, plan.names.imports.get(id.name).name))
                         : undefined;
                 if (local)
                     replacements.push({ at: id.start - start, length: id.name.length, with: local });
@@ -636,17 +649,32 @@ function shiftLoc(node, source, start) {
         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 keepLocIn(node, modules) {
+    const keep = node.loc !== undefined && 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;
 }
 /**
  * Prints like `printStyle`, with a map from each rule and declaration back to where it was
  * written in the module: the browser's devtools then show the `.tsx` line, not the generated CSS.
  */
-export function printStyleWithMap(nodes, minify, sourceName, module) {
+export function printStyleWithMap(nodes, minify, sourceName, module, 
+/** Other modules rules came from (composed css`` values), by the name their positions carry. */
+others) {
+    const sources = [module];
+    const index = new Map([[sourceName, 0]]);
+    const sourceOf = (name) => {
+        if (index.has(name))
+            return index.get(name);
+        const other = others?.get(name);
+        if (!other)
+            return undefined;
+        index.set(name, sources.push(other) - 1);
+        return index.get(name);
+    };
     const lines = [[]];
     let css = '';
     let column = 0;
@@ -662,8 +690,9 @@ export function printStyleWithMap(nodes, minify, sourceName, module) {
         }
     };
     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) : undefined;
+        if (loc && at !== undefined)
+            lines[lines.length - 1].push([column, at, loc.line - 1, loc.column]);
     };
     const write = (node, depth) => {
         const pad = minify ? '' : '  '.repeat(depth);
@@ -686,7 +715,7 @@ export function printStyleWithMap(nodes, minify, sourceName, module) {
     };
     for (const node of nodes)
         write(node, 0);
-    return { css, map: { version: 3, sources: [module.id], sourcesContent: [module.code], names: [], mappings: encode(lines) } };
+    return { css, map: { version: 3, sources: sources.map((s) => s.id), sourcesContent: sources.map((s) => s.code), names: [], mappings: encode(lines) } };
 }
 export function printStyle(nodes, minify = false) {
     const out = [];

package/dist/transform/styles.mjs

@@ -141,7 +141,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,
@@ -165,7 +165,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();
@@ -240,7 +240,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 = module ? printStyleWithMap(nodes, options.minify, sourceName, module) : { css: printStyle(nodes, options.minify) };
+    const printed = module ? printStyleWithMap(nodes, options.minify, sourceName, module, 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);
   };
@@ -279,6 +279,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 = [];
@@ -290,7 +295,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) {
@@ -298,7 +303,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);
@@ -580,12 +585,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 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, module) {
+function printStyleWithMap(nodes, minify, sourceName, module, others) {
+  const sources = [module];
+  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;
@@ -599,7 +615,8 @@ function printStyleWithMap(nodes, minify, sourceName, module) {
     }
   };
   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);
@@ -618,7 +635,7 @@ function printStyleWithMap(nodes, minify, sourceName, module) {
     }
   };
   for (const node of nodes) write(node, 0);
-  return { css, map: { version: 3, sources: [module.id], sourcesContent: [module.code], names: [], mappings: encode(lines) } };
+  return { css, map: { version: 3, sources: sources.map((s) => s.id), sourcesContent: sources.map((s) => s.code), names: [], mappings: encode(lines) } };
 }
 function printStyle(nodes, minify = false) {
   const out = [];
@@ -649,5 +666,6 @@ export {
   printStyle,
   printStyleWithMap,
   scopeNodes,
-  scopeSelector
+  scopeSelector,
+  styleIds
 };