fix(rsc): ensure .js suffix for internal virtual modules (#744)

Author: hi-ogawa

packages/plugin-rsc/src/plugin.ts

@@ -43,14 +43,14 @@ import {
   getEntrySource,
   hashString,
   normalizeRelativePath,
-  parseIdQuery,
   sortObject,
   withRollupError,
 } from './plugins/utils'
 import { createDebug } from '@hiogawa/utils'
 import { transformScanBuildStrip } from './plugins/scan'
 import { validateImportPlugin } from './plugins/validate-import'
 import { vitePluginFindSourceMapURL } from './plugins/find-source-map-url'
+import { parseCssVirtual, toCssVirtual, parseIdQuery } from './plugins/shared'
 
 const BUILD_ASSETS_MANIFEST_NAME = '__vite_rsc_assets_manifest.js'
 
@@ -1797,15 +1797,16 @@ function vitePluginRscCss(
       },
     },
     {
-      name: 'rsc:css/dev-ssr-virtual',
+      name: 'rsc:css-virtual',
       resolveId(source) {
-        if (source.startsWith('virtual:vite-rsc/css/dev-ssr/')) {
+        if (source.startsWith('virtual:vite-rsc/css?')) {
           return '\0' + source
         }
       },
       async load(id) {
-        if (id.startsWith('\0virtual:vite-rsc/css/dev-ssr/')) {
-          id = id.slice('\0virtual:vite-rsc/css/dev-ssr/'.length)
+        const parsed = parseCssVirtual(id)
+        if (parsed?.type === 'ssr') {
+          id = parsed.id
           const { server } = manager
           const mod =
             await server.environments.ssr.moduleGraph.getModuleByUrl(id)
@@ -1852,9 +1853,8 @@ function vitePluginRscCss(
               continue
             }
           }
-          const importId = `virtual:vite-rsc/importer-resources?importer=${encodeURIComponent(
-            importer,
-          )}`
+
+          const importId = toCssVirtual({ id: importer, type: 'rsc' })
 
           // use dynamic import during dev to delay crawling and discover css correctly.
           let replacement: string
@@ -1891,26 +1891,17 @@ function vitePluginRscCss(
           }
         }
       },
-      resolveId(source) {
-        if (
-          source.startsWith('virtual:vite-rsc/importer-resources?importer=')
-        ) {
-          assert(this.environment.name === 'rsc')
-          return '\0' + source
-        }
-      },
       load(id) {
         const { server } = manager
-        if (id.startsWith('\0virtual:vite-rsc/importer-resources?importer=')) {
-          const importer = decodeURIComponent(
-            parseIdQuery(id).query['importer']!,
-          )
+        const parsed = parseCssVirtual(id)
+        if (parsed?.type === 'rsc') {
+          assert(this.environment.name === 'rsc')
+          const importer = parsed.id
           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__virtual:vite-rsc/importer-resources-browser?importer=' +
-                encodeURIComponent(importer),
+              `@id/__x00__${toCssVirtual({ id: importer, type: 'rsc-browser' })}`,
             ]
             const deps = assetsURLOfDeps(
               { css: cssHrefs, js: jsHrefs },
@@ -1936,16 +1927,10 @@ function vitePluginRscCss(
             `
           }
         }
-        if (
-          id.startsWith(
-            '\0virtual:vite-rsc/importer-resources-browser?importer=',
-          )
-        ) {
+        if (parsed?.type === 'rsc-browser') {
           assert(this.environment.name === 'client')
           assert(this.environment.mode === 'dev')
-          const importer = decodeURIComponent(
-            parseIdQuery(id).query['importer']!,
-          )
+          const importer = parsed.id
           const result = collectCss(server.environments.rsc!, importer)
           let code = result.ids
             .map((id) => id.replace(/^\0/, ''))
@@ -1963,14 +1948,13 @@ function vitePluginRscCss(
           const mods = collectModuleDependents(ctx.modules)
           for (const mod of mods) {
             if (mod.id) {
-              const importer = encodeURIComponent(mod.id)
               invalidteModuleById(
                 server.environments.rsc!,
-                `\0virtual:vite-rsc/importer-resources?importer=${importer}`,
+                `\0` + toCssVirtual({ id: mod.id, type: 'rsc' }),
               )
               invalidteModuleById(
                 server.environments.client,
-                `\0virtual:vite-rsc/importer-resources-browser?importer=${importer}`,
+                `\0` + toCssVirtual({ id: mod.id, type: 'rsc-browser' }),
               )
             }
           }

packages/plugin-rsc/src/plugins/cjs.ts

@@ -1,11 +1,11 @@
 import { parseAstAsync, type Plugin } from 'vite'
-import { parseIdQuery } from './utils'
 import { findClosestPkgJsonPath } from 'vitefu'
 import path from 'node:path'
 import fs from 'node:fs'
 import * as esModuleLexer from 'es-module-lexer'
 import { transformCjsToEsm } from '../transforms/cjs'
 import { createDebug } from '@hiogawa/utils'
+import { parseIdQuery } from './shared'
 
 const debug = createDebug('vite-rsc:cjs')
 

packages/plugin-rsc/src/plugins/shared.ts

@@ -0,0 +1,29 @@
+type CssVirtual = {
+  id: string
+  type: 'ssr' | 'rsc' | 'rsc-browser'
+}
+
+export function toCssVirtual({ id, type }: CssVirtual) {
+  // ensure other plugins treat it as a plain js file
+  // e.g. https://github.com/vitejs/rolldown-vite/issues/372#issuecomment-3193401601
+  return `virtual:vite-rsc/css?type=${type}&id=${encodeURIComponent(id)}&lang.js`
+}
+
+export function parseCssVirtual(id: string): CssVirtual | undefined {
+  if (id.startsWith('\0virtual:vite-rsc/css?')) {
+    return parseIdQuery(id).query as any
+  }
+}
+
+// https://github.com/vitejs/vite-plugin-vue/blob/06931b1ea2b9299267374cb8eb4db27c0626774a/packages/plugin-vue/src/utils/query.ts#L13
+export function parseIdQuery(id: string): {
+  filename: string
+  query: {
+    [k: string]: string
+  }
+} {
+  if (!id.includes('?')) return { filename: id, query: {} }
+  const [filename, rawQuery] = id.split(`?`, 2) as [string, string]
+  const query = Object.fromEntries(new URLSearchParams(rawQuery))
+  return { filename, query }
+}

packages/plugin-rsc/src/plugins/utils.ts

@@ -16,19 +16,6 @@ export function evalValue<T = any>(rawValue: string): T {
   return fn()
 }
 
-// https://github.com/vitejs/vite-plugin-vue/blob/06931b1ea2b9299267374cb8eb4db27c0626774a/packages/plugin-vue/src/utils/query.ts#L13
-export function parseIdQuery(id: string): {
-  filename: string
-  query: {
-    [k: string]: string
-  }
-} {
-  if (!id.includes('?')) return { filename: id, query: {} }
-  const [filename, rawQuery] = id.split(`?`, 2) as [string, string]
-  const query = Object.fromEntries(new URLSearchParams(rawQuery))
-  return { filename, query }
-}
-
 // https://github.com/vitejs/vite/blob/946831f986cb797009b8178659d2b31f570c44ff/packages/vite/src/shared/utils.ts#L31-L34
 const postfixRE = /[?#].*$/
 export function cleanUrl(url: string): string {

packages/plugin-rsc/src/ssr.tsx

@@ -3,6 +3,7 @@ import * as clientReferences from 'virtual:vite-rsc/client-references'
 import * as ReactDOM from 'react-dom'
 import { setRequireModule } from './core/ssr'
 import type { ResolvedAssetDeps } from './plugin'
+import { toCssVirtual } from './plugins/shared'
 
 export { createServerConsumerManifest } from './core/ssr'
 
@@ -16,7 +17,7 @@ function initialize(): void {
       if (!import.meta.env.__vite_rsc_build__) {
         const mod = await import(/* @vite-ignore */ id)
         const modCss = await import(
-          /* @vite-ignore */ '/@id/__x00__virtual:vite-rsc/css/dev-ssr/' + id
+          /* @vite-ignore */ '/@id/__x00__' + toCssVirtual({ id, type: 'ssr' })
         )
         return wrapResourceProxy(mod, { js: [], css: modCss.default })
       } else {