fix(vite): repalce css hash in js when generating bundle (#1217)

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>
unocss · Jul 6, 2022 · 0fb167d · 0fb167d
1 parent 026c1f0
commit 0fb167d
Showing 1 changed file with 23 additions and 9 deletions.
diff --git 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 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)
+        if (!cssFiles.length && !jsFiles.length)
           return
 
         if (!vfsLayers.size) {
@@ -162,17 +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) || ''
+              return await applyCssTransform(css, `${chunk.fileName}.css`, options.dir)
+            })
+          }
+        }
+
+        // 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
+              const css = layer === LAYER_MARK_ALL
                 ? result.getLayers(undefined, Array.from(vfsLayers))
-                : result.getLayer(layer) || '', `${chunk.fileName}.css`, options.dir)
+                : result.getLayer(layer) || ''
+              return css
             })
           }
         }