@unocss/vite 0.48.3 → 0.48.5

package/README.md

@@ -10,11 +10,11 @@ npm i -D unocss
 
 ```ts
 // vite.config.ts
-import Unocss from 'unocss/vite'
+import UnoCSS from 'unocss/vite'
 
 export default {
   plugins: [
-    Unocss({ /* options */ }),
+    UnoCSS({ /* options */ }),
   ],
 }
 ```
@@ -37,11 +37,11 @@ npm i -D @unocss/vite
 
 ```ts
 // vite.config.ts
-import Unocss from '@unocss/vite'
+import UnoCSS from '@unocss/vite'
 
 export default {
   plugins: [
-    Unocss({
+    UnoCSS({
       presets: [
         /* no presets by default */
       ],
@@ -111,12 +111,12 @@ If you're using `@vitejs/plugin-react`:
 ```ts
 // vite.config.js
 import react from '@vitejs/plugin-react'
-import Unocss from 'unocss/vite'
+import UnoCSS from 'unocss/vite'
 
 export default {
   plugins: [
     react(),
-    Unocss({
+    UnoCSS({
       /* options */
     }),
   ],
@@ -128,12 +128,12 @@ or if you're using `@vitejs/plugin-react-refresh`:
 ```ts
 // vite.config.js
 import reactRefresh from '@vitejs/plugin-react-refresh'
-import Unocss from 'unocss/vite'
+import UnoCSS from 'unocss/vite'
 
 export default {
   plugins: [
     reactRefresh(),
-    Unocss({
+    UnoCSS({
       /* options */
     }),
   ],
@@ -147,11 +147,11 @@ If you are using `@vitejs/plugin-react` with `@unocss/preset-attributify`, you m
 ```ts
 // vite.config.js
 import react from '@vitejs/plugin-react'
-import Unocss from 'unocss/vite'
+import UnoCSS from 'unocss/vite'
 
 export default {
   plugins: [
-    Unocss({
+    UnoCSS({
       /* options */
     }),
     react(),
@@ -168,12 +168,12 @@ If you're using `@preact/preset-vite`:
 ```ts
 // vite.config.js
 import preact from '@preact/preset-vite'
-import Unocss from 'unocss/vite'
+import UnoCSS from 'unocss/vite'
 
 export default {
   plugins: [
     preact(),
-    Unocss({
+    UnoCSS({
       /* options */
     }),
   ],
@@ -185,12 +185,12 @@ or if you're using `@prefresh/vite`:
 ```ts
 // vite.config.js
 import prefresh from '@prefresh/vite'
-import Unocss from 'unocss/vite'
+import UnoCSS from 'unocss/vite'
 
 export default {
   plugins: [
     prefresh(),
-    Unocss({
+    UnoCSS({
       /* options */
     }),
   ],
@@ -204,11 +204,11 @@ If you are using `@preact/preset-vite` with `@unocss/preset-attributify`, you mu
 ```ts
 // vite.config.js
 import preact from '@preact/preset-vite'
-import Unocss from 'unocss/vite'
+import UnoCSS from 'unocss/vite'
 
 export default {
   plugins: [
-    Unocss({
+    UnoCSS({
       /* options */
     }),
     preact(),
@@ -224,17 +224,17 @@ You must add the plugin before `@sveltejs/vite-plugin-svelte`.
 
 To support `class:foo` and `class:foo={bar}` add the plugin and configure `extractorSvelte` on `extractors` option.
 
-You can use simple rules with `class:`, for example `class:bg-red-500={foo}` or using `shorcuts` to include multiples rules, see `src/App.svelte` on linked example project below.
+You can use simple rules with `class:`, for example `class:bg-red-500={foo}` or using `shortcuts` to include multiples rules, see `src/App.svelte` on linked example project below.
 
 ```ts
 // vite.config.js
 import { svelte } from '@sveltejs/vite-plugin-svelte'
-import Unocss from 'unocss/vite'
+import UnoCSS from 'unocss/vite'
 import { extractorSvelte } from '@unocss/core'
 
 export default {
   plugins: [
-    Unocss({
+    UnoCSS({
       extractors: [extractorSvelte],
       /* more options */
     }),
@@ -312,11 +312,11 @@ Don't forget to remove the import for `uno.css` since the `shadow-dom` mode will
 
 ```ts
 // vite.config.js
-import Unocss from 'unocss/vite'
+import UnoCSS from 'unocss/vite'
 
 export default {
   plugins: [
-    Unocss({
+    UnoCSS({
       mode: 'shadow-dom',
       /* more options */
     }),
@@ -363,11 +363,11 @@ The plugin uses `nth-of-type` to avoid collisions with multiple parts in the sam
 
 ```ts
 // vite.config.js
-import Unocss from 'unocss/vite'
+import UnoCSS from 'unocss/vite'
 
 export default {
   plugins: [
-    Unocss({
+    UnoCSS({
       mode: 'shadow-dom',
       shortcuts: [
         { 'cool-blue': 'bg-blue-500 text-white' },
@@ -413,12 +413,12 @@ template.innerHTML = `
 ```ts
 // vite.config.js
 import solidPlugin from 'vite-plugin-solid'
-import Unocss from 'unocss/vite'
+import UnoCSS from 'unocss/vite'
 
 export default {
   plugins: [
     solidPlugin(),
-    Unocss({
+    UnoCSS({
       /* options */
     }),
   ],
@@ -435,12 +435,12 @@ You need to add the `vite-plugin-elm` plugin before UnoCSS's plugin.
 // vite.config.js
 import { defineConfig } from 'vite'
 import elmPlugin from 'vite-plugin-elm'
-import Unocss from 'unocss/vite'
+import UnoCSS from 'unocss/vite'
 
 export default defineConfig({
   plugins: [
     elmPlugin(),
-    Unocss({
+    UnoCSS({
       /* options */
     }),
   ],

package/dist/index.cjs

@@ -516,7 +516,7 @@ function GlobalModeBuildPlugin(ctx) {
 const WARN_TIMEOUT = 2e4;
 const WS_EVENT_PREFIX = "unocss:hmr";
 const HASH_LENGTH = 6;
-function GlobalModeDevPlugin({ uno, tokens, tasks, flushTasks, affectedModules, onInvalidate, extract, filter }) {
+function GlobalModeDevPlugin({ uno, tokens, tasks, flushTasks, affectedModules, onInvalidate, extract, filter, getConfig }) {
   const servers = [];
   let base = "";
   const entries = /* @__PURE__ */ new Set();
@@ -652,16 +652,24 @@ function GlobalModeDevPlugin({ uno, tokens, tasks, flushTasks, affectedModules,
         return env.command === "serve" && !config.build?.ssr;
       },
       enforce: "post",
-      transform(code, id) {
+      async transform(code, id) {
         const layer = resolveLayer(getPath(id));
         if (layer && code.includes("import.meta.hot")) {
-          return `${code}
-if (import.meta.hot) {
-  try { await import.meta.hot.send('${WS_EVENT_PREFIX}', ['${layer}', __vite__css.slice(2,${2 + HASH_LENGTH})]); }
-  catch (e) { console.warn('[unocss-hmr]', e) }
-  if (!import.meta.url.includes('?'))
-    await new Promise(resolve => setTimeout(resolve, 100))
-}`;
+          let hmr = `
+try {
+  await import.meta.hot.send('${WS_EVENT_PREFIX}', ['${layer}', __vite__css.slice(2,${2 + HASH_LENGTH})]);
+} catch (e) {
+  console.warn('[unocss-hmr]', e)
+}
+if (!import.meta.url.includes('?'))
+  await new Promise(resolve => setTimeout(resolve, 100))`;
+          const config = await getConfig();
+          if (config.hmrTopLevelAwait === false)
+            hmr = `;(async function() {${hmr}
+})()`;
+          hmr = `
+if (import.meta.hot) {${hmr}}`;
+          return code + hmr;
         }
       }
     }

package/dist/index.d.ts

@@ -30,16 +30,27 @@ interface VitePluginConfig<Theme extends {} = {}> extends UserConfig<Theme> {
      */
     transformCSS?: boolean | 'pre' | 'post';
     /**
+     * Make the generated css processed by postcss (https://vitejs.dev/guide/features.html#postcss)
      *
-     * make the generated css processed by postcss (https://vitejs.dev/guide/features.html#postcss)
      * @default true
      */
     postcss?: boolean;
+    /**
+     * Use top level await in HMR code to avoid FOUC on dev time.
+     *
+     * You usually don't need to disable this, unless you are developing on
+     * a browser that does not support top level await.
+     *
+     * This will only affect on dev time.
+     *
+     * @default true
+     */
+    hmrTopLevelAwait?: boolean;
 }
 
 declare function ChunkModeBuildPlugin({ uno, filter }: UnocssPluginContext): Plugin;
 
-declare function GlobalModeDevPlugin({ uno, tokens, tasks, flushTasks, affectedModules, onInvalidate, extract, filter }: UnocssPluginContext): Plugin[];
+declare function GlobalModeDevPlugin({ uno, tokens, tasks, flushTasks, affectedModules, onInvalidate, extract, filter, getConfig }: UnocssPluginContext): Plugin[];
 
 declare function GlobalModeBuildPlugin(ctx: UnocssPluginContext<VitePluginConfig>): Plugin[];
 

package/dist/index.mjs

@@ -503,7 +503,7 @@ function GlobalModeBuildPlugin(ctx) {
 const WARN_TIMEOUT = 2e4;
 const WS_EVENT_PREFIX = "unocss:hmr";
 const HASH_LENGTH = 6;
-function GlobalModeDevPlugin({ uno, tokens, tasks, flushTasks, affectedModules, onInvalidate, extract, filter }) {
+function GlobalModeDevPlugin({ uno, tokens, tasks, flushTasks, affectedModules, onInvalidate, extract, filter, getConfig }) {
   const servers = [];
   let base = "";
   const entries = /* @__PURE__ */ new Set();
@@ -639,16 +639,24 @@ function GlobalModeDevPlugin({ uno, tokens, tasks, flushTasks, affectedModules,
         return env.command === "serve" && !config.build?.ssr;
       },
       enforce: "post",
-      transform(code, id) {
+      async transform(code, id) {
         const layer = resolveLayer(getPath(id));
         if (layer && code.includes("import.meta.hot")) {
-          return `${code}
-if (import.meta.hot) {
-  try { await import.meta.hot.send('${WS_EVENT_PREFIX}', ['${layer}', __vite__css.slice(2,${2 + HASH_LENGTH})]); }
-  catch (e) { console.warn('[unocss-hmr]', e) }
-  if (!import.meta.url.includes('?'))
-    await new Promise(resolve => setTimeout(resolve, 100))
-}`;
+          let hmr = `
+try {
+  await import.meta.hot.send('${WS_EVENT_PREFIX}', ['${layer}', __vite__css.slice(2,${2 + HASH_LENGTH})]);
+} catch (e) {
+  console.warn('[unocss-hmr]', e)
+}
+if (!import.meta.url.includes('?'))
+  await new Promise(resolve => setTimeout(resolve, 100))`;
+          const config = await getConfig();
+          if (config.hmrTopLevelAwait === false)
+            hmr = `;(async function() {${hmr}
+})()`;
+          hmr = `
+if (import.meta.hot) {${hmr}}`;
+          return code + hmr;
         }
       }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unocss/vite",
-  "version": "0.48.3",
+  "version": "0.48.5",
   "description": "The Vite plugin for UnoCSS",
   "author": "Anthony Fu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -44,17 +44,17 @@
   "dependencies": {
     "@ampproject/remapping": "^2.2.0",
     "@rollup/pluginutils": "^5.0.2",
-    "@unocss/config": "0.48.3",
-    "@unocss/core": "0.48.3",
-    "@unocss/inspector": "0.48.3",
-    "@unocss/scope": "0.48.3",
-    "@unocss/transformer-directives": "0.48.3",
+    "@unocss/config": "0.48.5",
+    "@unocss/core": "0.48.5",
+    "@unocss/inspector": "0.48.5",
+    "@unocss/scope": "0.48.5",
+    "@unocss/transformer-directives": "0.48.5",
     "chokidar": "^3.5.3",
     "fast-glob": "^3.2.12",
     "magic-string": "^0.27.0"
   },
   "devDependencies": {
-    "@unocss/shared-integration": "0.48.3",
+    "@unocss/shared-integration": "0.48.5",
     "vite": "^4.0.4"
   },
   "scripts": {