diff --git a/packages/plugin-rsc/e2e/basic.test.ts b/packages/plugin-rsc/e2e/basic.test.ts
index a2c9e4c20..e228b5914 100644
--- a/packages/plugin-rsc/e2e/basic.test.ts
+++ b/packages/plugin-rsc/e2e/basic.test.ts
@@ -326,6 +326,10 @@ function defineTest(f: Fixture) {
'color',
'rgb(255, 165, 0)',
)
+ await expect(page.locator('.test-style-server-manual')).toHaveCSS(
+ 'color',
+ 'rgb(255, 165, 0)',
+ )
})
testNoJs('css @nojs', async ({ page }) => {
@@ -335,6 +339,10 @@ function defineTest(f: Fixture) {
'color',
'rgb(255, 165, 0)',
)
+ await expect(page.locator('.test-style-server-manual')).toHaveCSS(
+ 'color',
+ 'rgb(255, 165, 0)',
+ )
})
async function testCss(page: Page, color = 'rgb(255, 165, 0)') {
@@ -453,6 +461,10 @@ function defineTest(f: Fixture) {
'color',
'rgb(255, 165, 0)',
)
+ await expect(page.locator('.test-style-server-manual')).toHaveCSS(
+ 'color',
+ 'rgb(255, 165, 0)',
+ )
})
// TODO: need a way to add/remove links on server hmr. for now, it requires a manually reload.
diff --git a/packages/plugin-rsc/examples/basic/public/test.css b/packages/plugin-rsc/examples/basic/public/test.css
new file mode 100644
index 000000000..f1c9489d9
--- /dev/null
+++ b/packages/plugin-rsc/examples/basic/public/test.css
@@ -0,0 +1,3 @@
+.test-style-server-manual {
+ color: orange;
+}
diff --git a/packages/plugin-rsc/examples/basic/src/routes/style-server/server.tsx b/packages/plugin-rsc/examples/basic/src/routes/style-server/server.tsx
index 6684e6b5f..661669924 100644
--- a/packages/plugin-rsc/examples/basic/src/routes/style-server/server.tsx
+++ b/packages/plugin-rsc/examples/basic/src/routes/style-server/server.tsx
@@ -8,6 +8,12 @@ export function TestStyleServer() {
test-css-module-server
+
+ test-style-server-manual
>
)
}
diff --git a/packages/plugin-rsc/examples/basic/vite.config.ts b/packages/plugin-rsc/examples/basic/vite.config.ts
index d4ee08d3b..94df04e00 100644
--- a/packages/plugin-rsc/examples/basic/vite.config.ts
+++ b/packages/plugin-rsc/examples/basic/vite.config.ts
@@ -123,6 +123,8 @@ export default { fetch: handler };
source: `\
/favicon.ico
Cache-Control: public, max-age=3600, s-maxage=3600
+/test.css
+ Cache-Control: public, max-age=3600, s-maxage=3600
/assets/*
Cache-Control: public, max-age=31536000, immutable
`,
diff --git a/packages/plugin-rsc/src/plugin.ts b/packages/plugin-rsc/src/plugin.ts
index 1e0f84df8..01a7e1630 100644
--- a/packages/plugin-rsc/src/plugin.ts
+++ b/packages/plugin-rsc/src/plugin.ts
@@ -829,14 +829,16 @@ window.__vite_plugin_react_preamble_installed__ = true;
const resolvedEntry = await this.resolve(source)
assert(resolvedEntry, `[vite-rsc] failed to resolve entry '${source}'`)
code += `await import(${JSON.stringify(resolvedEntry.id)});`
- // TODO
- // should remove only the ones we injected during ssr, which are duplicated by browser imports for HMR.
- // technically this doesn't have to wait for "vite:beforeUpdate" and should do it right after browser css import.
- // TODO: there migth be a clever way to let Vite deduplicate itself.
- // cf. https://github.com/withastro/astro/blob/acb9b302f56e38833a1ab01147f7fde0bf967889/packages/astro/src/vite-plugin-astro-server/pipeline.ts#L133-L135
- code += `
+ // TODO: this doesn't have to wait for "vite:beforeUpdate" and should do it right after browser css import.
+ code += /* js */ `
const ssrCss = document.querySelectorAll("link[rel='stylesheet']");
-import.meta.hot.on("vite:beforeUpdate", () => ssrCss.forEach(node => node.remove()));
+import.meta.hot.on("vite:beforeUpdate", () => {
+ ssrCss.forEach(node => {
+ if (node.dataset.precedence?.startsWith("vite-rsc/")) {
+ node.remove();
+ }
+ });
+});
`
// close error overlay after syntax error is fixed and hmr is triggered.
// https://github.com/vitejs/vite/blob/8033e5bf8d3ff43995d0620490ed8739c59171dd/packages/vite/src/client/client.ts#L318-L320
diff --git a/packages/plugin-rsc/src/ssr.tsx b/packages/plugin-rsc/src/ssr.tsx
index dec5e6c17..9cbaf8545 100644
--- a/packages/plugin-rsc/src/ssr.tsx
+++ b/packages/plugin-rsc/src/ssr.tsx
@@ -60,6 +60,9 @@ function preloadDeps(deps: ResolvedAssetDeps) {
})
}
for (const href of deps.css) {
- ReactDOM.preinit(href, { as: 'style' })
+ ReactDOM.preinit(href, {
+ as: 'style',
+ precedence: 'vite-rsc/client-reference',
+ })
}
}