@unocss/webpack 0.44.0 → 0.44.3

package/README.md

@@ -23,6 +23,13 @@ module.exports = {
 }
 ```
 
+Add `uno.css` to your main entry:
+
+```ts
+// main.ts
+import 'uno.css'
+```
+
 Or you can have the config file in `unocss.config.js` or `unocss.config.ts`.
 
 ## License

package/dist/index.cjs

@@ -4,49 +4,26 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const unplugin = require('unplugin');
 const WebpackSources = require('webpack-sources');
-const core = require('@unocss/core');
 const pluginutils = require('@rollup/pluginutils');
 const config = require('@unocss/config');
+const core = require('@unocss/core');
 const crypto = require('crypto');
+const MagicString = require('magic-string');
+const remapping = require('@ampproject/remapping');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e["default"] : e; }
 
 const WebpackSources__default = /*#__PURE__*/_interopDefaultLegacy(WebpackSources);
-
-const defaultExclude = [core.cssIdRE];
-const defaultInclude = [/\.vue$/, /\.vue\?vue/, /\.svelte$/, /\.[jt]sx$/, /\.mdx?$/, /\.astro$/, /\.elm$/];
-
-const VIRTUAL_ENTRY_ALIAS = [
-  /^(?:virtual:)?uno(?::(.+))?\.css(\?.*)?$/
-];
-const LAYER_MARK_ALL = "__ALL__";
-function resolveId(id) {
-  for (const alias of VIRTUAL_ENTRY_ALIAS) {
-    const match = id.match(alias);
-    if (match) {
-      return match[1] ? `/__uno_${match[1]}.css` : "/__uno.css";
-    }
-  }
-}
-const RESOLVED_ID_RE = /\/__uno(?:(_.*?))?\.css$/;
-function resolveLayer(id) {
-  const match = id.match(RESOLVED_ID_RE);
-  if (match)
-    return match[1] || LAYER_MARK_ALL;
-}
-const LAYER_PLACEHOLDER_RE = /(\\?")?#--unocss--\s*{\s*layer\s*:\s*(.+?);?\s*}/g;
-function getLayerPlaceholder(layer) {
-  return `#--unocss--{layer:${layer}}`;
-}
-const HASH_PLACEHOLDER_RE = /#--unocss-hash--\s*{\s*content\s*:\s*\\*"(.+?)\\*";?\s*}/g;
-function getHashPlaceholder(hash) {
-  return `#--unocss-hash--{content:"${hash}"}`;
-}
+const MagicString__default = /*#__PURE__*/_interopDefaultLegacy(MagicString);
+const remapping__default = /*#__PURE__*/_interopDefaultLegacy(remapping);
 
 const INCLUDE_COMMENT = "@unocss-include";
 const IGNORE_COMMENT = "@unocss-ignore";
 const CSS_PLACEHOLDER = "@unocss-placeholder";
 
+const defaultExclude = [core.cssIdRE];
+const defaultInclude = [/\.vue$/, /\.vue\?vue/, /\.svelte$/, /\.[jt]sx$/, /\.mdx?$/, /\.astro$/, /\.elm$/, /\.html$/];
+
 function createContext(configOrPath, defaults = {}, extraConfigSources = [], resolveConfigResult = () => {
 }) {
   let root = process.cwd();
@@ -135,14 +112,73 @@ function createContext(configOrPath, defaults = {}, extraConfigSources = [], res
   };
 }
 
-function getPath(id) {
-  return id.replace(/\?.*$/, "");
-}
-
 function getHash(input, length = 8) {
   return crypto.createHash("sha256").update(input).digest("hex").slice(0, length);
 }
 
