fix: inline css hash (#7974)

vitejs · May 1, 2022 · f6ae60d · f6ae60d
1 parent a5bdb9f
commit f6ae60d
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 11 deletions.
diff --git a/packages/playground/html/inline/shared_a.html b/packages/playground/html/inline/shared_a.html
@@ -0,0 +1 @@
+<p>inline a</p>
diff --git a/packages/playground/html/vite.config.js b/packages/playground/html/vite.config.js
@@ -17,6 +17,7 @@ module.exports = {
         zeroJS: resolve(__dirname, 'zeroJS.html'),
         noHead: resolve(__dirname, 'noHead.html'),
         noBody: resolve(__dirname, 'noBody.html'),
+        inlinea: resolve(__dirname, 'inline/shared_a.html'),
         inline1: resolve(__dirname, 'inline/shared-1.html'),
         inline2: resolve(__dirname, 'inline/shared-2.html'),
         inline3: resolve(__dirname, 'inline/unique.html'),

diff --git a/packages/vite/src/node/plugins/asset.ts b/packages/vite/src/node/plugins/asset.ts
@@ -337,7 +337,7 @@ async function fileToBuiltUrl(
   return url
 }
 
-export function getAssetHash(content: Buffer): string {
+export function getAssetHash(content: Buffer | string): string {
   return createHash('sha256').update(content).digest('hex').slice(0, 8)
 }
 

diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
@@ -33,7 +33,8 @@ import {
   getAssetFilename,
   assetUrlRE,
   fileToUrl,
-  checkPublicFile
+  checkPublicFile,
+  getAssetHash
 } from './asset'
 import MagicString from 'magic-string'
 import type * as PostCSS from 'postcss'
@@ -354,7 +355,7 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
       const query = parseRequest(id)
       if (inlineCSS && isHTMLProxy) {
         addToHTMLProxyTransformResult(
-          `${cleanUrl(id)}_${Number.parseInt(query!.index)}`,
+          `${getAssetHash(cleanUrl(id))}_${Number.parseInt(query!.index)}`,
           css
         )
         return `export default ''`

diff --git a/packages/vite/src/node/plugins/html.ts b/packages/vite/src/node/plugins/html.ts
@@ -23,7 +23,8 @@ import {
   checkPublicFile,
   assetUrlRE,
   urlToBuiltUrl,
-  getAssetFilename
+  getAssetFilename,
+  getAssetHash
 } from './asset'
 import { isCSSRequest } from './css'
 import { modulePreloadPolyfillId } from './modulePreloadPolyfill'
@@ -44,7 +45,7 @@ interface ScriptAssetsUrl {
 }
 
 const htmlProxyRE = /\?html-proxy=?[&inline\-css]*&index=(\d+)\.(js|css)$/
-const inlineCSSRE = /__VITE_INLINE_CSS__([^_]+_\d+)__/g
+const inlineCSSRE = /__VITE_INLINE_CSS__([a-z\d]{8}_\d+)__/g
 // Do not allow preceding '.', but do allow preceding '...' for spread operations
 const inlineImportRE =
   /(?<!(?<!\.\.)\.)\bimport\s*\(("([^"]|(?<=\\)")*"|'([^']|(?<=\\)')*')\)/g
@@ -62,8 +63,8 @@ export const htmlProxyMap = new WeakMap<
 >()
 
 // HTML Proxy Transform result are stored by config
-// `${importer}_${query.index}` -> transformed css code
-// PS: key like `/vite/packages/playground/assets/index.html_1`
+// `${hash(importer)}_${query.index}` -> transformed css code
+// PS: key like `hash(/vite/packages/playground/assets/index.html)_1`)
 export const htmlProxyResult = new Map<string, string>()
 
 export function htmlInlineProxyPlugin(config: ResolvedConfig): Plugin {
@@ -373,12 +374,12 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
             addToHTMLProxyCache(config, filePath, inlineModuleIndex, { code })
             // will transform with css plugin and cache result with css-post plugin
             js += `\nimport "${id}?html-proxy&inline-css&index=${inlineModuleIndex}.css"`
-
+            const hash = getAssetHash(cleanUrl(id))
             // will transform in `applyHtmlTransforms`
             s.overwrite(
               styleNode.loc.start.offset,
               styleNode.loc.end.offset,
-              `"__VITE_INLINE_CSS__${cleanUrl(id)}_${inlineModuleIndex}__"`,
+              `"__VITE_INLINE_CSS__${hash}_${inlineModuleIndex}__"`,
               { contentOnly: true }
             )
           }
@@ -392,12 +393,12 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
               code: styleNode.content
             })
             js += `\nimport "${id}?html-proxy&inline-css&index=${inlineModuleIndex}.css"`
-
+            const hash = getAssetHash(cleanUrl(id))
             // will transform in `applyHtmlTransforms`
             s.overwrite(
               styleNode.loc.start.offset,
               styleNode.loc.end.offset,
-              `__VITE_INLINE_CSS__${cleanUrl(id)}_${inlineModuleIndex}__`,
+              `__VITE_INLINE_CSS__${hash}_${inlineModuleIndex}__`,
               { contentOnly: true }
             )
           }