Skip to content

Commit

Permalink
fix(plugins): make resolve & load order insensitive (#1112)
Browse files Browse the repository at this point in the history
  • Loading branch information
@QiroNT
QiroNT committed Jun 18, 2022
1 parent bd3a6c4 commit 3d403bf
Show file tree
Hide file tree
Showing 4 changed files with 50 additions and 37 deletions.
18 changes: 9 additions & 9 deletions packages/shared-integration/src/layers.ts
View file
Expand Up @@ -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) {
Expand Down
24 changes: 14 additions & 10 deletions packages/vite/src/modes/global/build.ts
View file
Expand Up @@ -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>[] = []

Expand Down Expand Up @@ -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)
},
Expand All @@ -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) {
Expand Down Expand Up @@ -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
Expand All @@ -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)
})
}
Expand Down
17 changes: 9 additions & 8 deletions packages/vite/src/modes/global/dev.ts
View file
@@ -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'
Expand All @@ -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()
Expand All @@ -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
Expand All @@ -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,
Expand Down Expand Up @@ -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)
},
},
Expand Down
28 changes: 18 additions & 10 deletions packages/webpack/src/index.ts
View file
Expand Up @@ -12,6 +12,7 @@ import {
getLayerPlaceholder,
getPath,
resolveId,
resolveLayer,
} from '../../shared-integration/src'

export interface WebpackPluginOptions<Theme extends {} = {}> extends UserConfig<Theme> {}
Expand All @@ -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',
Expand All @@ -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)
},
Expand All @@ -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)
Expand Down Expand Up @@ -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)
})
}
Expand Down

0 comments on commit 3d403bf

Please sign in to comment.