fix(webpack): improve webpack plugin

bench/package.json

@@ -5,11 +5,11 @@
   "devDependencies": {
     "@unocss/vite": "workspace:*",
     "@vitejs/plugin-vue": "^3.0.1",
-    "autoprefixer": "^10.4.7",
+    "autoprefixer": "^10.4.8",
     "fs-extra": "^10.1.0",
     "local-pkg": "^0.4.2",
     "postcss": "^8.4.14",
-    "tailwindcss": "^3.1.6",
+    "tailwindcss": "^3.1.7",
     "unocss": "workspace:*",
     "vite": "^3.0.4",
     "vite-plugin-windicss": "^1.8.7",

examples/next/package.json

@@ -15,13 +15,13 @@
   },
   "devDependencies": {
     "@iconify-json/carbon": "^1.1.7",
-    "@types/node": "18.6.2",
+    "@types/node": "18.6.3",
     "@types/react": "18.0.15",
     "@types/react-dom": "18.0.6",
     "@unocss/preset-attributify": "link:../../packages/preset-attributify",
     "@unocss/reset": "link:../../packages/reset",
     "@unocss/webpack": "link:../../packages/webpack",
-    "eslint": "8.20.0",
+    "eslint": "8.21.0",
     "eslint-config-next": "12.2.3",
     "typescript": "4.7.4",
     "unocss": "link:../../packages/unocss"

examples/quasar/package.json

@@ -12,14 +12,14 @@
     "test": "echo \"No test specified\" && exit 0"
   },
   "dependencies": {
-    "@quasar/extras": "^1.15.0",
+    "@quasar/extras": "^1.15.1",
     "quasar": "^2.6.0",
     "vue": "^3.2.37",
     "vue-router": "^4.1.3"
   },
   "devDependencies": {
-    "@quasar/app-vite": "^1.0.5",
-    "autoprefixer": "^10.4.7",
+    "@quasar/app-vite": "^1.0.6",
+    "autoprefixer": "^10.4.8",
     "typescript": "^4.7.4",
     "unocss": "link:../../packages/unocss"
   }

examples/remix/package.json

@@ -15,15 +15,15 @@
     "start": "remix-serve build"
   },
   "dependencies": {
-    "@remix-run/react": "^1.6.5",
-    "@remix-run/serve": "^1.6.5",
+    "@remix-run/react": "^1.6.7",
+    "@remix-run/serve": "^1.6.7",
     "@unocss/reset": "link:../../packages/reset",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "remix": "^1.6.5"
+    "remix": "^1.6.7"
   },
   "devDependencies": {
-    "@remix-run/dev": "^1.6.5",
+    "@remix-run/dev": "^1.6.7",
     "@types/react": "^18.0.15",
     "@types/react-dom": "^18.0.6",
     "@unocss/cli": "link:../../packages/cli",

examples/sveltekit/package.json

@@ -11,7 +11,7 @@
     "lint": "eslint --ignore-path .gitignore ."
   },
   "devDependencies": {
-    "@iconify-json/logos": "^1.1.13",
+    "@iconify-json/logos": "^1.1.14",
     "@iconify/utils": "^1.0.33",
     "@sveltejs/adapter-static": "next",
     "@sveltejs/kit": "next",

examples/vite-elm/package.json

@@ -10,13 +10,13 @@
     "test": "elm-test-rs"
   },
   "devDependencies": {
-    "@iconify-json/logos": "^1.1.13",
+    "@iconify-json/logos": "^1.1.14",
     "@unocss/core": "link:../../packages/core",
     "@unocss/preset-icons": "link:../../packages/presets-icons",
     "@unocss/preset-uno": "link:../../packages/presets-uno",
     "elm-tooling": "^1.8.0",
     "unocss": "link:../../packages/unocss",
     "vite": "^3.0.4",
-    "vite-plugin-elm": "^2.6.1"
+    "vite-plugin-elm": "^2.7.2"
   }
 }

examples/vite-lit/package.json

