From 8c02912b7ef03e3d127856e595dbab3458dcc72e Mon Sep 17 00:00:00 2001 From: yoho Date: Sun, 1 May 2022 10:49:12 +0800 Subject: [PATCH 1/4] fix: inline css support '_' filename --- packages/vite/src/node/plugins/asset.ts | 2 +- packages/vite/src/node/plugins/css.ts | 5 +++-- packages/vite/src/node/plugins/html.ts | 17 +++++++++-------- 3 files changed, 13 insertions(+), 11 deletions(-) diff --git a/packages/vite/src/node/plugins/asset.ts b/packages/vite/src/node/plugins/asset.ts index 633438cf3cb0d4..f2eed2bc28bc5a 100644 --- 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 index 83e18aabecdb33..5f75f6870d63a5 100644 --- 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' @@ -349,7 +350,7 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin { const isHTMLProxy = htmlProxyRE.test(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 index ed4250f1965869..c29700aac104aa 100644 --- 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 = /(?() // 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() 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 } ) } From 61b21603469ab483cd8a5d755b7540e2361ba897 Mon Sep 17 00:00:00 2001 From: yoho Date: Sun, 1 May 2022 10:53:38 +0800 Subject: [PATCH 2/4] feat: test --- packages/playground/html/inline/shared_a.html | 1 + packages/playground/html/vite.config.js | 1 + packages/vite/src/node/plugins/css.ts | 2 +- 3 files changed, 3 insertions(+), 1 deletion(-) create mode 100644 packages/playground/html/inline/shared_a.html diff --git a/packages/playground/html/inline/shared_a.html b/packages/playground/html/inline/shared_a.html new file mode 100644 index 00000000000000..31fbd8fcc34bdf --- /dev/null +++ b/packages/playground/html/inline/shared_a.html @@ -0,0 +1 @@ +

inline a

diff --git a/packages/playground/html/vite.config.js b/packages/playground/html/vite.config.js index 1703e02cc05366..bfe48675cbc18f 100644 --- 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/css.ts b/packages/vite/src/node/plugins/css.ts index 5f75f6870d63a5..5da0a0e0b698a3 100644 --- a/packages/vite/src/node/plugins/css.ts +++ b/packages/vite/src/node/plugins/css.ts @@ -350,7 +350,7 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin { const isHTMLProxy = htmlProxyRE.test(id) if (inlineCSS && isHTMLProxy) { addToHTMLProxyTransformResult( - getAssetHash(`${cleanUrl(id)}_${Number.parseInt(query!.index)}`), + `${getAssetHash(cleanUrl(id))}_${Number.parseInt(query!.index)}`, css ) return `export default ''` From 486235676ce211fd9332678ccc11a759d73b8e20 Mon Sep 17 00:00:00 2001 From: yoho Date: Sun, 1 May 2022 10:56:17 +0800 Subject: [PATCH 3/4] fix: comment --- packages/vite/src/node/plugins/html.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/vite/src/node/plugins/html.ts b/packages/vite/src/node/plugins/html.ts index c29700aac104aa..4c26fa1028fa63 100644 --- a/packages/vite/src/node/plugins/html.ts +++ b/packages/vite/src/node/plugins/html.ts @@ -63,8 +63,8 @@ export const htmlProxyMap = new WeakMap< >() // HTML Proxy Transform result are stored by config -// `hash(${importer}_${query.index})` -> transformed css code -// PS: key like hash(`/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() export function htmlInlineProxyPlugin(config: ResolvedConfig): Plugin { From c97842aa0851ffaa654f17ba3f3383d4d98695a6 Mon Sep 17 00:00:00 2001 From: yoho Date: Sun, 1 May 2022 10:56:48 +0800 Subject: [PATCH 4/4] fix: comment --- packages/vite/src/node/plugins/html.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/vite/src/node/plugins/html.ts b/packages/vite/src/node/plugins/html.ts index 4c26fa1028fa63..c33811008ccb17 100644 --- a/packages/vite/src/node/plugins/html.ts +++ b/packages/vite/src/node/plugins/html.ts @@ -63,7 +63,7 @@ export const htmlProxyMap = new WeakMap< >() // HTML Proxy Transform result are stored by config -// `hash(${importer})_${query.index}` -> transformed css code +// `${hash(importer)}_${query.index}` -> transformed css code // PS: key like `hash(/vite/packages/playground/assets/index.html)_1`) export const htmlProxyResult = new Map()