From 7bfc9cf5e79d7a7a644a41878bc9a37366921137 Mon Sep 17 00:00:00 2001 From: nieyuyao Date: Sun, 3 Jul 2022 14:42:38 +0800 Subject: [PATCH 1/2] fix: repalce css hash in js when generating bundle --- packages/vite/src/modes/global/build.ts | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/packages/vite/src/modes/global/build.ts b/packages/vite/src/modes/global/build.ts index a062c25feb..e5bad78483 100644 --- a/packages/vite/src/modes/global/build.ts +++ b/packages/vite/src/modes/global/build.ts @@ -149,8 +149,8 @@ export function GlobalModeBuildPlugin({ uno, ready, extract, tokens, filter, get const files = Object.keys(bundle) const cssFiles = files .filter(i => i.endsWith('.css')) - - if (!cssFiles.length) + const jsFiles = files.filter(i => i.endsWith('.js')) + if (!(cssFiles.length | jsFiles.length)) return if (!vfsLayers.size) { @@ -177,6 +177,18 @@ export function GlobalModeBuildPlugin({ uno, ready, extract, tokens, filter, get } } + for (const file of jsFiles) { + const chunk = bundle[file] + if (chunk.type === 'chunk' && typeof chunk.code === 'string') { + const js = chunk.code + .replace(HASH_PLACEHOLDER_RE, '') + chunk.code = await replaceAsync(js, LAYER_PLACEHOLDER_RE, async (_, __, layer) => { + replaced = true + return layer === LAYER_MARK_ALL ? result.getLayers(undefined, Array.from(vfsLayers)) : result.getLayer(layer) || '' + }) + } + } + if (!replaced) this.error(new Error('[unocss] does not found CSS placeholder in the generated chunks,\nthis is likely an internal bug of unocss vite plugin')) }, From ab8a0ecfc0110570b80c232b6a027480cc869c68 Mon Sep 17 00:00:00 2001 From: Anthony Fu Date: Wed, 6 Jul 2022 10:21:16 +0800 Subject: [PATCH 2/2] chore: update --- packages/vite/src/modes/global/build.ts | 28 +++++++++++++------------ 1 file changed, 15 insertions(+), 13 deletions(-) diff --git a/packages/vite/src/modes/global/build.ts b/packages/vite/src/modes/global/build.ts index e5bad78483..2fa2e7b59c 100644 --- a/packages/vite/src/modes/global/build.ts +++ b/packages/vite/src/modes/global/build.ts @@ -146,11 +146,11 @@ export function GlobalModeBuildPlugin({ uno, ready, extract, tokens, filter, get enforce: 'post', // rewrite the css placeholders async generateBundle(options, bundle) { - const files = Object.keys(bundle) - const cssFiles = files - .filter(i => i.endsWith('.css')) - const jsFiles = files.filter(i => i.endsWith('.js')) - if (!(cssFiles.length | jsFiles.length)) + const files = Object.entries(bundle) + const cssFiles = files.filter(i => i[0].endsWith('.css')) + const jsFiles = files.filter(i => i[0].endsWith('.js')) + + if (!cssFiles.length && !jsFiles.length) return if (!vfsLayers.size) { @@ -162,29 +162,31 @@ export function GlobalModeBuildPlugin({ uno, ready, extract, tokens, filter, get const result = await generateAll() let replaced = false - for (const file of cssFiles) { - const chunk = bundle[file] + for (const [, chunk] of cssFiles) { if (chunk.type === 'asset' && typeof chunk.source === 'string') { const css = chunk.source .replace(HASH_PLACEHOLDER_RE, '') - chunk.source = await replaceAsync(css, LAYER_PLACEHOLDER_RE, async (_, __, layer) => { replaced = true - return await applyCssTransform(layer === LAYER_MARK_ALL + const css = layer === LAYER_MARK_ALL ? result.getLayers(undefined, Array.from(vfsLayers)) - : result.getLayer(layer) || '', `${chunk.fileName}.css`, options.dir) + : result.getLayer(layer) || '' + return await applyCssTransform(css, `${chunk.fileName}.css`, options.dir) }) } } - for (const file of jsFiles) { - const chunk = bundle[file] + // replace the hash in the js files (iife or umd bundle) + for (const [, chunk] of jsFiles) { if (chunk.type === 'chunk' && typeof chunk.code === 'string') { const js = chunk.code .replace(HASH_PLACEHOLDER_RE, '') chunk.code = await replaceAsync(js, LAYER_PLACEHOLDER_RE, async (_, __, layer) => { replaced = true - return layer === LAYER_MARK_ALL ? result.getLayers(undefined, Array.from(vfsLayers)) : result.getLayer(layer) || '' + const css = layer === LAYER_MARK_ALL + ? result.getLayers(undefined, Array.from(vfsLayers)) + : result.getLayer(layer) || '' + return css }) } }