Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: inline css hash #7974

Merged
merged 4 commits into from May 1, 2022
Merged

fix: inline css hash #7974

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8c02912
fix: inline css support '_' filename
poyoho May 1, 2022
61b2160
feat: test
poyoho May 1, 2022
4862356
fix: comment
poyoho May 1, 2022
c97842a
fix: comment
poyoho May 1, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/playground/html/inline/shared_a.html
View file
Open in desktop
@@ -0,0 +1 @@
<p>inline a</p>
1 change: 1 addition & 0 deletions packages/playground/html/vite.config.js
View file
Open in desktop
Expand Up @@ -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'),
Expand Down
2 changes: 1 addition & 1 deletion packages/vite/src/node/plugins/asset.ts
View file
Open in desktop
Expand Up @@ -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)
}

Expand Down
5 changes: 3 additions & 2 deletions packages/vite/src/node/plugins/css.ts
View file
Open in desktop
Expand Up @@ -33,7 +33,8 @@ import {
getAssetFilename,
assetUrlRE,
fileToUrl,
checkPublicFile
checkPublicFile,
getAssetHash
} from './asset'
import MagicString from 'magic-string'
import type * as PostCSS from 'postcss'
Expand Down Expand Up @@ -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 ''`
Expand Down
17 changes: 9 additions & 8 deletions packages/vite/src/node/plugins/html.ts
View file
Open in desktop
Expand Up @@ -23,7 +23,8 @@ import {
checkPublicFile,
assetUrlRE,
urlToBuiltUrl,
getAssetFilename
getAssetFilename,
getAssetHash
} from './asset'
import { isCSSRequest } from './css'
import { modulePreloadPolyfillId } from './modulePreloadPolyfill'
Expand All @@ -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
Expand All @@ -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 {
Expand Down Expand Up @@ -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 }
)
}
Expand All @@ -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 }
)
}
Expand Down