diff --git a/packages/plugin-rsc/e2e/basic.test.ts b/packages/plugin-rsc/e2e/basic.test.ts index 62bac741..d3cdc551 100644 --- a/packages/plugin-rsc/e2e/basic.test.ts +++ b/packages/plugin-rsc/e2e/basic.test.ts @@ -733,16 +733,26 @@ function defineTest(f: Fixture) { }) async function expectNoDuplicateServerCss(page: Page) { - // check only manually inserted stylesheet link exists - await expect(page.locator('link[rel="stylesheet"]')).toHaveCount(3) - for (const locator of await page - .locator('link[rel="stylesheet"]') - .all()) { - await expect(locator).toHaveAttribute( - 'data-precedence', - 'test-style-manual-link', - ) - } + // verify duplicate client-reference style link are removed + await expect( + page.locator( + 'link[rel="stylesheet"][data-precedence="vite-rsc/client-reference"]', + ), + ).toHaveCount(0) + await expect( + page + .locator( + 'link[rel="stylesheet"][data-precedence="vite-rsc/importer-resources"]', + ) + .nth(0), + ).toBeAttached() + await expect( + page + .locator( + 'link[rel="stylesheet"][data-precedence="test-style-manual-link"]', + ) + .nth(0), + ).toBeAttached() } test('no duplicate server css', async ({ page }) => { diff --git a/packages/plugin-rsc/src/plugin.ts b/packages/plugin-rsc/src/plugin.ts index 4e6de3be..acabe24c 100644 --- a/packages/plugin-rsc/src/plugin.ts +++ b/packages/plugin-rsc/src/plugin.ts @@ -1013,7 +1013,7 @@ window.__vite_plugin_react_preamble_installed__ = true; const ssrCss = document.querySelectorAll("link[rel='stylesheet']"); import.meta.hot.on("vite:beforeUpdate", () => { ssrCss.forEach(node => { - if (node.dataset.precedence?.startsWith("vite-rsc/")) { + if (node.dataset.precedence?.startsWith("vite-rsc/client-references")) { node.remove(); } }); @@ -2103,13 +2103,7 @@ function vitePluginRscCss( if (this.environment.mode === 'dev') { const result = collectCss(server.environments.rsc!, importer) const cssHrefs = result.hrefs.map((href) => href.slice(1)) - const jsHrefs = [ - `@id/__x00__${toCssVirtual({ id: importer, type: 'rsc-browser' })}`, - ] - const deps = assetsURLOfDeps( - { css: cssHrefs, js: jsHrefs }, - manager, - ) + const deps = assetsURLOfDeps({ css: cssHrefs, js: [] }, manager) return generateResourcesCode( serializeValueWithRuntime(deps), manager, @@ -2128,20 +2122,6 @@ function vitePluginRscCss( ` } } - if (parsed?.type === 'rsc-browser') { - assert(this.environment.name === 'client') - assert(this.environment.mode === 'dev') - const importer = parsed.id - const result = collectCss(server.environments.rsc!, importer) - let code = result.ids - .map((id) => id.replace(/^\0/, '')) - .map((id) => `import ${JSON.stringify(id)};\n`) - .join('') - // ensure hmr boundary at this virtual since otherwise non-self accepting css - // (e.g. css module) causes full reload - code += `if (import.meta.hot) { import.meta.hot.accept() }\n` - return code - } }, hotUpdate(ctx) { if (this.environment.name === 'rsc') { @@ -2153,10 +2133,6 @@ function vitePluginRscCss( server.environments.rsc!, `\0` + toCssVirtual({ id: mod.id, type: 'rsc' }), ) - invalidteModuleById( - server.environments.client, - `\0` + toCssVirtual({ id: mod.id, type: 'rsc-browser' }), - ) } } } @@ -2174,7 +2150,7 @@ function vitePluginRscCss( .forEach((node) => { if ( node instanceof HTMLElement && - node.dataset.precedence?.startsWith('vite-rsc/') + node.dataset.precedence?.startsWith('vite-rsc/client-reference') ) { node.remove() } @@ -2234,15 +2210,6 @@ function generateResourcesCode(depsCode: string, manager: RscPluginManager) { href: href, }), ), - // js is only for dev to forward css import on browser to have hmr - ...deps.js.map((href: string) => - React.createElement('script', { - key: 'js:' + href, - type: 'module', - async: true, - src: href, - }), - ), RemoveDuplicateServerCss && React.createElement(RemoveDuplicateServerCss, { key: 'remove-duplicate-css', diff --git a/packages/plugin-rsc/src/plugins/shared.ts b/packages/plugin-rsc/src/plugins/shared.ts index 2b67fb54..a603d9bc 100644 --- a/packages/plugin-rsc/src/plugins/shared.ts +++ b/packages/plugin-rsc/src/plugins/shared.ts @@ -1,6 +1,6 @@ type CssVirtual = { id: string - type: 'ssr' | 'rsc' | 'rsc-browser' + type: 'ssr' | 'rsc' } export function toCssVirtual({ id, type }: CssVirtual) {