@@ -18,7 +18,7 @@
     "lit": "^2.2.8"
   },
   "devDependencies": {
-    "@iconify-json/logos": "^1.1.13",
+    "@iconify-json/logos": "^1.1.14",
     "@unocss/core": "link:../../packages/core",
     "@unocss/preset-attributify": "link:../../packages/preset-attributify",
     "@unocss/preset-icons": "link:../../packages/presets-icons",

examples/vite-preact/package.json

@@ -12,7 +12,7 @@
     "preact": "^10.10.0"
   },
   "devDependencies": {
-    "@iconify-json/logos": "^1.1.13",
+    "@iconify-json/logos": "^1.1.14",
     "@preact/preset-vite": "^2.3.0",
     "@prefresh/vite": "^2.2.8",
     "@unocss/core": "link:../../packages/core",

examples/vite-react/package.json

@@ -13,7 +13,7 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@iconify-json/logos": "^1.1.13",
+    "@iconify-json/logos": "^1.1.14",
     "@types/react": "^18.0.15",
     "@types/react-dom": "^18.0.6",
     "@unocss/core": "link:../../packages/core",

examples/vite-solid/package.json

@@ -11,7 +11,7 @@
     "solid-js": "^1.4.8"
   },
   "devDependencies": {
-    "@iconify-json/logos": "^1.1.13",
+    "@iconify-json/logos": "^1.1.14",
     "@unocss/core": "link:../../packages/core",
     "@unocss/preset-attributify": "link:../../packages/preset-attributify",
     "@unocss/preset-icons": "link:../../packages/presets-icons",

examples/vite-svelte/package.json

@@ -9,7 +9,7 @@
     "check": "svelte-check --tsconfig ./tsconfig.json"
   },
   "devDependencies": {
-    "@iconify-json/logos": "^1.1.13",
+    "@iconify-json/logos": "^1.1.14",
     "@sveltejs/vite-plugin-svelte": "^1.0.1",
     "@tsconfig/svelte": "^3.0.0",
     "@unocss/core": "link:../../packages/core",

examples/vite-watch-mode/package.json

@@ -11,7 +11,7 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@iconify-json/logos": "^1.1.13",
+    "@iconify-json/logos": "^1.1.14",
     "@types/react": "^18.0.15",
     "@types/react-dom": "^18.0.6",
     "@unocss/core": "link:../../packages/core",

examples/vue-cli/package.json

@@ -6,7 +6,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "core-js": "^3.24.0",
+    "core-js": "^3.24.1",
     "vue": "^3.2.37"
   },
   "devDependencies": {

interactive/package.json

@@ -13,7 +13,7 @@
     "@unocss/autocomplete": "workspace:*",
     "@unocss/nuxt": "workspace:*",
     "@unocss/shared-docs": "workspace:*",
-    "@vueuse/nuxt": "^9.0.2",
+    "@vueuse/nuxt": "^9.1.0",
     "esno": "^0.16.3",
     "fs-extra": "^10.1.0",
     "fuse.js": "^6.6.2",

package.json

@@ -25,7 +25,7 @@
     "@iconify-json/carbon": "^1.1.7",
     "@iconify-json/iconoir": "^1.1.8",
     "@iconify-json/la": "^1.1.2",
-    "@iconify-json/logos": "^1.1.13",
+    "@iconify-json/logos": "^1.1.14",
     "@iconify-json/mdi": "^1.1.29",
     "@iconify-json/ph": "^1.1.2",
     "@iconify-json/ri": "^1.1.3",
@@ -40,7 +40,7 @@
     "@types/js-yaml": "^4.0.5",
     "@types/lz-string": "^1.3.34",
     "@types/markdown-it-link-attributes": "^3.0.1",
-    "@types/node": "^18.6.2",
+    "@types/node": "^18.6.3",
     "@types/prettier": "^2.6.4",
     "@types/react": "^18.0.15",
     "@types/ws": "^8.5.3",
@@ -63,14 +63,14 @@
     "@unocss/vite": "workspace:*",
     "@unocss/webpack": "workspace:*",
     "@vitejs/plugin-vue": "^3.0.1",
-    "@vitest/ui": "^0.19.1",
-    "@vueuse/core": "^9.0.2",
-    "@vueuse/math": "^9.0.2",
+    "@vitest/ui": "^0.20.3",
+    "@vueuse/core": "^9.1.0",
+    "@vueuse/math": "^9.1.0",
     "brotli-size": "^4.0.0",
     "bumpp": "^8.2.1",
     "codemirror": "^5.65.6",
     "codemirror-theme-vars": "^0.1.1",
-    "eslint": "^8.20.0",
+    "eslint": "^8.21.0",
     "esno": "^0.16.3",
     "execa": "^6.1.0",
     "fast-glob": "^3.2.11",
@@ -82,24 +82,24 @@
     "msw": "^0.44.2",
     "nuxt": "3.0.0-rc.6",
     "nuxt-tsconfig-stub": "^0.0.2",
-    "pnpm": "7.5.0",
+    "pnpm": "7.8.0",
     "prettier": "^2.7.1",
     "react": "^18.2.0",
     "rollup": "^2.77.2",
     "semver": "^7.3.7",
     "simple-git-hooks": "^2.8.0",
     "splitpanes": "^3.1.1",
     "terser": "^5.14.2",
-    "tsup": "^6.2.0",
+    "tsup": "^6.2.1",
     "typescript": "^4.7.4",
     "unbuild": "^0.7.6",
     "unocss": "workspace:*",
     "unplugin-auto-import": "^0.10.3",
-    "unplugin-vue-components": "^0.21.2",
+    "unplugin-vue-components": "^0.22.0",
     "vite": "3.0.4",
     "vite-plugin-inspect": "^0.6.0",
     "vite-plugin-pages": "^0.25.0",
-    "vitest": "^0.19.1",
+    "vitest": "^0.20.3",
     "vue": "^3.2.37",
     "vue-router": "^4.1.3"
   },

