@unocss/vite 66.1.0-beta.1 → 66.1.0-beta.11

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import process$1 from 'node:process';
 import { createRecoveryConfigLoader } from '@unocss/config';
-import { cssIdRE, createGenerator, BetterMap, toEscapedSelector, LAYER_IMPORTS, LAYER_PREFLIGHTS, notNull } from '@unocss/core';
+import { cssIdRE, createGenerator, BetterMap, toEscapedSelector, LAYER_PREFLIGHTS, LAYER_IMPORTS, notNull } from '@unocss/core';
 import { createFilter } from 'unplugin-utils';
 import UnocssInspector from '@unocss/inspector';
 import fs from 'node:fs';
@@ -10,6 +10,7 @@ import fs$1 from 'node:fs/promises';
 import { glob } from 'tinyglobby';
 import remapping from '@ampproject/remapping';
 import MagicString from 'magic-string';
+import { resolve as resolve$1 } from 'pathe';
 import { createHash } from 'node:crypto';
 import { Buffer } from 'node:buffer';
 
@@ -19,6 +20,12 @@ const CSS_PLACEHOLDER = "@unocss-placeholder";
 const SKIP_START_COMMENT = "@unocss-skip-start";
 const SKIP_END_COMMENT = "@unocss-skip-end";
 const SKIP_COMMENT_RE = new RegExp(`(//\\s*?${SKIP_START_COMMENT}\\s*?|\\/\\*\\s*?${SKIP_START_COMMENT}\\s*?\\*\\/|<!--\\s*?${SKIP_START_COMMENT}\\s*?-->)[\\s\\S]*?(//\\s*?${SKIP_END_COMMENT}\\s*?|\\/\\*\\s*?${SKIP_END_COMMENT}\\s*?\\*\\/|<!--\\s*?${SKIP_END_COMMENT}\\s*?-->)`, "g");
+const VIRTUAL_ENTRY_ALIAS = [
+  /^(?:virtual:)?uno(?::(.+))?\.css(\?.*)?$/
+];
+const LAYER_MARK_ALL = "__ALL__";
+const RESOLVED_ID_WITH_QUERY_RE = /[/\\]__uno(_.*?)?\.css(\?.*)?$/;
+const RESOLVED_ID_RE = /[/\\]__uno(?:_(.*?))?\.css$/;
 
 const defaultPipelineExclude = [cssIdRE];
 const defaultPipelineInclude = [/\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html)($|\?)/];
@@ -383,28 +390,6 @@ function restoreSkipCode(code, map) {
     code = code.replaceAll(withHashKey, matched);
   return code;
 }
-function replaceAsync(string, searchValue, replacer) {
-  try {
-    if (typeof replacer === "function") {
-      const values = [];
-      String.prototype.replace.call(string, searchValue, (...args) => {
-        values.push(replacer(...args));
-        return "";
-      });
-      return Promise.all(values).then((resolvedValues) => {
-        return String.prototype.replace.call(string, searchValue, () => {
-          return resolvedValues.shift() || "";
-        });
-      });
-    } else {
-      return Promise.resolve(
-        String.prototype.replace.call(string, searchValue, replacer)
-      );
-    }
-  } catch (error) {
-    return Promise.reject(error);
-  }
-}
 
 async function applyTransformers(ctx, original, id, enforce = "default") {
   if (original.includes(IGNORE_COMMENT))
@@ -487,23 +472,18 @@ async function setupContentExtractor(ctx, shouldWatch = false) {
   }
 }
 
