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

package/dist/vite-styles.js

@@ -9,12 +9,29 @@
  */
 import { existsSync, readFileSync } from 'node:fs';
 import { basename, dirname, extname, join, relative } from 'node:path';
-// A page stylesheet, or (`&inline`, Vite's own flag) a shadow root's CSS as a string; and a
-// css`` value's CSS for a shadow class's `static styles`.
-const STYLE_ID = /\?fx-style&index=(\d+)(?:&inline)?&lang\.css$/;
-const LITERAL_ID = /\?fx-literal=([\w$]+)&inline&lang\.css$/;
+import { styleIds } from './transform/styles.js';
+// A page stylesheet, or (`?inline`, Vite's own flag) a shadow root's CSS as a string; and a
+// css`` value's CSS for a shadow class's `static styles`. The owner is what comes before.
+const STYLE_ID = /\.fx-(\d+)\.css(?:\?inline)?$/;
+const LITERAL_ID = /\.fx-literal-([\w$]+)\.css\?inline$/;
+const SUFFIX = /\.fx-(?:\d+|literal-[\w$]+)\.css(?:\?inline)?$/;
 /** The id a component's n-th style block is served under: a CSS request Vite treats as such. */
-export const styleId = (file, index) => `${file}?fx-style&index=${index}&lang.css`;
+export const styleId = styleIds.block;
+/** The source name the first positioned node carries: the module a value was written in. */
+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 undefined;
+}
+/** The component a style id belongs to, as written in the id. */
+const ownerOf = (id) => id.slice(0, id.search(SUFFIX));
 // The same loader @fluixi-ui/tokens ships beside each slice: one <link>, added once.
 const loader = (name) => `const href = new URL(${JSON.stringify(`./${name}`)}, import.meta.url).href;
 if (typeof document !== 'undefined' && !document.querySelector(\`link[data-fx-css="\${href}"]\`)) {
@@ -39,7 +56,7 @@ export function createComponentStyles(compile) {
     // The CSS of each module's blocks, with the source it came from, for `load` and for telling
     // what changed.
     const cache = 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;
@@ -57,16 +74,23 @@ export function createComponentStyles(compile) {
         let result = compile(code, file, styles);
         // A value that composes values from further away: those first.
         if (result?.styleReferences?.length) {
-            const imported = await resolveAll(result.styleReferences, file, ctx, new Set([...seen, file]));
-            result = compile(code, file, { ...styles, imported });
+            const imported = await resolveAll(result.styleReferences, file, ctx, 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;
+        // Its rules as written, positions in its own module, which the composing block's map names.
+        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 = 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);
         }
@@ -80,8 +104,9 @@ export 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, new Set([file]));
-            result = compile(code, file, { ...styles, imported });
+            const modules = new Map();
+            const imported = await resolveAll(result.styleReferences, id, ctx, 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);
@@ -94,7 +119,7 @@ export function createComponentStyles(compile) {
             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);
             }
@@ -118,7 +143,7 @@ export function createComponentStyles(compile) {
             emitted.set(`${out}.js`, loader(name));
             return { ...result, code: `${result.code}\nimport ${JSON.stringify(`./${name}`)};` };
         }
-        const imports = page.map((i) => `\nimport ${JSON.stringify(styleId(id, i))};`).join('');
+        const imports = page.map((i) => `\nimport ${JSON.stringify(styleId(file, i))};`).join('');
         return { ...result, code: result.code + imports };
     };
     return {
@@ -155,14 +180,32 @@ export function createComponentStyles(compile) {
             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.
+         */
+        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.
          */
-        resolveId(id) {
-            const at = id.indexOf('?');
-            return fileOf(id.slice(0, at)) + id.slice(at);
+        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,
         /**
@@ -174,7 +217,7 @@ export function createComponentStyles(compile) {
             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 = readFileSync(fileOf(file), 'utf8');
@@ -189,10 +232,10 @@ export function createComponentStyles(compile) {
                 const css = entry?.literals.get(literal[1]);
                 if (css === undefined)
                     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' };
         },
     };
 }

package/dist/vite-styles.mjs

@@ -1,9 +1,43 @@
 // src/vite-styles.ts
 import { existsSync, readFileSync } from "node:fs";
 import { basename, dirname, extname, join, relative } 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`;
+
+// ../../node_modules/.pnpm/@jridgewell+sourcemap-codec@1.6.0/node_modules/@jridgewell/sourcemap-codec/dist/sourcemap-codec.mjs
+var comma = ",".charCodeAt(0);
+var semicolon = ";".charCodeAt(0);
+var chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
+var intToChar = new Uint8Array(64);
+var charToInt = new Uint8Array(128);
+for (let i = 0; i < chars.length; i++) {
+  const c = chars.charCodeAt(i);
+  intToChar[i] = c;
+  charToInt[c] = i;
+}
+var bufLength = 1024 * 16;
+
+// src/transform/styles.ts
+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`
+};
+
+// src/vite-styles.ts
+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');
@@ -21,7 +55,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];
@@ -35,16 +69,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;
@@ -54,8 +92,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);
@@ -65,7 +104,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);
       }
     }
@@ -83,7 +122,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 {
@@ -116,14 +155,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.
+     */
+    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.
      */
-    resolveId(id) {
-      const at = id.indexOf("?");
-      return fileOf(id.slice(0, at)) + id.slice(at);
+    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,
     /**
@@ -134,7 +189,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 = readFileSync(fileOf(file), "utf8");
@@ -146,10 +201,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" };
     }
   };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluixi/compiler",
-  "version": "1.0.0-alpha.94",
+  "version": "1.0.0-alpha.96",
   "license": "MIT",
   "author": "Ibrahima Touré",
   "repository": {
@@ -108,9 +108,9 @@
     "cross-env": "^7.0.3",
     "inquirer": "^14.0.2",
     "jsdom": "^25.0.0",
-    "vitest": "^1.6.1",
-    "@fluixi/dom": "1.0.0-alpha.94",
-    "@fluixi/reactive": "1.0.0-alpha.94"
+    "vitest": "^5.0.3",
+    "@fluixi/dom": "1.0.0-alpha.96",
+    "@fluixi/reactive": "1.0.0-alpha.96"
   },
   "peerDependencies": {
     "@babel/core": "^7.28.5",