@unocss/vite 0.43.1 → 0.44.1

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

@@ -326,9 +326,10 @@ function GlobalModeBuildPlugin({ uno, ready, extract, tokens, filter, getConfig
       },
       enforce: "post",
       async generateBundle(options, bundle) {
-        const files = Object.keys(bundle);
-        const cssFiles = files.filter((i) => i.endsWith(".css"));
-        if (!cssFiles.length)
+        const files = Object.entries(bundle);
+        const cssFiles = files.filter((i) => i[0].endsWith(".css"));
+        const jsFiles = files.filter((i) => i[0].endsWith(".js"));
+        if (!cssFiles.length && !jsFiles.length)
           return;
         if (!vfsLayers.size) {
           const msg = "[unocss] entry module not found, have you add `import 'uno.css'` in your main entry?";
@@ -337,13 +338,23 @@ function GlobalModeBuildPlugin({ uno, ready, extract, tokens, filter, getConfig
         }
         const result = await generateAll();
         let replaced = false;
-        for (const file of cssFiles) {
-          const chunk = bundle[file];
+        for (const [, chunk] of cssFiles) {
           if (chunk.type === "asset" && typeof chunk.source === "string") {
             const css = chunk.source.replace(HASH_PLACEHOLDER_RE, "");
             chunk.source = await replaceAsync(css, LAYER_PLACEHOLDER_RE, async (_, __, layer) => {
               replaced = true;
-              return await applyCssTransform(layer === LAYER_MARK_ALL ? result.getLayers(void 0, Array.from(vfsLayers)) : result.getLayer(layer) || "", `${chunk.fileName}.css`, options.dir);
+              const css2 = layer === LAYER_MARK_ALL ? result.getLayers(void 0, Array.from(vfsLayers)) : result.getLayer(layer) || "";
+              return await applyCssTransform(css2, `${chunk.fileName}.css`, options.dir);
+            });
+          }
+        }
+        for (const [, chunk] of jsFiles) {
+          if (chunk.type === "chunk" && typeof chunk.code === "string") {
+            const js = chunk.code.replace(HASH_PLACEHOLDER_RE, "");
+            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.replace(/\n/g, "").replace(/(?<!\\)(['"])/g, "\\$1");
             });
           }
         }
@@ -517,44 +528,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 }) {
@@ -945,7 +979,7 @@ function UnocssPlugin(configOrPath, defaults = {}) {
   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

@@ -316,9 +316,10 @@ function GlobalModeBuildPlugin({ uno, ready, extract, tokens, filter, getConfig
       },
       enforce: "post",
       async generateBundle(options, bundle) {
-        const files = Object.keys(bundle);
-        const cssFiles = files.filter((i) => i.endsWith(".css"));
-        if (!cssFiles.length)
+        const files = Object.entries(bundle);
+        const cssFiles = files.filter((i) => i[0].endsWith(".css"));
+        const jsFiles = files.filter((i) => i[0].endsWith(".js"));
+        if (!cssFiles.length && !jsFiles.length)
           return;
         if (!vfsLayers.size) {
           const msg = "[unocss] entry module not found, have you add `import 'uno.css'` in your main entry?";
@@ -327,13 +328,23 @@ function GlobalModeBuildPlugin({ uno, ready, extract, tokens, filter, getConfig
         }
         const result = await generateAll();
         let replaced = false;
-        for (const file of cssFiles) {
-          const chunk = bundle[file];
+        for (const [, chunk] of cssFiles) {
           if (chunk.type === "asset" && typeof chunk.source === "string") {
             const css = chunk.source.replace(HASH_PLACEHOLDER_RE, "");
             chunk.source = await replaceAsync(css, LAYER_PLACEHOLDER_RE, async (_, __, layer) => {
               replaced = true;
-              return await applyCssTransform(layer === LAYER_MARK_ALL ? result.getLayers(void 0, Array.from(vfsLayers)) : result.getLayer(layer) || "", `${chunk.fileName}.css`, options.dir);
+              const css2 = layer === LAYER_MARK_ALL ? result.getLayers(void 0, Array.from(vfsLayers)) : result.getLayer(layer) || "";
+              return await applyCssTransform(css2, `${chunk.fileName}.css`, options.dir);
+            });
+          }
+        }
+        for (const [, chunk] of jsFiles) {
+          if (chunk.type === "chunk" && typeof chunk.code === "string") {
+            const js = chunk.code.replace(HASH_PLACEHOLDER_RE, "");
+            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.replace(/\n/g, "").replace(/(?<!\\)(['"])/g, "\\$1");
             });
           }
         }
@@ -507,44 +518,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 }) {
@@ -935,7 +969,7 @@ function UnocssPlugin(configOrPath, defaults = {}) {
   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.1",
+  "version": "0.44.1",
   "description": "The Vite plugin for UnoCSS",
   "author": "Anthony Fu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -43,15 +43,15 @@
   },
   "dependencies": {
     "@rollup/pluginutils": "^4.2.1",
-    "@unocss/config": "0.43.1",
-    "@unocss/core": "0.43.1",
-    "@unocss/inspector": "0.43.1",
-    "@unocss/scope": "0.43.1",
-    "@unocss/transformer-directives": "0.43.1",
+    "@unocss/config": "0.44.1",
+    "@unocss/core": "0.44.1",
+    "@unocss/inspector": "0.44.1",
+    "@unocss/scope": "0.44.1",
+    "@unocss/transformer-directives": "0.44.1",
     "magic-string": "^0.26.2"
   },
   "devDependencies": {
-    "@unocss/shared-integration": "0.43.1",
+    "@unocss/shared-integration": "0.44.1",
     "vite": "^2.9.12"
   },
   "scripts": {