@unocss/vite 0.43.2 → 0.44.2

package/README.md

@@ -251,26 +251,20 @@ To support `class:foo` and `class:foo={bar}` add the plugin and configure `extra
 You can use simple rules with `class:`, for example `class:bg-red-500={foo}` or using `shorcuts` to include multiples rules, see `src/routes/__layout.svelte` on linked example project below.
 
 ```ts
-// svelte.config.js
-import preprocess from 'svelte-preprocess'
+// vite.config.js
+import { sveltekit } from '@sveltejs/kit/vite'
 import UnoCss from 'unocss/vite'
 import { extractorSvelte } from '@unocss/core'
 
-/** @type {import('@sveltejs/kit').Config} */
+/** @type {import('vite').UserConfig} */
 const config = {
-  // Consult https://github.com/sveltejs/svelte-preprocess
-  // for more information about preprocessors
-  preprocess: preprocess(),
-  kit: {
-    vite: {
-      plugins: [
-        UnoCss({
-          extractors: [extractorSvelte],
-          /* more options */
-        }),
-      ],
-    },
-  },
+  plugins: [
+    sveltekit(),
+    UnoCss({
+      extractors: [extractorSvelte],
+      /* more options */
+    }),
+  ],
 }
 ```
 

package/dist/index.cjs

@@ -8,6 +8,7 @@ const crypto = require('crypto');
 const core = require('@unocss/core');
 const pluginutils = require('@rollup/pluginutils');
 const MagicString = require('magic-string');
+const remapping = require('@ampproject/remapping');
 const fs = require('fs');
 const url = require('url');
 const config = require('@unocss/config');
@@ -16,6 +17,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 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 defaultExclude = [core.cssIdRE];
@@ -354,7 +356,7 @@ function GlobalModeBuildPlugin({ uno, ready, extract, tokens, filter, getConfig
             chunk.code = await replaceAsync(js, LAYER_PLACEHOLDER_RE, async (_, __, layer) => {
               replaced = true;
               const css = layer === LAYER_MARK_ALL ? result.getLayers(void 0, Array.from(vfsLayers)) : result.getLayer(layer) || "";
-              return css;
+              return css.replace(/\n/g, "").replace(/(?<!\\)(['"])/g, "\\$1");
             });
           }
         }
@@ -528,44 +530,67 @@ function PerModuleModePlugin({ uno, filter }) {
       }]
     });
   };
-  return {
-    name: "unocss:module-scope",
-    enforce: "post",
-    configureServer(_server) {
-      server = _server;
-    },
-    async transform(code, id) {
-      if (!filter(code, id))
-        return;
-      const hash = getHash(id);
-      const hasScope = code.match(SCOPE_IMPORT_RE);
-      const { css } = await uno.generate(code, { id, scope: hasScope ? `.${hash}` : void 0, preflights: false });
-      if (!css && !hasScope)
-        return null;
-      if (hasScope)
-        code = code.replace(SCOPE_IMPORT_RE, ` from 'data:text/javascript;base64,${Buffer.from(`export default () => "${hash}"`).toString("base64")}'`);
-      moduleMap.set(hash, [id, css]);
-      invalidate(hash);
-      return {
-        code: `import "${VIRTUAL_PREFIX}${hash}.css";${code}`,
-        map: null
-      };
-    },
-    resolveId(id) {
-      return id.startsWith(VIRTUAL_PREFIX) ? id : null;
+  return [
+    {
+      name: "unocss:module-scope:pre",
+      enforce: "pre",
+      async transform(code, id) {
+        if (!filter(code, id))
+          return;
+        const hash = getHash(id);
+        const { css } = await uno.generate(code, {
+          id,
+          preflights: true
+        });
+        if (!css)
+          return null;
+        moduleMap.set(hash, [id, css]);
+        invalidate(hash);
+        return {
+          code: `import "${VIRTUAL_PREFIX}${hash}.css";${code}`,
+          map: null
+        };
+      }
     },
-    load(id) {
-      if (!id.startsWith(VIRTUAL_PREFIX))
-        return null;
-      const hash = id.slice(VIRTUAL_PREFIX.length, -".css".length);
-      const [source, css] = moduleMap.get(hash) || [];
-      if (source)
-        this.addWatchFile(source);
-      return `
+    {
+      name: "unocss:module-scope",
+      enforce: "post",
+      configureServer(_server) {
+        server = _server;
+      },
+      async transform(code, id) {
+        if (!filter(code, id))
+          return;
+        const hash = getHash(id);
+        const hasScope = code.match(SCOPE_IMPORT_RE);
+        const { css } = await uno.generate(code, { id, scope: hasScope ? `.${hash}` : void 0, preflights: false });
+        if (!css && !hasScope)
+          return null;
+        if (hasScope)
+          code = code.replace(SCOPE_IMPORT_RE, ` from 'data:text/javascript;base64,${Buffer.from(`export default () => "${hash}"`).toString("base64")}'`);
+        moduleMap.set(hash, [id, css]);
+        invalidate(hash);
+        return {
+          code: `import "${VIRTUAL_PREFIX}${hash}.css";${code}`,
+          map: null
+        };
+      },
+      resolveId(id) {
+        return id.startsWith(VIRTUAL_PREFIX) ? id : null;
+      },
+      load(id) {
+        if (!id.startsWith(VIRTUAL_PREFIX))
+          return null;
+        const hash = id.slice(VIRTUAL_PREFIX.length, -".css".length);
+        const [source, css] = moduleMap.get(hash) || [];
+        if (source)
+          this.addWatchFile(source);
+        return `
 /* unocss ${source} */
 ${css}`;
+      }
     }
