@unocss/webpack 0.47.6 → 0.48.0

package/dist/index.cjs

@@ -7,13 +7,18 @@ const WebpackSources = require('webpack-sources');
 const pluginutils = require('@rollup/pluginutils');
 const config = require('@unocss/config');
 const core = require('@unocss/core');
-const crypto = require('crypto');
+const fs = require('fs/promises');
+const path = require('path');
+const fg = require('fast-glob');
 const MagicString = require('magic-string');
 const remapping = require('@ampproject/remapping');
+const crypto = require('crypto');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e["default"] : e; }
 
 const WebpackSources__default = /*#__PURE__*/_interopDefaultLegacy(WebpackSources);
+const fs__default = /*#__PURE__*/_interopDefaultLegacy(fs);
+const fg__default = /*#__PURE__*/_interopDefaultLegacy(fg);
 const MagicString__default = /*#__PURE__*/_interopDefaultLegacy(MagicString);
 const remapping__default = /*#__PURE__*/_interopDefaultLegacy(remapping);
 
@@ -35,6 +40,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() {
@@ -84,15 +90,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;
@@ -100,6 +111,8 @@ function createContext(configOrPath, defaults = {}, extraConfigSources = [], res
     tokens,
     modules,
     affectedModules,
+    tasks,
+    flushTasks,
     invalidate,
     onInvalidate(fn) {
       invalidations.push(fn);
@@ -118,6 +131,79 @@ function createContext(configOrPath, defaults = {}, extraConfigSources = [], res
   };
 }
 
+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 getHash(input, length = 8) {
   return crypto.createHash("sha256").update(input).digest("hex").slice(0, length);
 }
@@ -152,38 +238,6 @@ function getHashPlaceholder(hash) {
   return `#--unocss-hash--{content:"${hash}"}`;
 }
 
-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 getPath(id) {
   return id.replace(/\?.*$/, "");
 }
@@ -199,7 +253,7 @@ function defineConfig(config) {
 function WebpackPlugin(configOrPath, defaults) {
   return unplugin.createUnplugin(() => {
     const ctx = createContext(configOrPath, defaults);
-    const { uno, tokens, filter, extract, onInvalidate } = ctx;
+    const { uno, tokens, filter, extract, onInvalidate, tasks, flushTasks } = ctx;
     let timer;
     onInvalidate(() => {
       clearTimeout(timer);
@@ -211,7 +265,7 @@ function WebpackPlugin(configOrPath, defaults) {
         '[unocss] webpack integration only supports "pre" enforce transformers currently.the following transformers will be ignored\n' + nonPreTransformers.map((i) => ` - ${i.name}`).join("\n")
       );
     }
-    const tasks = [];
+    tasks.push(setupExtraContent(ctx));
     const entries = /* @__PURE__ */ new Set();
     const hashes = /* @__PURE__ */ new Map();
     const plugin = {
@@ -257,7 +311,7 @@ function WebpackPlugin(configOrPath, defaults) {
         compiler.hooks.compilation.tap(PLUGIN_NAME, (compilation) => {
           compilation.hooks.optimizeAssets.tapPromise(PLUGIN_NAME, async () => {
             const files = Object.keys(compilation.assets);
-            await Promise.all(tasks);
+            await flushTasks();
             const result = await uno.generate(tokens, { minify: true });
             for (const file of files) {
               if (file === "*")
@@ -286,7 +340,7 @@ function WebpackPlugin(configOrPath, defaults) {
     async function updateModules() {
       if (!plugin.__vfsModules)
         return;
-      await Promise.all(tasks);
+      await flushTasks();
       const result = await uno.generate(tokens);
       if (lastTokenSize === tokens.size)
         return;

package/dist/index.mjs

@@ -3,9 +3,12 @@ import WebpackSources from 'webpack-sources';
 import { createFilter } from '@rollup/pluginutils';
 import { loadConfig } from '@unocss/config';
 import { cssIdRE, createGenerator, BetterMap } from '@unocss/core';
-import { createHash } from 'crypto';
+import fs from 'fs/promises';
+import { resolve } from 'path';
+import fg from 'fast-glob';
 import MagicString from 'magic-string';
 import remapping from '@ampproject/remapping';
+import { createHash } from 'crypto';
 
 const INCLUDE_COMMENT = "@unocss-include";
 const IGNORE_COMMENT = "@unocss-ignore";
@@ -25,6 +28,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() {
@@ -74,15 +78,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;
@@ -90,6 +99,8 @@ function createContext(configOrPath, defaults = {}, extraConfigSources = [], res
     tokens,
     modules,
     affectedModules,
+    tasks,
+    flushTasks,
     invalidate,
     onInvalidate(fn) {
       invalidations.push(fn);
@@ -108,6 +119,79 @@ function createContext(configOrPath, defaults = {}, extraConfigSources = [], res
   };
 }
 
+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 getHash(input, length = 8) {
   return createHash("sha256").update(input).digest("hex").slice(0, length);
 }
@@ -142,38 +226,6 @@ function getHashPlaceholder(hash) {
   return `#--unocss-hash--{content:"${hash}"}`;
 }
 
-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 getPath(id) {
   return id.replace(/\?.*$/, "");
 }
@@ -189,7 +241,7 @@ function defineConfig(config) {
 function WebpackPlugin(configOrPath, defaults) {
   return createUnplugin(() => {
     const ctx = createContext(configOrPath, defaults);
-    const { uno, tokens, filter, extract, onInvalidate } = ctx;
+    const { uno, tokens, filter, extract, onInvalidate, tasks, flushTasks } = ctx;
     let timer;
     onInvalidate(() => {
       clearTimeout(timer);
@@ -201,7 +253,7 @@ function WebpackPlugin(configOrPath, defaults) {
         '[unocss] webpack integration only supports "pre" enforce transformers currently.the following transformers will be ignored\n' + nonPreTransformers.map((i) => ` - ${i.name}`).join("\n")
       );
     }
-    const tasks = [];
+    tasks.push(setupExtraContent(ctx));
     const entries = /* @__PURE__ */ new Set();
     const hashes = /* @__PURE__ */ new Map();
     const plugin = {
@@ -247,7 +299,7 @@ function WebpackPlugin(configOrPath, defaults) {
         compiler.hooks.compilation.tap(PLUGIN_NAME, (compilation) => {
           compilation.hooks.optimizeAssets.tapPromise(PLUGIN_NAME, async () => {
             const files = Object.keys(compilation.assets);
-            await Promise.all(tasks);
+            await flushTasks();
             const result = await uno.generate(tokens, { minify: true });
             for (const file of files) {
               if (file === "*")
@@ -276,7 +328,7 @@ function WebpackPlugin(configOrPath, defaults) {
     async function updateModules() {
       if (!plugin.__vfsModules)
         return;
-      await Promise.all(tasks);
+      await flushTasks();
       const result = await uno.generate(tokens);
       if (lastTokenSize === tokens.size)
         return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unocss/webpack",
-  "version": "0.47.6",
+  "version": "0.48.0",
   "description": "The Webpack plugin for UnoCSS",
   "author": "Anthony Fu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -38,10 +38,12 @@
   "dependencies": {
     "@ampproject/remapping": "^2.2.0",
     "@rollup/pluginutils": "^5.0.2",
-    "@unocss/config": "0.47.6",
-    "@unocss/core": "0.47.6",
-    "magic-string": "^0.26.7",
-    "unplugin": "^1.0.0",
+    "@unocss/config": "0.48.0",
+    "@unocss/core": "0.48.0",
+    "chokidar": "^3.5.3",
+    "fast-glob": "^3.2.12",
+    "magic-string": "^0.27.0",
+    "unplugin": "^1.0.1",
     "webpack-sources": "^3.2.3"
   },
   "devDependencies": {