-function getHash(input, length = 8) {
-  return createHash("sha256").update(input).digest("hex").slice(0, length);
-}
-
-const VIRTUAL_ENTRY_ALIAS = [
-  /^(?:virtual:)?uno(?::(.+))?\.css(\?.*)?$/
-];
-const LAYER_MARK_ALL = "__ALL__";
-const RESOLVED_ID_WITH_QUERY_RE = /[/\\]__uno(_.*?)?\.css(\?.*)?$/;
-const RESOLVED_ID_RE = /[/\\]__uno(?:_(.*?))?\.css$/;
-function resolveId(id) {
+function resolveId(id, importer) {
   if (id.match(RESOLVED_ID_WITH_QUERY_RE))
     return id;
   for (const alias of VIRTUAL_ENTRY_ALIAS) {
     const match = id.match(alias);
     if (match) {
-      return match[1] ? `/__uno_${match[1]}.css` : "/__uno.css";
+      let virtual = match[1] ? `__uno_${match[1]}.css` : "__uno.css";
+      if (importer)
+        virtual = resolve$1(importer, "..", virtual);
+      else
+        virtual = `/${virtual}`;
+      return virtual;
     }
   }
 }
@@ -512,24 +492,16 @@ function resolveLayer(id) {
   if (match)
     return match[1] || LAYER_MARK_ALL;
 }
-const LAYER_PLACEHOLDER_RE = /#--unocss--\s*\{\s*layer\s*:\s*(.+?)\s*(?:;\s*escape-view\s*:\s*(.+?)\s*)?;?\s*\}/g;
 function getLayerPlaceholder(layer) {
   return `#--unocss--{layer:${layer};escape-view:\\"\\'\\\`\\\\}`;
 }
-const HASH_PLACEHOLDER_RE = /#--unocss-hash--\s*\{\s*content\s*:\s*\\*"([^\\"]+)\\*";?\s*\}/g;
-function getHashPlaceholder(hash) {
-  return `#--unocss-hash--{content:"${hash}"}`;
-}
 
 const MESSAGE_UNOCSS_ENTRY_NOT_FOUND = "[unocss] Entry module not found. Did you add `import 'uno.css'` in your main entry?";
 
-function isLegacyChunk(chunk, options) {
-  return options.format === "system" && chunk.fileName.includes("-legacy");
-}
 function GlobalModeBuildPlugin(ctx) {
   const { ready, extract, tokens, filter, getConfig, tasks, flushTasks } = ctx;
-  const vfsLayers = /* @__PURE__ */ new Set();
-  const layerImporterMap = /* @__PURE__ */ new Map();
+  const vfsLayers = /* @__PURE__ */ new Map();
+  const resolveContexts = /* @__PURE__ */ new Map();
   let viteConfig;
   const cssPostPlugins = /* @__PURE__ */ new Map();
   const cssPlugins = /* @__PURE__ */ new Map();
@@ -559,7 +531,7 @@ function GlobalModeBuildPlugin(ctx) {
     lastTokenSize = tokens.size;
     return lastResult;
   }
-  let replaced = false;
+  const cssContentCache = /* @__PURE__ */ new Map();
   return [
     {
       name: "unocss:global:build:scan",
@@ -567,6 +539,7 @@ function GlobalModeBuildPlugin(ctx) {
       enforce: "pre",
       async buildStart() {
         vfsLayers.clear();
+        cssContentCache.clear();
         tasks.length = 0;
         lastTokenSize = 0;
         lastResult = void 0;
@@ -588,13 +561,16 @@ function GlobalModeBuildPlugin(ctx) {
         }
       },
       resolveId(id, importer) {
-        const entry = resolveId(id);
+        const entry = resolveId(id, importer);
         if (entry) {
           const layer = resolveLayer(entry);
           if (layer) {
-            vfsLayers.add(layer);
-            if (importer)
-              layerImporterMap.set(importer, entry);
+            if (vfsLayers.has(layer)) {
+              this.warn(`[unocss] ${JSON.stringify(id)} is being imported multiple times in different files, using the first occurrence: ${JSON.stringify(vfsLayers.get(layer))}`);
+              return vfsLayers.get(layer);
+            }
+            vfsLayers.set(layer, entry);
+            resolveContexts.set(layer, this);
           }
           return entry;
         }
@@ -602,17 +578,14 @@ function GlobalModeBuildPlugin(ctx) {
       load(id) {
         const layer = resolveLayer(getPath(id));
         if (layer) {
-          vfsLayers.add(layer);
-          return getLayerPlaceholder(layer);
-        }
-      },
-      moduleParsed({ id, importedIds }) {
-        if (!layerImporterMap.has(id))
-          return;
-        const layerKey = layerImporterMap.get(id);
-        if (!importedIds.includes(layerKey)) {
-          layerImporterMap.delete(id);
-          vfsLayers.delete(resolveLayer(layerKey));
+          if (!vfsLayers.has(layer)) {
+            this.error(`[unocss] layer ${JSON.stringify(id)} is imported but not being resolved before, it might be an internal bug of UnoCSS`);
+          }
+          return {
+            code: getLayerPlaceholder(layer),
+            map: null,
+            moduleSideEffects: true
+          };
         }
       },
       async configResolved(config) {
@@ -635,38 +608,6 @@ function GlobalModeBuildPlugin(ctx) {
         if (cssPlugin)
           distDirs.forEach((dir) => cssPlugins.set(dir, cssPlugin));
         await ready;
-      },
-      // we inject a hash to chunk before the dist hash calculation to make sure
-      // the hash is different when unocss changes
-      async renderChunk(_, chunk, options) {
-        const isLegacy = isLegacyChunk(chunk, options);
-        if (isLegacy && (!ctx.uno.config.legacy || ctx.uno.config.legacy.renderModernChunks))
-          return null;
-        if (!Object.keys(chunk.modules).some((i) => RESOLVED_ID_RE.test(i)))
-          return null;
-        const cssPost = cssPostPlugins.get(options.dir);
-        if (!cssPost) {
-          this.warn("[unocss] failed to find vite:css-post plugin. It might be an internal bug of UnoCSS");
-          return null;
-        }
-        let { css } = await generateAll();
-        const fakeCssId = `${viteConfig.root}/${chunk.fileName}-unocss-hash.css`;
-        css = await applyCssTransform(css, fakeCssId, options.dir, this);
-        const transformHandler = "handler" in cssPost.transform ? cssPost.transform.handler : cssPost.transform;
-        if (isLegacy) {
-          await transformHandler.call({}, css, "/__uno.css");
-        } else {
-          const hash = getHash(css);
-          await transformHandler.call({}, getHashPlaceholder(hash), fakeCssId);
-        }
-        chunk.modules[fakeCssId] = {
-          code: null,
-          originalLength: 0,
-          removedExports: [],
-          renderedExports: [],
-          renderedLength: 0
-        };
-        return null;
       }
     },
     {
@@ -683,17 +624,16 @@ function GlobalModeBuildPlugin(ctx) {
       name: "unocss:global:build:generate",
       apply: "build",
       async renderChunk(code, chunk, options) {
-        if (isLegacyChunk(chunk, options))
-          return null;
-        if (!Object.keys(chunk.modules).some((i) => RESOLVED_ID_RE.test(i)))
+        const entryModules = Object.keys(chunk.modules).filter((id) => RESOLVED_ID_RE.test(id));
+        if (!entryModules.length)
           return null;
         const cssPost = cssPostPlugins.get(options.dir);
         if (!cssPost) {
           this.warn("[unocss] failed to find vite:css-post plugin. It might be an internal bug of UnoCSS");
           return null;
         }
+        const cssPostTransformHandler = "handler" in cssPost.transform ? cssPost.transform.handler : cssPost.transform;
         const result = await generateAll();
-        const importsLayer = result.getLayer(LAYER_IMPORTS) ?? "";
         const fakeCssId = `${viteConfig.root}/${chunk.fileName}-unocss-hash.css`;
         const preflightLayers = ctx.uno.config.preflights?.map((i) => i.layer).concat(LAYER_PREFLIGHTS).filter(Boolean);
         await Promise.all(preflightLayers.map((i) => result.setLayer(i, async (layerContent) => {
@@ -702,85 +642,35 @@ function GlobalModeBuildPlugin(ctx) {
           const postTransform = await applyTransformers(ctx, defaultTransform?.code || preTransform?.code || layerContent, fakeCssId, "post");
           return postTransform?.code || defaultTransform?.code || preTransform?.code || layerContent;
         })));
-        const cssWithLayers = await Promise.all(Array.from(vfsLayers).map(async (layer) => {
-          const layerStart = `#--unocss-layer-start--${layer}--{start:${layer}}`;
-          const layerEnd = `#--unocss-layer-end--${layer}--{end:${layer}}`;
-          let layerContent;
-          if (layer === LAYER_MARK_ALL) {
-            layerContent = result.getLayers(void 0, [...vfsLayers, LAYER_IMPORTS]);
-          } else {
-            layerContent = result.getLayer(layer) || "";
-          }
-          return `${importsLayer}${layerStart} ${layerContent} ${layerEnd}`;
-        }));
-        const css = await applyCssTransform(cssWithLayers.join(""), fakeCssId, options.dir, this);
-        const transformHandler = "handler" in cssPost.transform ? cssPost.transform.handler : cssPost.transform;
-        await transformHandler.call({}, css, fakeCssId);
-      }
-    },
-    {
-      name: "unocss:global:build:bundle",
-      apply: "build",
-      enforce: "post",
-      // rewrite the css placeholders
-      async generateBundle(options, bundle) {
-        const checkJs = ["umd", "amd", "iife"].includes(options.format);
-        const files = Object.keys(bundle).filter((i) => i.endsWith(".css") || checkJs && i.endsWith(".js"));
-        if (!files.length)
-          return;
+        for (const mod of entryModules) {
+          const layer = RESOLVED_ID_RE.exec(mod)?.[1] || LAYER_MARK_ALL;
+          const layerContent = layer === LAYER_MARK_ALL ? result.getLayers(void 0, [LAYER_IMPORTS, ...vfsLayers.keys()]) : result.getLayer(layer) || "";
+          const css = await applyCssTransform(
+            layerContent,
+            mod,
+            options.dir,
+            // .emitFile in Rollup has different FileEmitter instance in load/transform hooks and renderChunk hooks
+            // here we need to store the resolveId context to use it in the vite:css transform hook
+            resolveContexts.get(layer) || this
+          );
+          await cssPostTransformHandler.call({}, css, mod);
+        }
+      },
+      async buildEnd() {
         if (!vfsLayers.size) {
-          if (replaced)
-            return;
           if ((await getConfig()).checkImport) {
             this.warn(MESSAGE_UNOCSS_ENTRY_NOT_FOUND);
           }
-          return;
-        }
-        const getLayer = (layer, input, replace = false) => {
-          const re = new RegExp(`#--unocss-layer-start--${layer}--\\{start:${layer}\\}([\\s\\S]*?)#--unocss-layer-end--${layer}--\\{end:${layer}\\}`, "g");
-          if (replace)
-            return input.replace(re, "");
-          const match = re.exec(input);
-          if (match)
-            return match[1];
-          return "";
-        };
-        for (const file of files) {
-          const chunk = bundle[file];
-          if (chunk.type === "asset" && typeof chunk.source === "string") {
-            const css = chunk.source.replace(HASH_PLACEHOLDER_RE, "");
-            chunk.source = await replaceAsync(css, LAYER_PLACEHOLDER_RE, async (_, layer) => {
-              replaced = true;
-              return getLayer(layer.trim(), css);
-            });
-            Array.from(vfsLayers).forEach((layer) => {
-              chunk.source = getLayer(layer, chunk.source, true);
-            });
-          } else if (chunk.type === "chunk" && typeof chunk.code === "string") {
-            const js = chunk.code.replace(HASH_PLACEHOLDER_RE, "");
-            chunk.code = await replaceAsync(js, LAYER_PLACEHOLDER_RE, async (_, layer) => {
-              replaced = true;
-              const css = getLayer(layer.trim(), js);
-              return css.replace(/\n/g, "").replace(/(?<!\\)(['"])/g, "\\$1");
-            });
-            Array.from(vfsLayers).forEach((layer) => {
-              chunk.code = getLayer(layer, chunk.code, true);
-            });
-          }
-        }
-        if (!replaced) {
-          let msg = "[unocss] does not found CSS placeholder in the generated chunks";
-          if (viteConfig.build.lib && checkJs)
-            msg += "\nIt seems you are building in library mode, it's recommended to set `build.cssCodeSplit` to true.\nSee https://github.com/vitejs/vite/issues/1579";
-          else
-            msg += "\nThis is likely an internal bug of unocss vite plugin";
-          this.warn(msg);
         }
       }
     }
   ];
 }
 
+function getHash(input, length = 8) {
+  return createHash("sha256").update(input).digest("hex").slice(0, length);
+}
+
 const WARN_TIMEOUT = 2e4;
 const WS_EVENT_PREFIX = "unocss:hmr";
 const HASH_LENGTH = 6;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@unocss/vite",
   "type": "module",
-  "version": "66.1.0-beta.1",
+  "version": "66.1.0-beta.11",
   "description": "The Vite plugin for UnoCSS",
   "author": "Anthony Fu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -52,14 +52,15 @@
     "@ampproject/remapping": "^2.3.0",
     "chokidar": "^3.6.0",
     "magic-string": "^0.30.17",
-    "tinyglobby": "^0.2.10",
+    "pathe": "^2.0.3",
+    "tinyglobby": "^0.2.12",
     "unplugin-utils": "^0.2.4",
-    "@unocss/config": "66.1.0-beta.1",
-    "@unocss/core": "66.1.0-beta.1",
-    "@unocss/inspector": "66.1.0-beta.1"
+    "@unocss/config": "66.1.0-beta.11",
+    "@unocss/core": "66.1.0-beta.11",
+    "@unocss/inspector": "66.1.0-beta.11"
   },
   "devDependencies": {
-    "vite": "^6.1.0"
+    "vite": "^6.2.6"
   },
   "scripts": {
     "build": "unbuild",