fix: make resolve & load order insensitive

packages/shared-integration/src/layers.ts

@@ -8,19 +8,19 @@ export function resolveId(id: string) {
     const match = id.match(alias)
     if (match) {
       return match[1]
-        ? {
-            id: `/__uno_${match[1]}.css`,
-            layer: match[1],
-          }
-        : {
-            id: '/__uno.css',
-            layer: LAYER_MARK_ALL,
-          }
+        ? `/__uno_${match[1]}.css`
+        : '/__uno.css'
     }
   }
 }
 
-export const RESOLVED_ID_RE = /\/__uno(_.*?)?\.css$/
+export const RESOLVED_ID_RE = /\/__uno(?:(_.*?))?\.css$/
+
+export function resolveLayer(id: string) {
+  const match = id.match(RESOLVED_ID_RE)
+  if (match)
+    return match[1] || LAYER_MARK_ALL
+}
 
 export const LAYER_PLACEHOLDER_RE = /(\\?")?#--unocss--\s*{\s*layer\s*:\s*(.+?);?\s*}/g
 export function getLayerPlaceholder(layer: string) {

packages/vite/src/modes/global/build.ts

@@ -10,11 +10,12 @@ import {
   getPath,
   replaceAsync,
   resolveId,
+  resolveLayer,
 } from '../../integration'
 import type { VitePluginConfig } from '../../types'
 
 export function GlobalModeBuildPlugin({ uno, ready, extract, tokens, filter, getConfig }: UnocssPluginContext<VitePluginConfig>): Plugin[] {
-  const vfsLayerMap = new Map<string, string>()
+  const vfsLayers = new Set<string>()
   const layerImporterMap = new Map<string, string>()
   let tasks: Promise<any>[] = []
 
@@ -75,14 +76,17 @@ export function GlobalModeBuildPlugin({ uno, ready, extract, tokens, filter, get
       resolveId(id, importer) {
         const entry = resolveId(id)
         if (entry) {
-          vfsLayerMap.set(entry.id, entry.layer)
-          if (importer)
-            layerImporterMap.set(importer, entry.id)
-          return entry.id
+          const layer = resolveLayer(entry)
+          if (layer) {
+            vfsLayers.add(layer)
+            if (importer)
+              layerImporterMap.set(importer, entry)
+          }
+          return entry
         }
       },
       load(id) {
-        const layer = vfsLayerMap.get(getPath(id))
+        const layer = resolveLayer(getPath(id))
         if (layer)
           return getLayerPlaceholder(layer)
       },
@@ -91,9 +95,9 @@ export function GlobalModeBuildPlugin({ uno, ready, extract, tokens, filter, get
           return
 
         const layerKey = layerImporterMap.get(id)!
-        if (!importedIds.includes(layerKey!)) {
+        if (!importedIds.includes(layerKey)) {
           layerImporterMap.delete(id)
-          vfsLayerMap.delete(layerKey)
+          vfsLayers.delete(resolveLayer(layerKey)!)
         }
       },
       async configResolved(config) {
@@ -149,7 +153,7 @@ export function GlobalModeBuildPlugin({ uno, ready, extract, tokens, filter, get
         if (!cssFiles.length)
           return
 
-        if (!vfsLayerMap.size) {
+        if (!vfsLayers.size) {
           const msg = '[unocss] entry module not found, have you add `import \'uno.css\'` in your main entry?'
           this.warn(msg)
           return
@@ -167,7 +171,7 @@ export function GlobalModeBuildPlugin({ uno, ready, extract, tokens, filter, get
             chunk.source = await replaceAsync(css, LAYER_PLACEHOLDER_RE, async (_, __, layer) => {
               replaced = true
               return await applyCssTransform(layer === LAYER_MARK_ALL
-                ? result.getLayers(undefined, Array.from(vfsLayerMap.values()))
+                ? result.getLayers(undefined, Array.from(vfsLayers))
                 : result.getLayer(layer) || '', `${chunk.fileName}.css`, options.dir)
             })
           }

packages/vite/src/modes/global/dev.ts

@@ -1,6 +1,6 @@
 import type { Plugin, ViteDevServer, ResolvedConfig as ViteResolvedConfig } from 'vite'
 import type { UnocssPluginContext } from '@unocss/core'
-import { LAYER_MARK_ALL, getPath, resolveId } from '../../integration'
+import { LAYER_MARK_ALL, getPath, resolveId, resolveLayer } from '../../integration'
 
 const WARN_TIMEOUT = 20000
 const WS_EVENT_PREFIX = 'unocss:hmr'
@@ -10,7 +10,7 @@ export function GlobalModeDevPlugin({ uno, tokens, onInvalidate, extract, filter
   let base = ''
 
   const tasks: Promise<any>[] = []
-  const entries = new Map<string, string>()
+  const entries = new Set<string>()
 
   let invalidateTimer: any
   let lastUpdate = Date.now()
@@ -28,7 +28,7 @@ export function GlobalModeDevPlugin({ uno, tokens, onInvalidate, extract, filter
 
   function invalidate(timer = 10) {
     for (const server of servers) {
-      for (const id of entries.keys()) {
+      for (const id of entries) {
         const mod = server.moduleGraph.getModuleById(id)
         if (!mod)
           continue
@@ -44,7 +44,7 @@ export function GlobalModeDevPlugin({ uno, tokens, onInvalidate, extract, filter
     for (const server of servers) {
       server.ws.send({
         type: 'update',
-        updates: Array.from(entries.keys()).map(i => ({
+        updates: Array.from(entries).map(i => ({
           acceptedPath: i,
           path: i,
           timestamp: lastUpdate,
@@ -106,20 +106,21 @@ export function GlobalModeDevPlugin({ uno, tokens, onInvalidate, extract, filter
         const entry = resolveId(id)
         if (entry) {
           resolved = true
-          entries.set(entry.id, entry.layer)
-          return entry.id
+          entries.add(entry)
+          return entry
         }
       },
       async load(id) {
-        const layer = entries.get(getPath(id))
+        const layer = resolveLayer(getPath(id))
         if (!layer)
           return null
 
         await Promise.all(tasks)
         const result = await uno.generate(tokens)
         lastServed = Date.now()
         return layer === LAYER_MARK_ALL
-          ? result.getLayers(undefined, Array.from(entries.values()))
+          ? result.getLayers(undefined, Array.from(entries)
+            .map(i => resolveLayer(i)).filter((i): i is string => !!i))
           : result.getLayer(layer)
       },
     },

packages/webpack/src/index.ts

@@ -12,6 +12,7 @@ import {
   getLayerPlaceholder,
   getPath,
   resolveId,
+  resolveLayer,
 } from '../../shared-integration/src'
 
 export interface WebpackPluginOptions<Theme extends {} = {}> extends UserConfig<Theme> {}
@@ -38,7 +39,8 @@ export default function WebpackPlugin<Theme extends {}>(
     })
 
     const tasks: Promise<any>[] = []
-    const entries = new Map<string, string>()
+    const entries = new Set<string>()
+    const hashs = new Map<string, string>()
 
     const plugin = <UnpluginOptions>{
       name: 'unocss:webpack',
@@ -53,15 +55,19 @@ export default function WebpackPlugin<Theme extends {}>(
       resolveId(id) {
         const entry = resolveId(id)
         if (entry) {
-          entries.set(entry.id, entry.layer)
-          entries.set(id, entry.layer)
-          return entry.id
+          entries.add(entry)
+          return entry
         }
       },
       // serve the placeholders in virtual module
       load(id) {
-        const layer = entries.get(getPath(id))
-        const hash = entries.get(`${id}_hash`)
+        let layer = resolveLayer(getPath(id))
+        if (!layer) {
+          const entry = resolveId(id)
+          if (entry)
+            layer = resolveLayer(entry)
+        }
+        const hash = hashs.get(id)
         if (layer)
           return (hash ? getHashPlaceholder(hash) : '') + getLayerPlaceholder(layer)
       },
@@ -81,7 +87,8 @@ export default function WebpackPlugin<Theme extends {}>(
               code = code.replace(LAYER_PLACEHOLDER_RE, (_, quote, layer) => {
                 replaced = true
                 const css = layer === LAYER_MARK_ALL
-                  ? result.getLayers(undefined, Array.from(entries.values()))
+                  ? result.getLayers(undefined, Array.from(entries)
+                    .map(i => resolveLayer(i)).filter((i): i is string => !!i))
                   : result.getLayer(layer) || ''
 
                 if (!quote)
@@ -110,15 +117,16 @@ export default function WebpackPlugin<Theme extends {}>(
       Array.from(plugin.__vfsModules)
         .forEach((id) => {
           const path = id.slice(plugin.__virtualModulePrefix.length).replace(/\\/g, '/')
-          const layer = entries.get(path)
+          const layer = resolveLayer(path)
           if (!layer)
             return
           const code = layer === LAYER_MARK_ALL
-            ? result.getLayers(undefined, Array.from(entries.values()))
+            ? result.getLayers(undefined, Array.from(entries)
+              .map(i => resolveLayer(i)).filter((i): i is string => !!i))
             : result.getLayer(layer) || ''
 
           const hash = getHash(code)
-          entries.set(`${path}_hash`, hash)
+          hashs.set(path, hash)
           plugin.__vfs.writeModule(id, code)
         })
     }