fix: style hmr reduce replace style code

[poyoho]

Description

fix: #7836
fix: #7913
fix: #6737
fix: #7952

Additional context

The previous method of replacing a style with script insertion may cause style priority issues and some style updates are invalid because middleware doesn't compile index HTML every time. So the update only needs to make the connection between CSS (including nested CSS) and Html and if HTML update will full-reload.

---

What is the purpose of this pull request?

• Bug fix
• New Feature
• Documentation update
• Other

Before submitting the PR, please make sure you do the following

• Read the Contributing Guidelines.
• Read the Pull Request Guidelines and follow the Commit Convention.
• Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
• Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).
• Ideally, include relevant tests that fail without this PR but pass with it.

[poyoho]

For this error: https://github.com/vitejs/vite/runs/6131322405?check_suite_focus=true#step:9:109

@sapphi-red this PR just use the style update hmr don't render css, can I remove the

vite/packages/playground/css-sourcemap/__tests__/serve.spec.ts

Lines 20 to 80 in 95e1a8c

	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,
	}
	`)
	})

I think it don't need to sourcemap?

[sapphi-red]

I think it is ok to remove that test.

[sapphi-red]

It looks like URL rebasing is not working.

<style>
  .wrapper {
    background: url('./ok.png');
  }
</style>

Also other transforms are not working, but maybe these are expected.

<style>
  .wrapper {
    .linked {
      color: blue;
    }
  }
</style>

These does not work during dev, but it does work after build.

[poyoho]

@sapphi-red

vite/packages/playground/assets/index.html

Lines 202 to 213 in 6bae2a3

	<h2>url in style tag</h2>
	<h3>url</h3>
	<style class="style-url">
	.style-url-assets {
	background: url('./nested/asset.png');
	background-size: 10px 10px;
	}
	</style>
	<div style="background: url('./nested/asset.png'); background-size: 10px 10px">
	inline style
	</div>
	<div class="style-url-assets">use style class</div>

This case had unit test for it. I should add the test assertion.

It looks like URL rebasing is not working.

<style>
  .wrapper {
    background: url('./ok.png');
  }
</style>

I think the below code is expected. css also no support this syntax.

Also other transforms are not working, but maybe these are expected.

<style>
  .wrapper {
    .linked {
      color: blue;
    }
  }
</style>

These does not work during dev, but it does work after build.

[sapphi-red]

This case had unit test for it. I should add the test assertion.

This works when I access / but it does not work when I access /foo/.

[poyoho]

@sapphi-red @bluwy @patak-dev compileCSSHTML Now it seems that this method is the best solution. because indexHtmlTransform hook in dev can't replace flag like build mode. Replace it intime it seems well.

if use the prev way and make the ?html-proxy&1.css reload will break css priority.

if use script patch it, the first screen is used unexpected css.

I don't know if there is any other better way 🤔

[patak-dev]

@poyoho I was also thinking the same while reviewing this PR, I forgot you already explored compiling the inline CSS before. +1 to revisit that approach.

[poyoho]

@poyoho I was also thinking the same while reviewing this PR, I forgot you already explored compiling the inline CSS before. +1 to revisit that approach.

now all the request css is go to replace the raw css. CSS request can reduce coupled between html and css plugin. But now css request seems to no work well.

[poyoho]

#6859 is seems not a bug in vite

[patak-dev]

This is a great direction 43c3dce!

[poyoho]

css request had too many bug, let clean all the css request in this time. 🤦

[patak-dev]

I think we should merge this PR and test it against vite-ecosystem-ci. I hope this is the last piece to stabilize 2.9, awesome work here @poyoho.

[sapphi-red]

I found a bug. (an edge case)

1. Run css playground (pnpm run dev) and open http://localhost:3000/foo/ (not /).
2. Add <style>.wrapper{ font-weight: bold; }</style> to index.html.
3. [vite] page reload index.html is output. But style not applied.
4. After manual page reload, the style is applied.

[sapphi-red]

It was not only with css.

1. Run css playground. (pnpm run dev) and open http://localhost:3000/foo/ (not /).
2. Change <h1>CSS</h1> to <h1>CSSfoo</h1> in index.html.
3. [vite] page reload index.html is output. But content is not updated.
4. After manual page reload, the content is updated.

[poyoho]

how about removing the judge?

vite/packages/vite/src/client/client.ts

Lines 108 to 109 in c30793c

	pagePath === payloadPath ||
	(pagePath.endsWith('/') && pagePath + 'index.html' === payloadPath)

when pagePath=/foo/ and payloadPath=index.html will don't reload page. The judge makes no support no base on base url hmr.

[sapphi-red]

I think base is supported by this line. payloadPath becomes /foo/index.html if base is /foo/.

vite/packages/vite/src/client/client.ts

Line 106 in c30793c

const payloadPath = base + payload.path.slice(1)

I feel it is ok to reload regardless to pagePath when payload.path is index.html.

[poyoho]

It is?

if (payloadPath === '/index.html') page.reload()

I think so. How about you @patak-dev 👀

[patak-dev]

@poyoho @sapphi-red I think we should create a new issue for that problem, as it is unrelated to this PR. It is strange we didn't get more reports for this issue before.

Let's focus on the issue being solved in this PR here.