Skip to content

Commit 464ee74

Browse files
fix(rsc): Load all css links to support css with rsc (redwoodjs#10544)
**Problem** Currently we don't have good css support with RSC. Therefore the pages are unstyled and look ugly. **Changes** 1. We parse the build manifests and collect all css assets that could be loaded. We then pass these through to the `Document` component which ultimately causes them to be inserted into the HTML stream as link tags. 2. Removes the vite plugin which used to add `preinit` calls. It's no longer used and can be revived from the git history if needed. **Notes** 1. This link was helpful in confirming that this isn't a crazy road to be going down: https://vitejs.dev/guide/backend-integration.html#backend-integration 3. We can of course optimise in the future. We can go back to trying to get `preinit` working or we can stop loading some of these css assets by determining if they need to be loaded or not based on the url we're responding to. --------- Co-authored-by: Tobbe Lundberg <tobbe@tlundberg.com>
1 parent 747ce41 commit 464ee74

13 files changed

+87
-1592
lines changed

packages/vite/src/buildRscClientAndServer.ts

+1-3
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,7 @@ import { rscBuildRwEnvVars } from './rsc/rscBuildRwEnvVars.js'
77

88
export const buildRscClientAndServer = async () => {
99
// Analyze all files and generate a list of RSCs and RSFs
10-
const { clientEntryFiles, serverEntryFiles, componentImportMap } =
11-
await rscBuildAnalyze()
10+
const { clientEntryFiles, serverEntryFiles } = await rscBuildAnalyze()
1211

1312
// Generate the client bundle
1413
const clientBuildOutput = await rscBuildClient(clientEntryFiles)
@@ -18,7 +17,6 @@ export const buildRscClientAndServer = async () => {
1817
clientEntryFiles,
1918
serverEntryFiles,
2019
{},
21-
componentImportMap,
2220
)
2321

2422
// Copy CSS assets from server to client

packages/vite/src/clientSsr.ts

+7-1
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import type { default as RSDWServerModule } from 'react-server-dom-webpack/serve
88
import { getPaths } from '@redwoodjs/project-config'
99

1010
import { StatusError } from './lib/StatusError.js'
11+
import { getRscStylesheetLinkGenerator } from './rsc/rscCss.js'
1112
import { moduleMap } from './streaming/ssrModuleMap.js'
1213
import { importModule } from './streaming/streamHelpers.js'
1314
import { makeFilePath } from './utils.js'
@@ -97,6 +98,8 @@ export function renderFromDist<TProps extends Record<string, any>>(
9798
) {
9899
console.log('renderFromDist rscId', rscId)
99100

101+
const cssLinks = getRscStylesheetLinkGenerator()()
102+
100103
// Create temporary client component that wraps the component (Page, most
101104
// likely) returned by the `createFromReadableStream` call.
102105
const SsrComponent = async (props: TProps) => {
@@ -153,7 +156,10 @@ export function renderFromDist<TProps extends Record<string, any>>(
153156
const stream = renderToReadableStream(
154157
// createElement(layout, undefined, createElement(page, props)),
155158
// @ts-expect-error - WIP
156-
createElement(ServerEntry, { location: { pathname: rscId } }),
159+
createElement(ServerEntry, {
160+
location: { pathname: rscId },
161+
css: cssLinks,
162+
}),
157163
bundlerConfig,
158164
)
159165

0 commit comments

Comments
 (0)