diff --git a/packages/plugin-rsc/src/plugin.ts b/packages/plugin-rsc/src/plugin.ts index adbbd2e7..b2c38904 100644 --- a/packages/plugin-rsc/src/plugin.ts +++ b/packages/plugin-rsc/src/plugin.ts @@ -238,6 +238,12 @@ export type RscPluginOptions = { /** server chunk which includes a corresponding client reference proxy module */ serverChunk: string }) => string | undefined + + /** + * Controls whether CSS links use React's `precedence` attribute. + * @default true + */ + cssLinkPrecedence?: boolean } export type PluginApi = { @@ -1014,6 +1020,7 @@ export function createRpcClient(params) { const manifest: AssetsManifest = { bootstrapScriptContent: `import(${serializeValueWithRuntime(entryUrl)})`, clientReferenceDeps: {}, + cssLinkPrecedence: rscPluginOptions.cssLinkPrecedence, } return `export default ${JSON.stringify(manifest, null, 2)}` } @@ -1087,6 +1094,7 @@ export function createRpcClient(params) { bootstrapScriptContent, clientReferenceDeps, serverResources, + cssLinkPrecedence: rscPluginOptions.cssLinkPrecedence, } } }, @@ -1981,6 +1989,7 @@ export type AssetsManifest = { bootstrapScriptContent: string | RuntimeAsset clientReferenceDeps: Record serverResources?: Record> + cssLinkPrecedence?: boolean } export type AssetDeps = { @@ -1992,6 +2001,7 @@ export type ResolvedAssetsManifest = { bootstrapScriptContent: string clientReferenceDeps: Record serverResources?: Record> + cssLinkPrecedence?: boolean } export type ResolvedAssetDeps = { @@ -2060,7 +2070,10 @@ function collectAssetDepsInner( // function vitePluginRscCss( - rscCssOptions: Pick = {}, + rscCssOptions: Pick< + RscPluginOptions, + 'rscCssTransform' | 'cssLinkPrecedence' + > = {}, manager: RscPluginManager, ): Plugin[] { function hasSpecialCssQuery(id: string): boolean { @@ -2320,6 +2333,7 @@ function vitePluginRscCss( return generateResourcesCode( serializeValueWithRuntime(deps), manager, + { cssLinkPrecedence: rscCssOptions.cssLinkPrecedence }, ) } else { const key = manager.toRelativeId(importer) @@ -2331,6 +2345,7 @@ function vitePluginRscCss( key, )}]`, manager, + { cssLinkPrecedence: rscCssOptions.cssLinkPrecedence }, )} ` } @@ -2370,11 +2385,17 @@ export default function RemoveDuplicateServerCss() { ] } -function generateResourcesCode(depsCode: string, manager: RscPluginManager) { +function generateResourcesCode( + depsCode: string, + manager: RscPluginManager, + options: { cssLinkPrecedence?: boolean } = {}, +) { + const usePrecedence = options.cssLinkPrecedence !== false const ResourcesFn = ( React: typeof import('react'), deps: ResolvedAssetDeps, RemoveDuplicateServerCss?: React.FC, + precedence?: string, ) => { return function Resources() { return React.createElement(React.Fragment, null, [ @@ -2382,7 +2403,7 @@ function generateResourcesCode(depsCode: string, manager: RscPluginManager) { React.createElement('link', { key: 'css:' + href, rel: 'stylesheet', - precedence: 'vite-rsc/importer-resources', + ...(precedence ? { precedence } : {}), href: href, 'data-rsc-css-href': href, }), @@ -2408,6 +2429,7 @@ export const Resources = (${ResourcesFn.toString()})( __vite_rsc_react__, ${depsCode}, RemoveDuplicateServerCss, + ${usePrecedence ? `"vite-rsc/importer-resources"` : `undefined`}, ); ` } diff --git a/packages/plugin-rsc/src/ssr.tsx b/packages/plugin-rsc/src/ssr.tsx index 752a1a51..3b4057ee 100644 --- a/packages/plugin-rsc/src/ssr.tsx +++ b/packages/plugin-rsc/src/ssr.tsx @@ -67,7 +67,10 @@ function preloadDeps(deps: ResolvedAssetDeps) { for (const href of deps.css) { ReactDOM.preinit(href, { as: 'style', - precedence: 'vite-rsc/client-reference', + precedence: + assetsManifest.cssLinkPrecedence !== false + ? 'vite-rsc/client-reference' + : undefined, }) } }