packages/autocomplete/package.json

@@ -36,7 +36,7 @@
     "stub": "unbuild --stub"
   },
   "dependencies": {
-    "lru-cache": "^7.13.1"
+    "lru-cache": "^7.13.2"
   },
   "devDependencies": {
     "@unocss/core": "workspace:*"

packages/cli/package.json

@@ -51,7 +51,7 @@
     "colorette": "^2.0.19",
     "consola": "^2.15.3",
     "fast-glob": "^3.2.11",
-    "pathe": "^0.3.2",
+    "pathe": "^0.3.3",
     "perfect-debounce": "^0.1.3"
   }
 }

packages/inspector/client/auto-imports.d.ts

@@ -189,6 +189,7 @@ declare global {
   const usePreferredColorScheme: typeof import('@vueuse/core')['usePreferredColorScheme']
   const usePreferredDark: typeof import('@vueuse/core')['usePreferredDark']
   const usePreferredLanguages: typeof import('@vueuse/core')['usePreferredLanguages']
+  const usePreferredReducedMotion: typeof import('@vueuse/core')['usePreferredReducedMotion']
   const useRafFn: typeof import('@vueuse/core')['useRafFn']
   const useRefHistory: typeof import('@vueuse/core')['useRefHistory']
   const useResizeObserver: typeof import('@vueuse/core')['useResizeObserver']
@@ -223,6 +224,8 @@ declare global {
   const useTimeoutPoll: typeof import('@vueuse/core')['useTimeoutPoll']
   const useTimestamp: typeof import('@vueuse/core')['useTimestamp']
   const useTitle: typeof import('@vueuse/core')['useTitle']
+  const useToNumber: typeof import('@vueuse/core')['useToNumber']
+  const useToString: typeof import('@vueuse/core')['useToString']
   const useToggle: typeof import('@vueuse/core')['useToggle']
   const useTransition: typeof import('@vueuse/core')['useTransition']
   const useUrlSearchParams: typeof import('@vueuse/core')['useUrlSearchParams']

packages/shared-integration/src/utils.ts

@@ -1,3 +1,9 @@
+import { cssIdRE } from '@unocss/core'
+
 export function getPath(id: string) {
   return id.replace(/\?.*$/, '')
 }
+
+export function isCssId(id: string) {
+  return cssIdRE.test(id)
+}

packages/vscode/package.json

@@ -73,7 +73,7 @@
     "esno": "^0.16.3",
     "jiti": "^1.14.0",
     "prettier": "^2.7.1",
-    "tsup": "^6.2.0",
+    "tsup": "^6.2.1",
     "unconfig": "^0.3.5"
   }
 }

packages/vscode/src/annotation.ts

@@ -1,9 +1,9 @@
 import path from 'path'
 import type { DecorationOptions, ExtensionContext, StatusBarItem } from 'vscode'
 import { DecorationRangeBehavior, MarkdownString, Range, window, workspace } from 'vscode'
-import { INCLUDE_COMMENT_IDE, getMatchedPositions } from './integration'
+import { INCLUDE_COMMENT_IDE, getMatchedPositions, isCssId } from './integration'
 import { log } from './log'