-  };
+  ];
 }
 
 function VueScopedPlugin({ uno, ready }) {
@@ -756,62 +781,53 @@ function ConfigHMRPlugin(ctx) {
   };
 }
 
-function initTransformerPlugins(ctx) {
-  async function applyTransformers(code, id, enforce) {
-    if (code.includes(IGNORE_COMMENT))
-      return;
-    const transformers = (ctx.uno.config.transformers || []).filter((i) => i.enforce === enforce);
-    if (!transformers.length)
-      return;
-    const s = new MagicString__default(code);
-    for (const t of transformers) {
-      if (t.idFilter) {
-        if (!t.idFilter(id))
-          continue;
-      } else if (!ctx.filter(code, id)) {
+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;
-      }
-      await t.transform(s, id, ctx);
+    } else if (!ctx.filter(code, id)) {
+      continue;
     }
+    await t.transform(s, id, ctx);
     if (s.hasChanged()) {
-      ctx.affectedModules.add(id);
-      return {
-        code: s.toString(),
-        map: s.generateMap({ hires: true, source: id })
-      };
+      code = s.toString();
+      maps.push(s.generateMap({ hires: true, source: id }));
+      s = new MagicString__default(code);
     }
   }
-  return [
-    {
-      name: "unocss:transformers:default",
-      transform(code, id) {
-        return applyTransformers(code, id);
-      },
-      transformIndexHtml(code) {
-        return applyTransformers(code, "index.html").then((t) => t?.code);
-      }
-    },
-    {
-      name: "unocss:transformers:pre",
-      enforce: "pre",
-      transform(code, id) {
-        return applyTransformers(code, id, "pre");
-      },
-      transformIndexHtml(code) {
-        return applyTransformers(code, "index.html", "pre").then((t) => t?.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) => ({
+    name: `unocss:transformers:${enforce}`,
+    enforce: enforce === "default" ? void 0 : enforce,
+    transform(code, id) {
+      return applyTransformers(ctx, code, id, enforce);
     },
-    {
-      name: "unocss:transformers:post",
-      enforce: "post",
-      transform(code, id) {
-        return applyTransformers(code, id, "post");
-      },
-      transformIndexHtml(code) {
-        applyTransformers(code, "index.html", "post").then((t) => t?.code);
+    transformIndexHtml: {
+      enforce: enforce === "default" ? void 0 : enforce,
+      transform(code) {
+        return applyTransformers(ctx, code, "index.html", enforce).then((t) => t?.code);
       }
     }
-  ];
+  }));
 }
 
 const _dirname = typeof __dirname !== "undefined" ? __dirname : path.dirname(url.fileURLToPath((typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('index.cjs', document.baseURI).href))));
@@ -950,13 +966,13 @@ function UnocssPlugin(configOrPath, defaults = {}) {
   const mode = inlineConfig.mode ?? "global";
   const plugins = [
     ConfigHMRPlugin(ctx),
-    ...initTransformerPlugins(ctx),
+    ...createTransformerPlugins(ctx),
     ...createDevtoolsPlugin(ctx)
   ];
   if (inlineConfig.inspector !== false)
     plugins.push(UnocssInspector__default(ctx));
   if (mode === "per-module") {
-    plugins.push(PerModuleModePlugin(ctx));
+    plugins.push(...PerModuleModePlugin(ctx));
   } else if (mode === "vue-scoped") {
     plugins.push(VueScopedPlugin(ctx));
   } else if (mode === "svelte-scoped") {

package/dist/index.d.ts

@@ -45,7 +45,7 @@ declare function GlobalModeBuildPlugin({ uno, ready, extract, tokens, filter, ge
 
 declare function GlobalModePlugin(ctx: UnocssPluginContext): vite.Plugin[];
 
-declare function PerModuleModePlugin({ uno, filter }: UnocssPluginContext): Plugin;
+declare function PerModuleModePlugin({ uno, filter }: UnocssPluginContext): Plugin[];
 
 declare function VueScopedPlugin({ uno, ready }: UnocssPluginContext): Plugin;
 

package/dist/index.mjs

@@ -4,6 +4,7 @@ import { createHash } from 'crypto';
 import { cssIdRE, createGenerator, BetterMap, notNull, toEscapedSelector } from '@unocss/core';
 import { createFilter } from '@rollup/pluginutils';
 import MagicString from 'magic-string';
+import remapping from '@ampproject/remapping';
 import fs from 'fs';
 import { fileURLToPath } from 'url';
 import { loadConfig } from '@unocss/config';
@@ -344,7 +345,7 @@ function GlobalModeBuildPlugin({ uno, ready, extract, tokens, filter, getConfig
             chunk.code = await replaceAsync(js, LAYER_PLACEHOLDER_RE, async (_, __, layer) => {
               replaced = true;
               const css = layer === LAYER_MARK_ALL ? result.getLayers(void 0, Array.from(vfsLayers)) : result.getLayer(layer) || "";
-              return css;
+              return css.replace(/\n/g, "").replace(/(?<!\\)(['"])/g, "\\$1");
             });
           }
         }
@@ -518,44 +519,67 @@ function PerModuleModePlugin({ uno, filter }) {
       }]
     });
   };
-  return {
-    name: "unocss:module-scope",
-    enforce: "post",
-    configureServer(_server) {
-      server = _server;
-    },
-    async transform(code, id) {
-      if (!filter(code, id))
-        return;
-      const hash = getHash(id);
-      const hasScope = code.match(SCOPE_IMPORT_RE);
-      const { css } = await uno.generate(code, { id, scope: hasScope ? `.${hash}` : void 0, preflights: false });
-      if (!css && !hasScope)
-        return null;
-      if (hasScope)
-        code = code.replace(SCOPE_IMPORT_RE, ` from 'data:text/javascript;base64,${Buffer.from(`export default () => "${hash}"`).toString("base64")}'`);
-      moduleMap.set(hash, [id, css]);
-      invalidate(hash);
-      return {
-        code: `import "${VIRTUAL_PREFIX}${hash}.css";${code}`,
-        map: null
-      };
-    },
-    resolveId(id) {
-      return id.startsWith(VIRTUAL_PREFIX) ? id : null;
+  return [
+    {
+      name: "unocss:module-scope:pre",
+      enforce: "pre",
+      async transform(code, id) {
+        if (!filter(code, id))
+          return;
+        const hash = getHash(id);
+        const { css } = await uno.generate(code, {
+          id,
+          preflights: true
+        });
+        if (!css)
+          return null;
+        moduleMap.set(hash, [id, css]);
+        invalidate(hash);
+        return {
+          code: `import "${VIRTUAL_PREFIX}${hash}.css";${code}`,
+          map: null
+        };
+      }
     },
-    load(id) {
-      if (!id.startsWith(VIRTUAL_PREFIX))
-        return null;
-      const hash = id.slice(VIRTUAL_PREFIX.length, -".css".length);
-      const [source, css] = moduleMap.get(hash) || [];
-      if (source)
-        this.addWatchFile(source);
-      return `
+    {
+      name: "unocss:module-scope",
+      enforce: "post",
+      configureServer(_server) {
+        server = _server;
+      },
+      async transform(code, id) {
+        if (!filter(code, id))
+          return;
+        const hash = getHash(id);
+        const hasScope = code.match(SCOPE_IMPORT_RE);
+        const { css } = await uno.generate(code, { id, scope: hasScope ? `.${hash}` : void 0, preflights: false });
+        if (!css && !hasScope)
+          return null;
+        if (hasScope)
+          code = code.replace(SCOPE_IMPORT_RE, ` from 'data:text/javascript;base64,${Buffer.from(`export default () => "${hash}"`).toString("base64")}'`);
+        moduleMap.set(hash, [id, css]);
+        invalidate(hash);
+        return {
+          code: `import "${VIRTUAL_PREFIX}${hash}.css";${code}`,
+          map: null
+        };
+      },
+      resolveId(id) {
+        return id.startsWith(VIRTUAL_PREFIX) ? id : null;
+      },
+      load(id) {
+        if (!id.startsWith(VIRTUAL_PREFIX))
+          return null;
+        const hash = id.slice(VIRTUAL_PREFIX.length, -".css".length);
+        const [source, css] = moduleMap.get(hash) || [];
+        if (source)
+          this.addWatchFile(source);
+        return `
 /* unocss ${source} */
 ${css}`;
+      }
     }
-  };
+  ];
 }
 
 function VueScopedPlugin({ uno, ready }) {
@@ -746,62 +770,53 @@ function ConfigHMRPlugin(ctx) {
   };
 }
 
-function initTransformerPlugins(ctx) {
-  async function applyTransformers(code, id, enforce) {
-    if (code.includes(IGNORE_COMMENT))
-      return;
-    const transformers = (ctx.uno.config.transformers || []).filter((i) => i.enforce === enforce);
-    if (!transformers.length)
-      return;
-    const s = new MagicString(code);
-    for (const t of transformers) {
-      if (t.idFilter) {
-        if (!t.idFilter(id))
-          continue;
-      } else if (!ctx.filter(code, id)) {
+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;
-      }
-      await t.transform(s, id, ctx);
+    } else if (!ctx.filter(code, id)) {
+      continue;
     }
+    await t.transform(s, id, ctx);
     if (s.hasChanged()) {
-      ctx.affectedModules.add(id);
-      return {
-        code: s.toString(),
-        map: s.generateMap({ hires: true, source: id })
-      };
+      code = s.toString();
+      maps.push(s.generateMap({ hires: true, source: id }));
+      s = new MagicString(code);
     }
   }
-  return [
-    {
-      name: "unocss:transformers:default",
-      transform(code, id) {
-        return applyTransformers(code, id);
-      },
-      transformIndexHtml(code) {
-        return applyTransformers(code, "index.html").then((t) => t?.code);
-      }
-    },
-    {
-      name: "unocss:transformers:pre",
-      enforce: "pre",
-      transform(code, id) {
-        return applyTransformers(code, id, "pre");
-      },
-      transformIndexHtml(code) {
-        return applyTransformers(code, "index.html", "pre").then((t) => t?.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) => ({
+    name: `unocss:transformers:${enforce}`,
+    enforce: enforce === "default" ? void 0 : enforce,
+    transform(code, id) {
+      return applyTransformers(ctx, code, id, enforce);
     },
-    {
-      name: "unocss:transformers:post",
-      enforce: "post",
-      transform(code, id) {
-        return applyTransformers(code, id, "post");
-      },
-      transformIndexHtml(code) {
-        applyTransformers(code, "index.html", "post").then((t) => t?.code);
+    transformIndexHtml: {
+      enforce: enforce === "default" ? void 0 : enforce,
+      transform(code) {
+        return applyTransformers(ctx, code, "index.html", enforce).then((t) => t?.code);
       }
     }
-  ];
+  }));
 }
 
 const _dirname = typeof __dirname !== "undefined" ? __dirname : dirname(fileURLToPath(import.meta.url));
@@ -940,13 +955,13 @@ function UnocssPlugin(configOrPath, defaults = {}) {
   const mode = inlineConfig.mode ?? "global";
   const plugins = [
     ConfigHMRPlugin(ctx),
-    ...initTransformerPlugins(ctx),
+    ...createTransformerPlugins(ctx),
     ...createDevtoolsPlugin(ctx)
   ];
   if (inlineConfig.inspector !== false)
     plugins.push(UnocssInspector(ctx));
   if (mode === "per-module") {
-    plugins.push(PerModuleModePlugin(ctx));
+    plugins.push(...PerModuleModePlugin(ctx));
   } else if (mode === "vue-scoped") {
     plugins.push(VueScopedPlugin(ctx));
   } else if (mode === "svelte-scoped") {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unocss/vite",
-  "version": "0.43.2",
+  "version": "0.44.2",
   "description": "The Vite plugin for UnoCSS",
   "author": "Anthony Fu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -42,16 +42,17 @@
     "vite": "^2.9.0 || ^3.0.0-0"
   },
   "dependencies": {
+    "@ampproject/remapping": "^2.2.0",
     "@rollup/pluginutils": "^4.2.1",
-    "@unocss/config": "0.43.2",
-    "@unocss/core": "0.43.2",
-    "@unocss/inspector": "0.43.2",
-    "@unocss/scope": "0.43.2",
-    "@unocss/transformer-directives": "0.43.2",
+    "@unocss/config": "0.44.2",
+    "@unocss/core": "0.44.2",
+    "@unocss/inspector": "0.44.2",
+    "@unocss/scope": "0.44.2",
+    "@unocss/transformer-directives": "0.44.2",
     "magic-string": "^0.26.2"
   },
   "devDependencies": {
-    "@unocss/shared-integration": "0.43.2",
+    "@unocss/shared-integration": "0.44.2",
     "vite": "^2.9.12"
   },
   "scripts": {