@unocss/webpack 0.58.4 → 0.58.6

package/dist/index.cjs

@@ -3,13 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const process$1 = require('node:process');
+const node_path = require('node:path');
 const unplugin = require('unplugin');
 const WebpackSources = require('webpack-sources');
 const pluginutils = require('@rollup/pluginutils');
 const config = require('@unocss/config');
 const core = require('@unocss/core');
 const fs = require('node:fs/promises');
-const node_path = require('node:path');
 const fg = require('fast-glob');
 const MagicString = require('magic-string');
 const remapping = require('@ampproject/remapping');
@@ -276,7 +276,7 @@ const VIRTUAL_ENTRY_ALIAS = [
 ];
 const LAYER_MARK_ALL = "__ALL__";
 const RESOLVED_ID_WITH_QUERY_RE = /[\/\\]__uno(?:(_.*?))?\.css(\?.*)?$/;
-const RESOLVED_ID_RE = /[\/\\]__uno(?:(_.*?))?\.css$/;
+const RESOLVED_ID_RE = /[\/\\]__uno(?:_(.*?))?\.css$/;
 function resolveId(id) {
   if (id.match(RESOLVED_ID_WITH_QUERY_RE))
     return id;
@@ -292,9 +292,22 @@ function resolveLayer(id) {
   if (match)
     return match[1] || LAYER_MARK_ALL;
 }
-const LAYER_PLACEHOLDER_RE = /(\\?")?#--unocss--\s*{\s*layer\s*:\s*(.+?);?\s*}/g;
+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}}`;
+  return `#--unocss--{layer:${layer};escape-view:\\"\\'\\\`\\\\}`;
+}
+function getCssEscaperForJsContent(view) {
+  if (!view)
+    return (css) => css;
+  const prefix = {};
+  const escapeViewRe = /(\\*)\\(["'`\\])/g;
+  view.trim().replace(escapeViewRe, (_, bs, char) => {
+    prefix[char] = bs;
+    return "";
+  });
+  return (css) => css.replace(/["'`\\]/g, (v) => {
+    return (prefix[v] || "") + v;
+  });
 }
 const HASH_PLACEHOLDER_RE = /#--unocss-hash--\s*{\s*content\s*:\s*\\*"(.+?)\\*";?\s*}/g;
 function getHashPlaceholder(hash) {
@@ -377,7 +390,12 @@ function WebpackPlugin(configOrPath, defaults) {
       },
       webpack(compiler) {
         compiler.hooks.compilation.tap(PLUGIN_NAME, (compilation) => {
-          compilation.hooks.optimizeAssets.tapPromise(PLUGIN_NAME, async () => {
+          const optimizeAssetsHook = (
+            /* webpack 5 & 6 */
+            compilation.hooks.processAssets || /* webpack 4 */
+            compilation.hooks.optimizeAssets
+          );
+          optimizeAssetsHook.tapPromise(PLUGIN_NAME, async () => {
             const files = Object.keys(compilation.assets);
             await flushTasks();
             const result = await uno.generate(tokens, { minify: true });
@@ -387,15 +405,11 @@ function WebpackPlugin(configOrPath, defaults) {
               let code = compilation.assets[file].source().toString();
               let replaced = false;
               code = code.replace(HASH_PLACEHOLDER_RE, "");
-              code = code.replace(LAYER_PLACEHOLDER_RE, (_, quote, layer) => {
+              code = code.replace(LAYER_PLACEHOLDER_RE, (_, layer, escapeView) => {
                 replaced = true;
                 const css = layer === LAYER_MARK_ALL ? result.getLayers(void 0, Array.from(entries).map((i) => resolveLayer(i)).filter((i) => !!i)) : result.getLayer(layer) || "";
-                if (!quote)
-                  return css;
-                let escaped = JSON.stringify(css).slice(1, -1);
-                if (quote === '\\"')
-                  escaped = JSON.stringify(escaped).slice(1, -1);
-                return quote + escaped;
+                const escapeCss = getCssEscaperForJsContent(escapeView);
+                return escapeCss(css);
               });
               if (replaced)
                 compilation.assets[file] = new WebpackSources__default.RawSource(code);
@@ -414,7 +428,8 @@ function WebpackPlugin(configOrPath, defaults) {
         return;
       lastTokenSize = tokens.size;
       Array.from(plugin.__vfsModules).forEach((id) => {
-        const path = decodeURIComponent(id.slice(plugin.__virtualModulePrefix.length));
+        let path = decodeURIComponent(id.slice(plugin.__virtualModulePrefix.length));
+        path = normalizeAbsolutePath(path);
         const layer = resolveLayer(path);
         if (!layer)
           return;
@@ -436,6 +451,12 @@ function getLayer(id) {
   }
   return layer;
 }
+function normalizeAbsolutePath(path) {
+  if (node_path.isAbsolute(path))
+    return node_path.normalize(path);
+  else
+    return path;
+}
 
 exports.default = WebpackPlugin;
 exports.defineConfig = defineConfig;

package/dist/index.mjs

@@ -1,11 +1,11 @@
 import process$1 from 'node:process';
+import { resolve, isAbsolute, normalize } from 'node:path';
 import { createUnplugin } from 'unplugin';
 import WebpackSources from 'webpack-sources';
 import { createFilter } from '@rollup/pluginutils';
 import { loadConfig } from '@unocss/config';
 import { cssIdRE, createGenerator, BetterMap } from '@unocss/core';
 import fs from 'node:fs/promises';
-import { resolve, isAbsolute } from 'node:path';
 import fg from 'fast-glob';
 import MagicString from 'magic-string';
 import remapping from '@ampproject/remapping';
@@ -263,7 +263,7 @@ const VIRTUAL_ENTRY_ALIAS = [
 ];
 const LAYER_MARK_ALL = "__ALL__";
 const RESOLVED_ID_WITH_QUERY_RE = /[\/\\]__uno(?:(_.*?))?\.css(\?.*)?$/;
-const RESOLVED_ID_RE = /[\/\\]__uno(?:(_.*?))?\.css$/;
+const RESOLVED_ID_RE = /[\/\\]__uno(?:_(.*?))?\.css$/;
 function resolveId(id) {
   if (id.match(RESOLVED_ID_WITH_QUERY_RE))
     return id;
@@ -279,9 +279,22 @@ function resolveLayer(id) {
   if (match)
     return match[1] || LAYER_MARK_ALL;
 }
-const LAYER_PLACEHOLDER_RE = /(\\?")?#--unocss--\s*{\s*layer\s*:\s*(.+?);?\s*}/g;
+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}}`;
+  return `#--unocss--{layer:${layer};escape-view:\\"\\'\\\`\\\\}`;
+}
+function getCssEscaperForJsContent(view) {
+  if (!view)
+    return (css) => css;
+  const prefix = {};
+  const escapeViewRe = /(\\*)\\(["'`\\])/g;
+  view.trim().replace(escapeViewRe, (_, bs, char) => {
+    prefix[char] = bs;
+    return "";
+  });
+  return (css) => css.replace(/["'`\\]/g, (v) => {
+    return (prefix[v] || "") + v;
+  });
 }
 const HASH_PLACEHOLDER_RE = /#--unocss-hash--\s*{\s*content\s*:\s*\\*"(.+?)\\*";?\s*}/g;
 function getHashPlaceholder(hash) {
@@ -364,7 +377,12 @@ function WebpackPlugin(configOrPath, defaults) {
       },
       webpack(compiler) {
         compiler.hooks.compilation.tap(PLUGIN_NAME, (compilation) => {
-          compilation.hooks.optimizeAssets.tapPromise(PLUGIN_NAME, async () => {
+          const optimizeAssetsHook = (
+            /* webpack 5 & 6 */
+            compilation.hooks.processAssets || /* webpack 4 */
+            compilation.hooks.optimizeAssets
+          );
+          optimizeAssetsHook.tapPromise(PLUGIN_NAME, async () => {
             const files = Object.keys(compilation.assets);
             await flushTasks();
             const result = await uno.generate(tokens, { minify: true });
@@ -374,15 +392,11 @@ function WebpackPlugin(configOrPath, defaults) {
               let code = compilation.assets[file].source().toString();
               let replaced = false;
               code = code.replace(HASH_PLACEHOLDER_RE, "");
-              code = code.replace(LAYER_PLACEHOLDER_RE, (_, quote, layer) => {
+              code = code.replace(LAYER_PLACEHOLDER_RE, (_, layer, escapeView) => {
                 replaced = true;
                 const css = layer === LAYER_MARK_ALL ? result.getLayers(void 0, Array.from(entries).map((i) => resolveLayer(i)).filter((i) => !!i)) : result.getLayer(layer) || "";
-                if (!quote)
-                  return css;
-                let escaped = JSON.stringify(css).slice(1, -1);
-                if (quote === '\\"')
-                  escaped = JSON.stringify(escaped).slice(1, -1);
-                return quote + escaped;
+                const escapeCss = getCssEscaperForJsContent(escapeView);
+                return escapeCss(css);
               });
               if (replaced)
                 compilation.assets[file] = new WebpackSources.RawSource(code);
@@ -401,7 +415,8 @@ function WebpackPlugin(configOrPath, defaults) {
         return;
       lastTokenSize = tokens.size;
       Array.from(plugin.__vfsModules).forEach((id) => {
-        const path = decodeURIComponent(id.slice(plugin.__virtualModulePrefix.length));
+        let path = decodeURIComponent(id.slice(plugin.__virtualModulePrefix.length));
+        path = normalizeAbsolutePath(path);
         const layer = resolveLayer(path);
         if (!layer)
           return;
@@ -423,5 +438,11 @@ function getLayer(id) {
   }
   return layer;
 }
+function normalizeAbsolutePath(path) {
+  if (isAbsolute(path))
+    return normalize(path);
+  else
+    return path;
+}
 
 export { WebpackPlugin as default, defineConfig };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unocss/webpack",
-  "version": "0.58.4",
+  "version": "0.58.6",
   "description": "The Webpack plugin for UnoCSS",
   "author": "Anthony Fu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -36,20 +36,20 @@
     "webpack": "^4 || ^5"
   },
   "dependencies": {
-    "@ampproject/remapping": "^2.2.1",
+    "@ampproject/remapping": "^2.3.0",
     "@rollup/pluginutils": "^5.1.0",
-    "chokidar": "^3.5.3",
+    "chokidar": "^3.6.0",
     "fast-glob": "^3.3.2",
-    "magic-string": "^0.30.5",
-    "unplugin": "^1.6.0",
+    "magic-string": "^0.30.8",
+    "unplugin": "^1.10.0",
     "webpack-sources": "^3.2.3",
-    "@unocss/config": "0.58.4",
-    "@unocss/core": "0.58.4"
+    "@unocss/config": "0.58.6",
+    "@unocss/core": "0.58.6"
   },
   "devDependencies": {
     "@types/webpack": "^5.28.5",
     "@types/webpack-sources": "^3.2.3",
-    "webpack": "^5.90.0"
+    "webpack": "^5.90.3"
   },
   "scripts": {
     "build": "unbuild",