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

package/dist/vite-styles.js

@@ -0,0 +1,198 @@
+/**
+ * Component styles in a Vite build: the orchestration around the compiler's style pass.
+ *
+ * The CSS engine is reached through another plugin's `api.fluixiCss` (@fluixi-css/vite), which
+ * owns the project's shared context; the compiler owns ownership and scoping; this file only
+ * connects them. Each compiled block becomes a CSS module the component imports, so Vite's own
+ * CSS pipeline does the rest: extraction, chunking, dev style tags, hot updates, and the
+ * stylesheets @fluixi/start puts in server-rendered pages.
+ */
+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$/;
+/** 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`;
+// 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}"]\`)) {
+  const link = document.createElement('link');
+  link.rel = 'stylesheet';
+  link.href = href;
+  link.dataset.fxCss = href;
+  document.head.appendChild(link);
+}
+`;
+export function createComponentStyles(compile) {
+    let api;
+    let server;
+    let root = process.cwd();
+    // A library build (`build.lib`): the directory its entry is in, which its output mirrors.
+    let library;
+    // What a library build writes: the file under the output directory, and its CSS.
+    const emitted = new Map();
+    // A module id is a file path, or, for modules a plugin imports by URL (`/src/routes/…`),
+    // a path from the project root.
+    const fileOf = (id) => (existsSync(id) ? id : join(root, id));
+    // 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 resolved = await ctx.resolve?.(ref.source, importer);
+        if (!resolved)
+            return null;
+        const file = resolved.id.split('?')[0];
+        if (seen.has(file))
+            return null;
+        let code;
+        try {
+            code = readFileSync(fileOf(file), 'utf8');
+        }
+        catch {
+            return null;
+        }
+        const styles = api.styles(file);
+        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 literal = result?.styleLiterals?.find((l) => l.name === ref.name);
+        return literal ? styles.process(literal.css, file) : null;
+    };
+    const resolveAll = async (refs, importer, ctx, seen) => {
+        const imported = new Map();
+        for (const ref of refs) {
+            const nodes = await resolveReference(ref, importer, ctx, seen);
+            if (nodes)
+                imported.set(`${ref.source}#${ref.name}`, nodes);
+        }
+        return imported;
+    };
+    const run = async (code, id, ctx) => {
+        // One name per file, whatever id it was reached by (`/src/…` from a plugin, an absolute
+        // path from `load`): the scope id is derived from it, and the elements and the CSS have to
+        // agree on it.
+        const file = fileOf(id);
+        const styles = api.styles(file);
+        let result = compile(code, file, styles);
+        if (result?.styleReferences?.length) {
+            const imported = await resolveAll(result.styleReferences, id, ctx, new Set([file]));
+            result = compile(code, file, { ...styles, imported });
+        }
+        const css = (result?.styles ?? []).map((s) => s.css);
+        const maps = (result?.styles ?? []).map((s) => s.map ?? null);
+        const literals = new Map((result?.styleLiterals ?? []).map((l) => [l.name, l.css]));
+        const before = cache.get(file);
+        cache.set(file, { source: code, css, maps, literals });
+        // A block whose CSS changed (its own edit, or a value it composes from another module) is
+        // reloaded: its module id did not change, so nothing else would tell Vite.
+        if (server && before) {
+            for (let i = 0; i < css.length; i++) {
+                if (before.css[i] === css[i])
+                    continue;
+                const mod = server.moduleGraph.getModuleById(styleId(id, i));
+                if (mod)
+                    void server.reloadModule(mod);
+            }
+        }
+        // Page stylesheets are imported for their effect; a shadow element's blocks already reach
+        // its class through the `?inline` imports the compiler wrote.
+        const page = (result?.styles ?? []).flatMap((s, i) => (s.shadow ? [] : [i]));
+        if (!result || page.length === 0)
+            return result;
+        if (library) {
+            // A package ships a module's CSS as one file next to it, its blocks in source order,
+            // imported relatively: any bundler that takes a `.css` import takes it, and nothing in
+            // it needs this plugin. The `.css.js` beside it is for a page with no bundler: an import
+            // map points the stylesheet's url at it, and it adds the sheet as a <link>.
+            const name = `${basename(file, extname(file))}.css`;
+            if (existsSync(join(dirname(file), name))) {
+                throw new Error(`[fluixi] ${file} has <style> blocks, and ${name} next to it would be overwritten by their CSS. Rename one of them.`);
+            }
+            const out = join(relative(library, dirname(file)), name);
+            emitted.set(out, page.map((i) => css[i]).join('\n'));
+            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('');
+        return { ...result, code: result.code + imports };
+    };
+    return {
+        /** Looks for @fluixi-css/vite among the plugins; without it component styles stay off. */
+        connect(plugins, projectRoot) {
+            if (projectRoot)
+                root = projectRoot;
+            api = (plugins ?? [])
+                .map((p) => p?.api?.fluixiCss)
+                .find((a) => Boolean(a));
+            api?.useComponentStyles();
+        },
+        /** Turns on library output, from the directory of a `build.lib` entry. */
+        setLibrary(entryDir) {
+            library = entryDir;
+        },
+        /** A library build's style import: left for the package's consumer to bundle. */
+        isLibraryImport(id, importer) {
+            if (library === undefined || !importer || !id.startsWith('./') || !id.endsWith('.css'))
+                return false;
+            return emitted.has(join(relative(library, dirname(fileOf(importer))), id));
+        },
+        /** The style files a library build writes, by path under the output directory. */
+        libraryFiles() {
+            return emitted;
+        },
+        get active() {
+            return api !== undefined;
+        },
+        setServer(dev) {
+            server = dev;
+        },
+        isStyle(id) {
+            return STYLE_ID.test(id) || LITERAL_ID.test(id);
+        },
+        /**
+         * A style request as the module id Vite should keep: the file's absolute path and the
+         * query. Vite invalidates a module when the file its id names changes, so a root-relative id
+         * (`/src/card.tsx?fx-style…`, which is how a request arrives before the component's imports
+         * were analysed) was never invalidated, and an edited block kept its old CSS until restart.
+         */
+        resolveId(id) {
+            const at = id.indexOf('?');
+            return fileOf(id.slice(0, at)) + id.slice(at);
+        },
+        compile: run,
+        /**
+         * A block's CSS and its map back to the module, compiling the module again when the cache
+         * does not match the file.
+         */
+        async load(id, ctx) {
+            const match = STYLE_ID.exec(id);
+            const literal = LITERAL_ID.exec(id);
+            if ((!match && !literal) || !api)
+                return null;
+            const file = id.slice(0, id.indexOf('?'));
+            let source;
+            try {
+                source = readFileSync(fileOf(file), 'utf8');
+            }
+            catch {
+                return null;
+            }
+            if (cache.get(fileOf(file))?.source !== source)
+                await run(source, file, ctx);
+            const entry = cache.get(fileOf(file));
+            if (literal) {
+                const css = entry?.literals.get(literal[1]);
+                if (css === 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 };
+            }
+            const index = Number(match[1]);
+            return { code: entry?.css[index] ?? '', map: entry?.maps[index] ?? null };
+        },
+    };
+}

