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: style hmr reduce replace style code #7869

Merged
merged 22 commits into from Apr 30, 2022
Merged

fix: style hmr reduce replace style code #7869

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
95e1a8c
fix: style update logic
poyoho Apr 22, 2022
d907d41
fix: test
poyoho Apr 23, 2022
9ebbc0a
feat: update time
poyoho Apr 23, 2022
683d436
fix: wait for page reload
poyoho Apr 23, 2022
05ab906
feat: ssr html test
poyoho Apr 26, 2022
6bae2a3
fix: timeout
poyoho Apr 27, 2022
c481f26
feat: style assert
poyoho Apr 27, 2022
3100347
test: relative path
poyoho Apr 27, 2022
d0902ae
fix: replace css intime
poyoho Apr 28, 2022
feebda2
chore: rebase
poyoho Apr 28, 2022
8c6127f
fix: public css, revert #7031
poyoho Apr 28, 2022
0010fae
fix: hmr test
poyoho Apr 28, 2022
d55f11a
fix: test
poyoho Apr 28, 2022
8aca36b
chore: remove unused export
poyoho Apr 28, 2022
0ef0a62
feat: svg style tests
poyoho Apr 28, 2022
43c3dce
feat: `createCSSCompiler` support add hmr deps
poyoho Apr 28, 2022
68c14dc
feat: ensureWatchedFile inline css
poyoho Apr 28, 2022
8a6c853
chore: remove `createCSSCompiler`
poyoho Apr 28, 2022
57b936b
chore: remove useless code
poyoho Apr 28, 2022
a5e7855
chore: types
poyoho Apr 28, 2022
c30793c
perf: promise.all
poyoho Apr 29, 2022
13c33ed
feat: css content add sourcemap
poyoho Apr 30, 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
6 changes: 4 additions & 2 deletions packages/playground/assets/__tests__/assets.spec.ts
View file
Open in desktop
@@ -1,4 +1,3 @@
import { createHash } from 'crypto'
import {
findAssetFile,
getBg,
Expand All @@ -9,7 +8,8 @@ import {
readFile,
editFile,
notifyRebuildComplete,
untilUpdated
untilUpdated,
timeout
} from '../../testUtils'

const assetMatch = isBuild
Expand Down Expand Up @@ -304,6 +304,8 @@ if (!isBuild) {
(code) => code.replace('#0088ff', '#00ff88'),
true
)
// wait for page reload
await timeout(200)
poyoho marked this conversation as resolved.
Show resolved Hide resolved
await untilUpdated(() => getColor('.import-css'), 'rgb(0, 255, 136)')
})
}
Expand Down
62 changes: 0 additions & 62 deletions packages/playground/css-sourcemap/__tests__/serve.spec.ts
View file
Open in desktop
Expand Up @@ -17,68 +17,6 @@ if (!isBuild) {
throw new Error('Not found')
}

test('inline css', async () => {
const css = await getStyleTagContentIncluding('.inline ')
const map = extractSourcemap(css)
expect(formatSourcemapForSnapshot(map)).toMatchInlineSnapshot(`
Object {
"mappings": "AAGO;AACP,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACX,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACf,CAAC,CAAC,CAAC;",
"sources": Array [
"/root/index.html",
],
"sourcesContent": Array [
"<link rel=\\"stylesheet\\" href=\\"./linked.css\\" />
<link rel=\\"stylesheet\\" href=\\"./linked-with-import.css\\" />

<style>
.inline {
color: red;
}
</style>

<div class=\\"wrapper\\">
<h1>CSS Sourcemap</h1>

<p class=\\"inline\\">&lt;inline&gt;</p>

<p class=\\"linked\\">&lt;linked&gt;: no import</p>
<p class=\\"linked-with-import\\">&lt;linked&gt;: with import</p>

<p class=\\"imported\\">&lt;imported&gt;: no import</p>
<p class=\\"imported-with-import\\">&lt;imported&gt;: with import</p>

<p class=\\"imported-sass\\">&lt;imported sass&gt;</p>
<p class=\\"imported-sass-module\\">&lt;imported sass&gt; with module</p>

<p class=\\"imported-less\\">&lt;imported less&gt; with string additionalData</p>

<p class=\\"imported-stylus\\">&lt;imported stylus&gt;</p>
</div>

<script type=\\"module\\">
import './imported.css'
import './imported-with-import.css'

import './imported.sass'
import sassModule from './imported.module.sass'

document
.querySelector('.imported-sass-module')
.classList.add(sassModule['imported-sass-module'])

import './imported.less'

import './imported.styl'
</script>

<iframe src=\\"virtual.html\\"></iframe>
",
],
"version": 3,
}
`)
})