+const VIRTUAL_ENTRY_ALIAS = [
+  /^(?:virtual:)?uno(?::(.+))?\.css(\?.*)?$/
+];
+const LAYER_MARK_ALL = "__ALL__";
+function resolveId(id) {
+  for (const alias of VIRTUAL_ENTRY_ALIAS) {
+    const match = id.match(alias);
+    if (match) {
+      return match[1] ? `/__uno_${match[1]}.css` : "/__uno.css";
+    }
+  }
+}
+const RESOLVED_ID_RE = /\/__uno(?:(_.*?))?\.css$/;
+function resolveLayer(id) {
+  const match = id.match(RESOLVED_ID_RE);
+  if (match)
+    return match[1] || LAYER_MARK_ALL;
+}
+const LAYER_PLACEHOLDER_RE = /(\\?")?#--unocss--\s*{\s*layer\s*:\s*(.+?);?\s*}/g;
+function getLayerPlaceholder(layer) {
+  return `#--unocss--{layer:${layer}}`;
+}
+const HASH_PLACEHOLDER_RE = /#--unocss-hash--\s*{\s*content\s*:\s*\\*"(.+?)\\*";?\s*}/g;
+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(/\?.*$/, "");
+}
+
 const PLUGIN_NAME = "unocss:webpack";
 const UPDATE_DEBOUNCE = 10;
 function defineConfig(config) {
@@ -150,25 +186,33 @@ function defineConfig(config) {
 }
 function WebpackPlugin(configOrPath, defaults) {
   return unplugin.createUnplugin(() => {
-    const context = createContext(configOrPath, defaults);
-    const { uno, tokens, filter, extract, onInvalidate } = context;
+    const ctx = createContext(configOrPath, defaults);
+    const { uno, tokens, filter, extract, onInvalidate } = ctx;
     let timer;
     onInvalidate(() => {
       clearTimeout(timer);
       timer = setTimeout(updateModules, UPDATE_DEBOUNCE);
     });
+    const nonPreTransformers = ctx.uno.config.transformers?.filter((i) => i.enforce !== "pre");
+    if (nonPreTransformers?.length) {
+      console.warn('[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 = [];
     const entries = /* @__PURE__ */ new Set();
-    const hashs = /* @__PURE__ */ new Map();
+    const hashes = /* @__PURE__ */ new Map();
     const plugin = {
       name: "unocss:webpack",
       enforce: "pre",
       transformInclude(id) {
         return filter("", id);
       },
-      transform(code, id) {
-        tasks.push(extract(code, id));
-        return null;
+      async transform(code, id) {
+        const result = await applyTransformers(ctx, code, id, "pre");
+        if (result == null)
+          tasks.push(extract(code, id));
+        else
+          tasks.push(extract(result.code, id));
+        return result;
       },
       resolveId(id) {
         const entry = resolveId(id);
@@ -188,7 +232,7 @@ function WebpackPlugin(configOrPath, defaults) {
           if (entry)
             layer = resolveLayer(entry);
         }
-        const hash = hashs.get(id);
+        const hash = hashes.get(id);
         if (layer)
           return (hash ? getHashPlaceholder(hash) : "") + getLayerPlaceholder(layer);
       },
@@ -230,7 +274,7 @@ function WebpackPlugin(configOrPath, defaults) {
           return;
         const code = layer === LAYER_MARK_ALL ? result.getLayers(void 0, Array.from(entries).map((i) => resolveLayer(i)).filter((i) => !!i)) : result.getLayer(layer) || "";
         const hash = getHash(code);
-        hashs.set(path, hash);
+        hashes.set(path, hash);
         plugin.__vfs.writeModule(id, code);
       });
     }

package/dist/index.mjs

@@ -1,44 +1,19 @@
 import { createUnplugin } from 'unplugin';
 import WebpackSources from 'webpack-sources';
-import { cssIdRE, createGenerator, BetterMap } from '@unocss/core';
 import { createFilter } from '@rollup/pluginutils';
 import { loadConfig } from '@unocss/config';
+import { cssIdRE, createGenerator, BetterMap } from '@unocss/core';
 import { createHash } from 'crypto';
-
-const defaultExclude = [cssIdRE];
-const defaultInclude = [/\.vue$/, /\.vue\?vue/, /\.svelte$/, /\.[jt]sx$/, /\.mdx?$/, /\.astro$/, /\.elm$/];
-
-const VIRTUAL_ENTRY_ALIAS = [
-  /^(?:virtual:)?uno(?::(.+))?\.css(\?.*)?$/
-];
-const LAYER_MARK_ALL = "__ALL__";
-function resolveId(id) {
-  for (const alias of VIRTUAL_ENTRY_ALIAS) {
-    const match = id.match(alias);
-    if (match) {
-      return match[1] ? `/__uno_${match[1]}.css` : "/__uno.css";
-    }
-  }
-}
-const RESOLVED_ID_RE = /\/__uno(?:(_.*?))?\.css$/;
-function resolveLayer(id) {
-  const match = id.match(RESOLVED_ID_RE);
-  if (match)
-    return match[1] || LAYER_MARK_ALL;
-}
-const LAYER_PLACEHOLDER_RE = /(\\?")?#--unocss--\s*{\s*layer\s*:\s*(.+?);?\s*}/g;
-function getLayerPlaceholder(layer) {
-  return `#--unocss--{layer:${layer}}`;
-}
-const HASH_PLACEHOLDER_RE = /#--unocss-hash--\s*{\s*content\s*:\s*\\*"(.+?)\\*";?\s*}/g;
-function getHashPlaceholder(hash) {
-  return `#--unocss-hash--{content:"${hash}"}`;
-}
+import MagicString from 'magic-string';
+import remapping from '@ampproject/remapping';
 
 const INCLUDE_COMMENT = "@unocss-include";
 const IGNORE_COMMENT = "@unocss-ignore";
 const CSS_PLACEHOLDER = "@unocss-placeholder";
 
+const defaultExclude = [cssIdRE];
+const defaultInclude = [/\.vue$/, /\.vue\?vue/, /\.svelte$/, /\.[jt]sx$/, /\.mdx?$/, /\.astro$/, /\.elm$/, /\.html$/];
+
 function createContext(configOrPath, defaults = {}, extraConfigSources = [], resolveConfigResult = () => {
 }) {
   let root = process.cwd();
@@ -127,14 +102,73 @@ function createContext(configOrPath, defaults = {}, extraConfigSources = [], res
   };
 }
 
-function getPath(id) {
-  return id.replace(/\?.*$/, "");
-}
-
 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__";
+function resolveId(id) {
+  for (const alias of VIRTUAL_ENTRY_ALIAS) {
+    const match = id.match(alias);
+    if (match) {
+      return match[1] ? `/__uno_${match[1]}.css` : "/__uno.css";
+    }
+  }
+}
+const RESOLVED_ID_RE = /\/__uno(?:(_.*?))?\.css$/;
+function resolveLayer(id) {
+  const match = id.match(RESOLVED_ID_RE);
+  if (match)
+    return match[1] || LAYER_MARK_ALL;
+}
+const LAYER_PLACEHOLDER_RE = /(\\?")?#--unocss--\s*{\s*layer\s*:\s*(.+?);?\s*}/g;
+function getLayerPlaceholder(layer) {
+  return `#--unocss--{layer:${layer}}`;
+}
+const HASH_PLACEHOLDER_RE = /#--unocss-hash--\s*{\s*content\s*:\s*\\*"(.+?)\\*";?\s*}/g;
+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(/\?.*$/, "");
+}
+
 const PLUGIN_NAME = "unocss:webpack";
 const UPDATE_DEBOUNCE = 10;
 function defineConfig(config) {
@@ -142,25 +176,33 @@ function defineConfig(config) {
 }
 function WebpackPlugin(configOrPath, defaults) {
   return createUnplugin(() => {
-    const context = createContext(configOrPath, defaults);
-    const { uno, tokens, filter, extract, onInvalidate } = context;
+    const ctx = createContext(configOrPath, defaults);
+    const { uno, tokens, filter, extract, onInvalidate } = ctx;
     let timer;
     onInvalidate(() => {
       clearTimeout(timer);
       timer = setTimeout(updateModules, UPDATE_DEBOUNCE);
     });
+    const nonPreTransformers = ctx.uno.config.transformers?.filter((i) => i.enforce !== "pre");
+    if (nonPreTransformers?.length) {
+      console.warn('[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 = [];
     const entries = /* @__PURE__ */ new Set();
-    const hashs = /* @__PURE__ */ new Map();
+    const hashes = /* @__PURE__ */ new Map();
     const plugin = {
       name: "unocss:webpack",
       enforce: "pre",
       transformInclude(id) {
         return filter("", id);
       },
-      transform(code, id) {
-        tasks.push(extract(code, id));
-        return null;
+      async transform(code, id) {
+        const result = await applyTransformers(ctx, code, id, "pre");
+        if (result == null)
+          tasks.push(extract(code, id));
+        else
+          tasks.push(extract(result.code, id));
+        return result;
       },
       resolveId(id) {
         const entry = resolveId(id);
@@ -180,7 +222,7 @@ function WebpackPlugin(configOrPath, defaults) {
           if (entry)
             layer = resolveLayer(entry);
         }
-        const hash = hashs.get(id);
+        const hash = hashes.get(id);
         if (layer)
           return (hash ? getHashPlaceholder(hash) : "") + getLayerPlaceholder(layer);
       },
@@ -222,7 +264,7 @@ function WebpackPlugin(configOrPath, defaults) {
           return;
         const code = layer === LAYER_MARK_ALL ? result.getLayers(void 0, Array.from(entries).map((i) => resolveLayer(i)).filter((i) => !!i)) : result.getLayer(layer) || "";
         const hash = getHash(code);
-        hashs.set(path, hash);
+        hashes.set(path, hash);
         plugin.__vfs.writeModule(id, code);
       });
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unocss/webpack",
-  "version": "0.44.0",
+  "version": "0.44.3",
   "description": "The Webpack plugin for UnoCSS",
   "author": "Anthony Fu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -36,9 +36,11 @@
     "webpack": "^4 || ^5"
   },
   "dependencies": {
+    "@ampproject/remapping": "^2.2.0",
     "@rollup/pluginutils": "^4.2.1",
-    "@unocss/config": "0.44.0",
-    "@unocss/core": "0.44.0",
+    "@unocss/config": "0.44.3",
+    "@unocss/core": "0.44.3",
+    "magic-string": "^0.26.2",
     "unplugin": "^0.7.0",
     "webpack-sources": "^3.2.3"
   },