-import { getColorsMap, getPrettiedMarkdown, isCssId, isSubdir, throttle } from './utils'
+import { getColorsMap, getPrettiedMarkdown, isSubdir, throttle } from './utils'
 import type { ContextLoader } from './contextLoader'
 
 export async function registerAnnotations(

packages/vscode/src/autocomplete.ts

@@ -3,9 +3,10 @@ import { createAutocomplete } from '@unocss/autocomplete'
 import type { CompletionItemProvider, ExtensionContext } from 'vscode'
 import { CompletionItem, CompletionItemKind, CompletionList, MarkdownString, Range, languages } from 'vscode'
 import type { UnoGenerator, UnocssPluginContext } from '@unocss/core'
-import { body2ColorValue, getPrettiedCSS, getPrettiedMarkdown, isCssId, isSubdir } from './utils'
+import { body2ColorValue, getPrettiedCSS, getPrettiedMarkdown, isSubdir } from './utils'
 import { log } from './log'
 import type { ContextLoader } from './contextLoader'
+import { isCssId } from './integration'
 
 const languageIds = [
   'erb',

packages/vscode/src/contextLoader.ts

@@ -7,8 +7,8 @@ import { sourceObjectFields, sourcePluginFactory } from 'unconfig/presets'
 import presetUno from '@unocss/preset-uno'
 import { resolveOptions as resolveNuxtOptions } from '../../nuxt/src/options'
 import { createNanoEvents } from '../../core/src/utils/events'
-import { createContext } from './integration'
-import { isCssId, isSubdir } from './utils'
+import { createContext, isCssId } from './integration'
+import { isSubdir } from './utils'
 import { log } from './log'
 
 export class ContextLoader {

packages/vscode/src/utils.ts

@@ -1,6 +1,5 @@
 import path from 'path'
 import type { GenerateResult, UnoGenerator } from '@unocss/core'
-import { cssIdRE } from '@unocss/core'
 import prettier from 'prettier/standalone'
 import parserCSS from 'prettier/parser-postcss'
 import type { Theme } from '@unocss/preset-mini'
@@ -94,10 +93,6 @@ export function getColorsMap(uno: UnoGenerator, result: GenerateResult) {
   return colorsMap
 }
 
-export function isCssId(id: string) {
-  return cssIdRE.test(id)
-}
-
 export function isSubdir(parent: string, child: string) {
   const relative = path.relative(parent, child)
   return relative && !relative.startsWith('..') && !path.isAbsolute(relative)

packages/webpack/package.json

@@ -45,7 +45,7 @@
     "@unocss/config": "workspace:*",
     "@unocss/core": "workspace:*",
     "magic-string": "^0.26.2",
-    "unplugin": "^0.8.0",
+    "unplugin": "^0.8.1",
     "webpack-sources": "^3.2.3"
   },
   "devDependencies": {

packages/webpack/src/index.ts

@@ -6,7 +6,7 @@ import { createContext } from '../../shared-integration/src/context'
 import { getHash } from '../../shared-integration/src/hash'
 import { HASH_PLACEHOLDER_RE, LAYER_MARK_ALL, LAYER_PLACEHOLDER_RE, getHashPlaceholder, getLayerPlaceholder, resolveId, resolveLayer } from '../../shared-integration/src/layers'
 import { applyTransformers } from '../../shared-integration/src/transformers'
-import { getPath } from '../../shared-integration/src/utils'
+import { getPath, isCssId } from '../../shared-integration/src/utils'
 
 export interface WebpackPluginOptions<Theme extends {} = {}> extends UserConfig<Theme> {}
 
@@ -53,6 +53,8 @@ export default function WebpackPlugin<Theme extends {}>(
       },
       async transform(code, id) {
         const result = await applyTransformers(ctx, code, id, 'pre')
+        if (isCssId(id))
+          return result
         if (result == null)
           tasks.push(extract(code, id))
         else
@@ -61,6 +63,8 @@ export default function WebpackPlugin<Theme extends {}>(
       },
       resolveId(id) {
         const entry = resolveId(id)
+        if (entry === id)
+          return
         if (entry) {
           let query = ''
           const queryIndex = id.indexOf('?')
@@ -121,11 +125,17 @@ export default function WebpackPlugin<Theme extends {}>(
       },
     } as Required<ResolvedUnpluginOptions>
 
+    let lastTokenSize = tokens.size
     async function updateModules() {
       if (!plugin.__vfsModules)
         return
 
+      await Promise.all(tasks)
       const result = await uno.generate(tokens)
+      if (lastTokenSize === tokens.size)
+        return
+
+      lastTokenSize = tokens.size
       Array.from(plugin.__vfsModules)
         .forEach((id) => {
           const path = id.slice(plugin.__virtualModulePrefix.length).replace(/\\/g, '/')