@unocss/vite 0.47.6 → 0.48.0

package/dist/index.cjs

@@ -9,16 +9,20 @@ const config = require('@unocss/config');
 const crypto = require('crypto');
 const MagicString = require('magic-string');
 const path = require('path');
+const fs = require('fs/promises');
+const fg = require('fast-glob');
 const remapping = require('@ampproject/remapping');
-const fs = require('fs');
+const fs$1 = require('fs');
 const url = require('url');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e["default"] : e; }
 
 const UnocssInspector__default = /*#__PURE__*/_interopDefaultLegacy(UnocssInspector);
 const MagicString__default = /*#__PURE__*/_interopDefaultLegacy(MagicString);
-const remapping__default = /*#__PURE__*/_interopDefaultLegacy(remapping);
 const fs__default = /*#__PURE__*/_interopDefaultLegacy(fs);
+const fg__default = /*#__PURE__*/_interopDefaultLegacy(fg);
+const remapping__default = /*#__PURE__*/_interopDefaultLegacy(remapping);
+const fs__default$1 = /*#__PURE__*/_interopDefaultLegacy(fs$1);
 
 const defaultExclude = [core.cssIdRE];
 const defaultInclude = [/\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html)($|\?)/];
@@ -68,6 +72,7 @@ function createContext(configOrPath, defaults = {}, extraConfigSources = [], res
   const reloadListeners = [];
   const modules = new core.BetterMap();
   const tokens = /* @__PURE__ */ new Set();
+  const tasks = [];
   const affectedModules = /* @__PURE__ */ new Set();
   let ready = reloadConfig();
   async function reloadConfig() {
@@ -117,15 +122,20 @@ function createContext(configOrPath, defaults = {}, extraConfigSources = [], res
     if (tokens.size > len)
       invalidate();
   }
-  const filter = (code, id) => {
+  function filter(code, id) {
     if (code.includes(IGNORE_COMMENT))
       return false;
     return code.includes(INCLUDE_COMMENT) || code.includes(CSS_PLACEHOLDER) || rollupFilter(id.replace(/\?v=\w+$/, ""));
-  };
+  }
   async function getConfig() {
     await ready;
     return rawConfig;
   }
+  async function flushTasks() {
+    const _tasks = [...tasks];
+    await Promise.all(_tasks);
+    tasks.splice(0, _tasks.length);
+  }
   return {
     get ready() {
       return ready;
@@ -133,6 +143,8 @@ function createContext(configOrPath, defaults = {}, extraConfigSources = [], res
     tokens,
     modules,
     affectedModules,
+    tasks,
+    flushTasks,
     invalidate,
     onInvalidate(fn) {
       invalidations.push(fn);
@@ -224,20 +236,93 @@ function ChunkModeBuildPlugin({ uno, filter }) {
   };
 }
 
-function GlobalModeBuildPlugin({ uno, ready, extract, tokens, filter, getConfig }) {
+async function applyTransformers(ctx, original, id, enforce = "default") {
+  if (original.includes(IGNORE_COMMENT))
+    return;
+  const transformers = (ctx.uno.config.transformers || []).filter((i) => (i.enforce || "default") === enforce);
+  if (!transformers.length)
+    return;
+  let code = original;
+  let s = new MagicString__default(code);
+  const maps = [];
+  for (const t of transformers) {
+    if (t.idFilter) {
+      if (!t.idFilter(id))
+        continue;
+    } else if (!ctx.filter(code, id)) {
+      continue;
+    }
+    await t.transform(s, id, ctx);
+    if (s.hasChanged()) {
+      code = s.toString();
+      maps.push(s.generateMap({ hires: true, source: id }));
+      s = new MagicString__default(code);
+    }
+  }
+  if (code !== original) {
+    ctx.affectedModules.add(id);
+    return {
+      code,
+      map: remapping__default(maps, () => null)
+    };
+  }
+}
+
+async function setupExtraContent(ctx, shouldWatch = false) {
+  const { extraContent } = await ctx.getConfig();
+  const { extract, tasks, root, filter } = ctx;
+  if (extraContent?.plain) {
+    await Promise.all(
+      extraContent.plain.map((code, idx) => {
+        return extract(code, `__extra_content_${idx}__`);
+      })
+    );
+  }
+  if (extraContent?.filesystem) {
+    const files = await fg__default(extraContent.filesystem, { cwd: root });
+    async function extractFile(file) {
+      const code = await fs__default.readFile(file, "utf-8");
+      if (!filter(code, file))
+        return;
+      const preTransform = await applyTransformers(ctx, code, file, "pre");
+      const defaultTransform = await applyTransformers(ctx, preTransform?.code || code, file);
+      await applyTransformers(ctx, defaultTransform?.code || preTransform?.code || code, file, "post");
+      return await extract(preTransform?.code || code, file);
+    }
+    if (shouldWatch) {
+      const { watch } = await import('chokidar');
+      const ignored = ["**/{.git,node_modules}/**"];
+      const watcher = watch(files, {
+        ignorePermissionErrors: true,
+        ignored,
+        cwd: root,
+        ignoreInitial: true
+      });
+      watcher.on("all", (type, file) => {
+        if (type === "add" || type === "change") {
+          const absolutePath = path.resolve(root, file);
+          tasks.push(extractFile(absolutePath));
+        }
+      });
+    }
+    await Promise.all(files.map(extractFile));
+  }
+}
+
+function GlobalModeBuildPlugin(ctx) {
+  const { uno, ready, extract, tokens, filter, getConfig, tasks, flushTasks } = ctx;
   const vfsLayers = /* @__PURE__ */ new Set();
   const layerImporterMap = /* @__PURE__ */ new Map();
-  let tasks = [];
   let viteConfig;
   const cssPostPlugins = /* @__PURE__ */ new Map();
   const cssPlugins = /* @__PURE__ */ new Map();
-  async function applyCssTransform(css, id, dir, ctx) {
+  async function applyCssTransform(css, id, dir, ctx2) {
     const {
       postcss = true
     } = await getConfig();
     if (!cssPlugins.get(dir) || !postcss)
       return css;
-    const result = await cssPlugins.get(dir).transform.call(ctx, css, id);
+    const result = await cssPlugins.get(dir).transform.call(ctx2, css, id);
     if (!result)
       return css;
     if (typeof result === "string")
@@ -250,20 +335,22 @@ function GlobalModeBuildPlugin({ uno, ready, extract, tokens, filter, getConfig
   let lastTokenSize = 0;
   let lastResult;
   async function generateAll() {
-    await Promise.all(tasks);
+    await flushTasks();
     if (lastResult && lastTokenSize === tokens.size)
       return lastResult;
     lastResult = await uno.generate(tokens, { minify: true });
     lastTokenSize = tokens.size;
     return lastResult;
   }
+  let replaced = false;
   return [
     {
       name: "unocss:global:build:scan",
       apply: "build",
       enforce: "pre",
-      buildStart() {
-        tasks = [];
+      async buildStart() {
+        vfsLayers.clear();
+        tasks.length = 0;
         lastTokenSize = 0;
         lastResult = void 0;
       },
@@ -334,6 +421,16 @@ function GlobalModeBuildPlugin({ uno, ready, extract, tokens, filter, getConfig
         return null;
       }
     },
+    {
+      name: "unocss:global:content",
+      enforce: "pre",
+      configResolved(config) {
+        viteConfig = config;
+      },
+      buildStart() {
+        tasks.push(setupExtraContent(ctx, viteConfig.command === "serve"));
+      }
+    },
     {
       name: "unocss:global:build:generate",
       apply: "build",
@@ -358,9 +455,6 @@ function GlobalModeBuildPlugin({ uno, ready, extract, tokens, filter, getConfig
     {
       name: "unocss:global:build:bundle",
       apply: "build",
-      configResolved(config) {
-        viteConfig = config;
-      },
       enforce: "post",
       async generateBundle(options, bundle) {
         const checkJs = ["umd", "amd", "iife"].includes(options.format);
@@ -368,11 +462,12 @@ function GlobalModeBuildPlugin({ uno, ready, extract, tokens, filter, getConfig
         if (!files.length)
           return;
         if (!vfsLayers.size) {
+          if (replaced)
+            return;
           const msg = "[unocss] entry module not found, have you add `import 'uno.css'` in your main entry?";
           this.warn(msg);
           return;
         }
-        let replaced = false;
         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)
@@ -421,10 +516,9 @@ function GlobalModeBuildPlugin({ uno, ready, extract, tokens, filter, getConfig
 const WARN_TIMEOUT = 2e4;
 const WS_EVENT_PREFIX = "unocss:hmr";
 const HASH_LENGTH = 6;
-function GlobalModeDevPlugin({ uno, tokens, affectedModules, onInvalidate, extract, filter }) {
+function GlobalModeDevPlugin({ uno, tokens, tasks, flushTasks, affectedModules, onInvalidate, extract, filter }) {
   const servers = [];
   let base = "";
-  const tasks = [];
   const entries = /* @__PURE__ */ new Set();
   let invalidateTimer;
   const lastServedHash = /* @__PURE__ */ new Map();
@@ -432,7 +526,7 @@ function GlobalModeDevPlugin({ uno, tokens, affectedModules, onInvalidate, extra
   let resolved = false;
   let resolvedWarnTimer;
   async function generateCSS(layer) {
-    await Promise.all(tasks);
+    await flushTasks();
     let result;
     let tokensSize = tokens.size;
     do {
@@ -1013,38 +1107,6 @@ function ConfigHMRPlugin(ctx) {
   };
 }
 
-async function applyTransformers(ctx, original, id, enforce = "default") {
-  if (original.includes(IGNORE_COMMENT))
-    return;
-  const transformers = (ctx.uno.config.transformers || []).filter((i) => (i.enforce || "default") === enforce);
-  if (!transformers.length)
-    return;
-  let code = original;
-  let s = new MagicString__default(code);
-  const maps = [];
-  for (const t of transformers) {
-    if (t.idFilter) {
-      if (!t.idFilter(id))
-        continue;
-    } else if (!ctx.filter(code, id)) {
-      continue;
-    }
-    await t.transform(s, id, ctx);
-    if (s.hasChanged()) {
-      code = s.toString();
-      maps.push(s.generateMap({ hires: true, source: id }));
-      s = new MagicString__default(code);
-    }
-  }
-  if (code !== original) {
-    ctx.affectedModules.add(id);
-    return {
-      code,
-      map: remapping__default(maps, () => null)
-    };
-  }
-}
-
 function createTransformerPlugins(ctx) {
   const enforces = ["default", "pre", "post"];
   return enforces.map((enforce) => ({
@@ -1172,7 +1234,7 @@ function createDevtoolsPlugin(ctx) {
         if (id === DEVTOOLS_PATH) {
           if (!clientCode) {
             clientCode = [
-              await fs__default.promises.readFile(path.resolve(_dirname, "client.mjs"), "utf-8"),
+              await fs__default$1.promises.readFile(path.resolve(_dirname, "client.mjs"), "utf-8"),
               `import('${MOCK_CLASSES_MODULE_ID}')`,
               `import('${DEVTOOLS_CSS_PATH}')`
             ].join("\n").replace("__POST_PATH__", (config.server?.origin ?? "") + POST_PATH);

package/dist/index.d.ts

@@ -39,9 +39,9 @@ interface VitePluginConfig<Theme extends {} = {}> extends UserConfig<Theme> {
 
 declare function ChunkModeBuildPlugin({ uno, filter }: UnocssPluginContext): Plugin;
 
-declare function GlobalModeDevPlugin({ uno, tokens, affectedModules, onInvalidate, extract, filter }: UnocssPluginContext): Plugin[];
+declare function GlobalModeDevPlugin({ uno, tokens, tasks, flushTasks, affectedModules, onInvalidate, extract, filter }: UnocssPluginContext): Plugin[];
 
-declare function GlobalModeBuildPlugin({ uno, ready, extract, tokens, filter, getConfig }: UnocssPluginContext<VitePluginConfig>): Plugin[];
+declare function GlobalModeBuildPlugin(ctx: UnocssPluginContext<VitePluginConfig>): Plugin[];
 
 declare function GlobalModePlugin(ctx: UnocssPluginContext): vite.Plugin[];
 

package/dist/index.mjs

@@ -5,8 +5,10 @@ import { loadConfig } from '@unocss/config';
 import { createHash } from 'crypto';
 import MagicString from 'magic-string';
 import { resolve, dirname } from 'path';
+import fs from 'fs/promises';
+import fg from 'fast-glob';
 import remapping from '@ampproject/remapping';
-import fs from 'fs';
+import fs$1 from 'fs';
 import { fileURLToPath } from 'url';
 
 const defaultExclude = [cssIdRE];
@@ -57,6 +59,7 @@ function createContext(configOrPath, defaults = {}, extraConfigSources = [], res
   const reloadListeners = [];
   const modules = new BetterMap();
   const tokens = /* @__PURE__ */ new Set();
+  const tasks = [];
   const affectedModules = /* @__PURE__ */ new Set();
   let ready = reloadConfig();
   async function reloadConfig() {
@@ -106,15 +109,20 @@ function createContext(configOrPath, defaults = {}, extraConfigSources = [], res
     if (tokens.size > len)
       invalidate();
   }
-  const filter = (code, id) => {
+  function filter(code, id) {
     if (code.includes(IGNORE_COMMENT))
       return false;
     return code.includes(INCLUDE_COMMENT) || code.includes(CSS_PLACEHOLDER) || rollupFilter(id.replace(/\?v=\w+$/, ""));
-  };
+  }
   async function getConfig() {
     await ready;
     return rawConfig;
   }
+  async function flushTasks() {
+    const _tasks = [...tasks];
+    await Promise.all(_tasks);
+    tasks.splice(0, _tasks.length);
+  }
   return {
     get ready() {
       return ready;
@@ -122,6 +130,8 @@ function createContext(configOrPath, defaults = {}, extraConfigSources = [], res
     tokens,
     modules,
     affectedModules,
+    tasks,
+    flushTasks,
     invalidate,
     onInvalidate(fn) {
       invalidations.push(fn);
@@ -213,20 +223,93 @@ function ChunkModeBuildPlugin({ uno, filter }) {
   };
 }
 
-function GlobalModeBuildPlugin({ uno, ready, extract, tokens, filter, getConfig }) {
+async function applyTransformers(ctx, original, id, enforce = "default") {
+  if (original.includes(IGNORE_COMMENT))
+    return;
+  const transformers = (ctx.uno.config.transformers || []).filter((i) => (i.enforce || "default") === enforce);
+  if (!transformers.length)
+    return;
+  let code = original;
+  let s = new MagicString(code);
+  const maps = [];
+  for (const t of transformers) {
+    if (t.idFilter) {
+      if (!t.idFilter(id))
+        continue;
+    } else if (!ctx.filter(code, id)) {
+      continue;
+    }
+    await t.transform(s, id, ctx);
+    if (s.hasChanged()) {
+      code = s.toString();
+      maps.push(s.generateMap({ hires: true, source: id }));
+      s = new MagicString(code);
+    }
+  }
+  if (code !== original) {
+    ctx.affectedModules.add(id);
+    return {
+      code,
+      map: remapping(maps, () => null)
+    };
+  }
+}
+
+async function setupExtraContent(ctx, shouldWatch = false) {
+  const { extraContent } = await ctx.getConfig();
+  const { extract, tasks, root, filter } = ctx;
+  if (extraContent?.plain) {
+    await Promise.all(
+      extraContent.plain.map((code, idx) => {
+        return extract(code, `__extra_content_${idx}__`);
+      })
+    );
+  }
+  if (extraContent?.filesystem) {
+    const files = await fg(extraContent.filesystem, { cwd: root });
+    async function extractFile(file) {
+      const code = await fs.readFile(file, "utf-8");
+      if (!filter(code, file))
+        return;
+      const preTransform = await applyTransformers(ctx, code, file, "pre");
+      const defaultTransform = await applyTransformers(ctx, preTransform?.code || code, file);
+      await applyTransformers(ctx, defaultTransform?.code || preTransform?.code || code, file, "post");
+      return await extract(preTransform?.code || code, file);
+    }
+    if (shouldWatch) {
+      const { watch } = await import('chokidar');
+      const ignored = ["**/{.git,node_modules}/**"];
+      const watcher = watch(files, {
+        ignorePermissionErrors: true,
+        ignored,
+        cwd: root,
+        ignoreInitial: true
+      });
+      watcher.on("all", (type, file) => {
+        if (type === "add" || type === "change") {
+          const absolutePath = resolve(root, file);
+          tasks.push(extractFile(absolutePath));
+        }
+      });
+    }
+    await Promise.all(files.map(extractFile));
+  }
+}
+
+function GlobalModeBuildPlugin(ctx) {
+  const { uno, ready, extract, tokens, filter, getConfig, tasks, flushTasks } = ctx;
   const vfsLayers = /* @__PURE__ */ new Set();
   const layerImporterMap = /* @__PURE__ */ new Map();
-  let tasks = [];
   let viteConfig;
   const cssPostPlugins = /* @__PURE__ */ new Map();
   const cssPlugins = /* @__PURE__ */ new Map();
-  async function applyCssTransform(css, id, dir, ctx) {
+  async function applyCssTransform(css, id, dir, ctx2) {
     const {
       postcss = true
     } = await getConfig();
     if (!cssPlugins.get(dir) || !postcss)
       return css;
-    const result = await cssPlugins.get(dir).transform.call(ctx, css, id);
+    const result = await cssPlugins.get(dir).transform.call(ctx2, css, id);
     if (!result)
       return css;
     if (typeof result === "string")
@@ -239,20 +322,22 @@ function GlobalModeBuildPlugin({ uno, ready, extract, tokens, filter, getConfig
   let lastTokenSize = 0;
   let lastResult;
   async function generateAll() {
-    await Promise.all(tasks);
+    await flushTasks();
     if (lastResult && lastTokenSize === tokens.size)
       return lastResult;
     lastResult = await uno.generate(tokens, { minify: true });
     lastTokenSize = tokens.size;
     return lastResult;
   }
+  let replaced = false;
   return [
     {
       name: "unocss:global:build:scan",
       apply: "build",
       enforce: "pre",
-      buildStart() {
-        tasks = [];
+      async buildStart() {
+        vfsLayers.clear();
+        tasks.length = 0;
         lastTokenSize = 0;
         lastResult = void 0;
       },
@@ -323,6 +408,16 @@ function GlobalModeBuildPlugin({ uno, ready, extract, tokens, filter, getConfig
         return null;
       }
     },
+    {
+      name: "unocss:global:content",
+      enforce: "pre",
+      configResolved(config) {
+        viteConfig = config;
+      },
+      buildStart() {
+        tasks.push(setupExtraContent(ctx, viteConfig.command === "serve"));
+      }
+    },
     {
       name: "unocss:global:build:generate",
       apply: "build",
@@ -347,9 +442,6 @@ function GlobalModeBuildPlugin({ uno, ready, extract, tokens, filter, getConfig
     {
       name: "unocss:global:build:bundle",
       apply: "build",
-      configResolved(config) {
-        viteConfig = config;
-      },
       enforce: "post",
       async generateBundle(options, bundle) {
         const checkJs = ["umd", "amd", "iife"].includes(options.format);
@@ -357,11 +449,12 @@ function GlobalModeBuildPlugin({ uno, ready, extract, tokens, filter, getConfig
         if (!files.length)
           return;
         if (!vfsLayers.size) {
+          if (replaced)
+            return;
           const msg = "[unocss] entry module not found, have you add `import 'uno.css'` in your main entry?";
           this.warn(msg);
           return;
         }
-        let replaced = false;
         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)
@@ -410,10 +503,9 @@ function GlobalModeBuildPlugin({ uno, ready, extract, tokens, filter, getConfig
 const WARN_TIMEOUT = 2e4;
 const WS_EVENT_PREFIX = "unocss:hmr";
 const HASH_LENGTH = 6;
-function GlobalModeDevPlugin({ uno, tokens, affectedModules, onInvalidate, extract, filter }) {
+function GlobalModeDevPlugin({ uno, tokens, tasks, flushTasks, affectedModules, onInvalidate, extract, filter }) {
   const servers = [];
   let base = "";
-  const tasks = [];
   const entries = /* @__PURE__ */ new Set();
   let invalidateTimer;
   const lastServedHash = /* @__PURE__ */ new Map();
@@ -421,7 +513,7 @@ function GlobalModeDevPlugin({ uno, tokens, affectedModules, onInvalidate, extra
   let resolved = false;
   let resolvedWarnTimer;
   async function generateCSS(layer) {
-    await Promise.all(tasks);
+    await flushTasks();
     let result;
     let tokensSize = tokens.size;
     do {
@@ -1002,38 +1094,6 @@ function ConfigHMRPlugin(ctx) {
   };
 }
 
-async function applyTransformers(ctx, original, id, enforce = "default") {
-  if (original.includes(IGNORE_COMMENT))
-    return;
-  const transformers = (ctx.uno.config.transformers || []).filter((i) => (i.enforce || "default") === enforce);
-  if (!transformers.length)
-    return;
-  let code = original;
-  let s = new MagicString(code);
-  const maps = [];
-  for (const t of transformers) {
-    if (t.idFilter) {
-      if (!t.idFilter(id))
-        continue;
-    } else if (!ctx.filter(code, id)) {
-      continue;
-    }
-    await t.transform(s, id, ctx);
-    if (s.hasChanged()) {
-      code = s.toString();
-      maps.push(s.generateMap({ hires: true, source: id }));
-      s = new MagicString(code);
-    }
-  }
-  if (code !== original) {
-    ctx.affectedModules.add(id);
-    return {
-      code,
-      map: remapping(maps, () => null)
-    };
-  }
-}
-
 function createTransformerPlugins(ctx) {
   const enforces = ["default", "pre", "post"];
   return enforces.map((enforce) => ({
@@ -1161,7 +1221,7 @@ function createDevtoolsPlugin(ctx) {
         if (id === DEVTOOLS_PATH) {
           if (!clientCode) {
             clientCode = [
-              await fs.promises.readFile(resolve(_dirname, "client.mjs"), "utf-8"),
+              await fs$1.promises.readFile(resolve(_dirname, "client.mjs"), "utf-8"),
               `import('${MOCK_CLASSES_MODULE_ID}')`,
               `import('${DEVTOOLS_CSS_PATH}')`
             ].join("\n").replace("__POST_PATH__", (config.server?.origin ?? "") + POST_PATH);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unocss/vite",
-  "version": "0.47.6",
+  "version": "0.48.0",
   "description": "The Vite plugin for UnoCSS",
   "author": "Anthony Fu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -44,15 +44,17 @@
   "dependencies": {
     "@ampproject/remapping": "^2.2.0",
     "@rollup/pluginutils": "^5.0.2",
-    "@unocss/config": "0.47.6",
-    "@unocss/core": "0.47.6",
-    "@unocss/inspector": "0.47.6",
-    "@unocss/scope": "0.47.6",
-    "@unocss/transformer-directives": "0.47.6",
+    "@unocss/config": "0.48.0",
+    "@unocss/core": "0.48.0",
+    "@unocss/inspector": "0.48.0",
+    "@unocss/scope": "0.48.0",
+    "@unocss/transformer-directives": "0.48.0",
+    "chokidar": "^3.5.3",
+    "fast-glob": "^3.2.12",
     "magic-string": "^0.27.0"
   },
   "devDependencies": {
-    "@unocss/shared-integration": "0.47.6",
+    "@unocss/shared-integration": "0.48.0",
     "vite": "^4.0.0"
   },
   "scripts": {