test('linked css', async () => {
const res = await page.request.get(
new URL('./linked.css', page.url()).href,
Expand Down
5 changes: 5 additions & 0 deletions packages/playground/ssr-html/index.html
View file
Open in desktop
Expand Up @@ -4,6 +4,11 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>SSR HTML</title>
<style>
body {
background-color: white;
}
</style>
</head>
<body>
<h1>SSR Dynamic HTML</h1>
Expand Down
2 changes: 1 addition & 1 deletion packages/playground/testUtils.ts
View file
Open in desktop
Expand Up @@ -63,7 +63,7 @@ function rgbToHex(rgb: string): string {
}
}

const timeout = (n: number) => new Promise((r) => setTimeout(r, n))
export const timeout = (n: number) => new Promise((r) => setTimeout(r, n))
poyoho marked this conversation as resolved.
Show resolved Hide resolved

async function toEl(el: string | ElementHandle): Promise<ElementHandle> {
if (typeof el === 'string') {
Expand Down
4 changes: 2 additions & 2 deletions packages/vite/src/node/plugins/css.ts
View file
Open in desktop
Expand Up @@ -300,6 +300,7 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {

const inlined = inlineRE.test(id)
const modules = cssModulesCache.get(config)!.get(id)
const isHTMLProxy = htmlProxyRE.test(id)
const modulesCode =
modules && dataToEsm(modules, { namedExports: true, preferConst: true })

Expand All @@ -311,7 +312,7 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
if (options?.ssr) {
return modulesCode || `export default ${JSON.stringify(css)}`
}
if (inlined) {
if (inlined || isHTMLProxy) {
return `export default ${JSON.stringify(css)}`
}

Expand Down Expand Up @@ -346,7 +347,6 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
// and then use the cache replace inline-style-flag when `generateBundle` in vite:build-html plugin
const inlineCSS = inlineCSSRE.test(id)
const query = parseRequest(id)
const isHTMLProxy = htmlProxyRE.test(id)
if (inlineCSS && isHTMLProxy) {
addToHTMLProxyTransformResult(
`${cleanUrl(id)}_${Number.parseInt(query!.index)}`,
Expand Down
18 changes: 11 additions & 7 deletions packages/vite/src/node/server/middlewares/indexHtml.ts
View file
Open in desktop
Expand Up @@ -128,13 +128,17 @@ const devHtmlHook: IndexHtmlTransformHook = async (
if (module) {
server?.moduleGraph.invalidateModule(module)
}

s.overwrite(
node.loc.start.offset,
node.loc.end.offset,
`<script type="module" src="${modulePath}"></script>`,
{ contentOnly: true }
)
if (ext === 'js') {
s.overwrite(
node.loc.start.offset,
node.loc.end.offset,
`<script type="module" src="${modulePath}"></script>`,
{ contentOnly: true }
)
} else if (ext === 'css') {
// just use the style update hmr don't render css
s.append(`<script type="module" src="${modulePath}"></script>`)
}
poyoho marked this conversation as resolved.
Show resolved Hide resolved
}

await traverseHtml(html, htmlPath, (node) => {
Expand Down