From 3d403bfa5a6b4248f19fa78308ad29be938d4359 Mon Sep 17 00:00:00 2001 From: QiroNT Date: Sat, 18 Jun 2022 13:24:42 +0800 Subject: [PATCH] fix(plugins): make resolve & load order insensitive (#1112) --- packages/shared-integration/src/layers.ts | 18 +++++++-------- packages/vite/src/modes/global/build.ts | 24 +++++++++++-------- packages/vite/src/modes/global/dev.ts | 17 +++++++------- packages/webpack/src/index.ts | 28 +++++++++++++++-------- 4 files changed, 50 insertions(+), 37 deletions(-) diff --git a/packages/shared-integration/src/layers.ts b/packages/shared-integration/src/layers.ts index 150cd34991..cbff6d4f2c 100644 --- a/packages/shared-integration/src/layers.ts +++ b/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) { diff --git a/packages/vite/src/modes/global/build.ts b/packages/vite/src/modes/global/build.ts index fa931eb53d..a062c25feb 100644 --- a/packages/vite/src/modes/global/build.ts +++ b/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): Plugin[] { - const vfsLayerMap = new Map() + const vfsLayers = new Set() const layerImporterMap = new Map() let tasks: Promise[] = [] @@ -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) }) } diff --git a/packages/vite/src/modes/global/dev.ts b/packages/vite/src/modes/global/dev.ts index c49ee5725f..8abe39eaa6 100644 --- a/packages/vite/src/modes/global/dev.ts +++ b/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[] = [] - const entries = new Map() + const entries = new Set() 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,12 +106,12 @@ 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 @@ -119,7 +119,8 @@ export function GlobalModeDevPlugin({ uno, tokens, onInvalidate, extract, filter 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) }, }, diff --git a/packages/webpack/src/index.ts b/packages/webpack/src/index.ts index ae31cc6de4..dc2d963201 100644 --- a/packages/webpack/src/index.ts +++ b/packages/webpack/src/index.ts @@ -12,6 +12,7 @@ import { getLayerPlaceholder, getPath, resolveId, + resolveLayer, } from '../../shared-integration/src' export interface WebpackPluginOptions extends UserConfig {} @@ -38,7 +39,8 @@ export default function WebpackPlugin( }) const tasks: Promise[] = [] - const entries = new Map() + const entries = new Set() + const hashs = new Map() const plugin = { name: 'unocss:webpack', @@ -53,15 +55,19 @@ export default function WebpackPlugin( 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( 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( 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) }) }