package/dist/vite-styles.mjs

@@ -0,0 +1,159 @@
+// 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`;
+var loader = (name) => `const href = new URL(${JSON.stringify(`./${name}`)}, import.meta.url).href;
+if (typeof document !== 'undefined' && !document.querySelector(\`link[data-fx-css="\${href}"]\`)) {
+  const link = document.createElement('link');
+  link.rel = 'stylesheet';
+  link.href = href;
+  link.dataset.fxCss = href;
+  document.head.appendChild(link);
+}
+`;
+function createComponentStyles(compile) {
+  let api;
+  let server;
+  let root = process.cwd();
+  let library;
+  const emitted = /* @__PURE__ */ new Map();
+  const fileOf = (id) => existsSync(id) ? id : join(root, id);
+  const cache = /* @__PURE__ */ new Map();
+  const resolveReference = async (ref, importer, ctx, seen) => {
+    const resolved = await ctx.resolve?.(ref.source, importer);
+    if (!resolved) return null;
+    const file = resolved.id.split("?")[0];
+    if (seen.has(file)) return null;
+    let code;
+    try {
+      code = readFileSync(fileOf(file), "utf8");
+    } catch {
+      return null;
+    }
+    const styles = api.styles(file);
+    let result = compile(code, file, styles);
+    if (result?.styleReferences?.length) {
+      const imported = await resolveAll(result.styleReferences, file, ctx, /* @__PURE__ */ new Set([...seen, file]));
+      result = compile(code, file, { ...styles, imported });
+    }
+    const literal = result?.styleLiterals?.find((l) => l.name === ref.name);
+    return literal ? styles.process(literal.css, file) : null;
+  };
+  const resolveAll = async (refs, importer, ctx, seen) => {
+    const imported = /* @__PURE__ */ new Map();
+    for (const ref of refs) {
+      const nodes = await resolveReference(ref, importer, ctx, seen);
+      if (nodes) imported.set(`${ref.source}#${ref.name}`, nodes);
+    }
+    return imported;
+  };
+  const run = async (code, id, ctx) => {
+    const file = fileOf(id);
+    const styles = api.styles(file);
+    let result = compile(code, file, styles);
+    if (result?.styleReferences?.length) {
+      const imported = await resolveAll(result.styleReferences, id, ctx, /* @__PURE__ */ new Set([file]));
+      result = compile(code, file, { ...styles, imported });
+    }
+    const css = (result?.styles ?? []).map((s) => s.css);
+    const maps = (result?.styles ?? []).map((s) => s.map ?? null);
+    const literals = new Map((result?.styleLiterals ?? []).map((l) => [l.name, l.css]));
+    const before = cache.get(file);
+    cache.set(file, { source: code, css, maps, literals });
+    if (server && before) {
+      for (let i = 0; i < css.length; i++) {
+        if (before.css[i] === css[i]) continue;
+        const mod = server.moduleGraph.getModuleById(styleId(id, i));
+        if (mod) void server.reloadModule(mod);
+      }
+    }
+    const page = (result?.styles ?? []).flatMap((s, i) => s.shadow ? [] : [i]);
+    if (!result || page.length === 0) return result;
+    if (library) {
+      const name = `${basename(file, extname(file))}.css`;
+      if (existsSync(join(dirname(file), name))) {
+        throw new Error(`[fluixi] ${file} has <style> blocks, and ${name} next to it would be overwritten by their CSS. Rename one of them.`);
+      }
+      const out = join(relative(library, dirname(file)), name);
+      emitted.set(out, page.map((i) => css[i]).join("\n"));
+      emitted.set(`${out}.js`, loader(name));
+      return { ...result, code: `${result.code}
+import ${JSON.stringify(`./${name}`)};` };
+    }
+    const imports = page.map((i) => `
+import ${JSON.stringify(styleId(id, i))};`).join("");
+    return { ...result, code: result.code + imports };
+  };
+  return {
+    /** Looks for @fluixi-css/vite among the plugins; without it component styles stay off. */
+    connect(plugins, projectRoot) {
+      if (projectRoot) root = projectRoot;
+      api = (plugins ?? []).map((p) => p?.api?.fluixiCss).find((a) => Boolean(a));
+      api?.useComponentStyles();
+    },
+    /** Turns on library output, from the directory of a `build.lib` entry. */
+    setLibrary(entryDir) {
+      library = entryDir;
+    },
+    /** A library build's style import: left for the package's consumer to bundle. */
+    isLibraryImport(id, importer) {
+      if (library === void 0 || !importer || !id.startsWith("./") || !id.endsWith(".css")) return false;
+      return emitted.has(join(relative(library, dirname(fileOf(importer))), id));
+    },
+    /** The style files a library build writes, by path under the output directory. */
+    libraryFiles() {
+      return emitted;
+    },
+    get active() {
+      return api !== void 0;
+    },
+    setServer(dev) {
+      server = dev;
+    },
+    isStyle(id) {
+      return STYLE_ID.test(id) || LITERAL_ID.test(id);
+    },
+    /**
+     * A style request as the module id Vite should keep: the file's absolute path and the
+     * query. Vite invalidates a module when the file its id names changes, so a root-relative id
+     * (`/src/card.tsx?fx-style…`, which is how a request arrives before the component's imports
+     * were analysed) was never invalidated, and an edited block kept its old CSS until restart.
+     */
+    resolveId(id) {
+      const at = id.indexOf("?");
+      return fileOf(id.slice(0, at)) + id.slice(at);
+    },
+    compile: run,
+    /**
+     * A block's CSS and its map back to the module, compiling the module again when the cache
+     * does not match the file.
+     */
+    async load(id, ctx) {
+      const match = STYLE_ID.exec(id);
+      const literal = LITERAL_ID.exec(id);
+      if (!match && !literal || !api) return null;
+      const file = id.slice(0, id.indexOf("?"));
+      let source;
+      try {
+        source = readFileSync(fileOf(file), "utf8");
+      } catch {
+        return null;
+      }
+      if (cache.get(fileOf(file))?.source !== source) await run(source, file, ctx);
+      const entry = cache.get(fileOf(file));
+      if (literal) {
+        const css = entry?.literals.get(literal[1]);
+        if (css === void 0) throw new Error(`[fluixi] ${literal[1]} in ${file} is not a css\`\` value, so it cannot be a shadow root's styles.`);
+        return { code: css, map: null };
+      }
+      const index = Number(match[1]);
+      return { code: entry?.css[index] ?? "", map: entry?.maps[index] ?? null };
+    }
+  };
+}
+export {
+  createComponentStyles,
+  styleId
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluixi/compiler",
-  "version": "1.0.0-alpha.93",
+  "version": "1.0.0-alpha.94",
   "license": "MIT",
   "author": "Ibrahima Touré",
   "repository": {
@@ -90,6 +90,7 @@
   },
   "dependencies": {
     "@babel/parser": "^7.28.5",
+    "@jridgewell/sourcemap-codec": "^1.5.5",
     "magic-string": "^0.30.21",
     "@fluixi/template-parser": "0.1.0-alpha.4"
   },
@@ -108,8 +109,8 @@
     "inquirer": "^14.0.2",
     "jsdom": "^25.0.0",
     "vitest": "^1.6.1",
-    "@fluixi/dom": "1.0.0-alpha.93",
-    "@fluixi/reactive": "1.0.0-alpha.93"
+    "@fluixi/dom": "1.0.0-alpha.94",
+    "@fluixi/reactive": "1.0.0-alpha.94"
   },
   "peerDependencies": {
     "@babel/core": "^7.28.5",