Merge remote-tracking branch 'upstream/main' into chore-rsc-nightly

Author: github-actions[bot]

packages/plugin-react/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 ## Unreleased
 
+### Fix `reactRefreshHost` option on rolldown-vite ([#716](https://github.com/vitejs/vite-plugin-react/pull/716))
+
+### Fix `RefreshRuntime` being injected twice for class components on rolldown-vite ([#708](https://github.com/vitejs/vite-plugin-react/pull/708))
+
+### Skip `babel-plugin-react-compiler` on non client environment ([689](https://github.com/vitejs/vite-plugin-react/pull/689))
+
 ## 5.0.0 (2025-08-07)
 
 ## 5.0.0-beta.0 (2025-07-28)

packages/plugin-react/src/index.ts

@@ -255,14 +255,15 @@ export default function viteReact(opts: Options = {}): Plugin[] {
 
         const isJSX = filepath.endsWith('x')
         const useFastRefresh =
+          !isRolldownVite &&
           !skipFastRefresh &&
           !ssr &&
           (isJSX ||
             (opts.jsxRuntime === 'classic'
               ? importReactRE.test(code)
               : code.includes(jsxImportDevRuntime) ||
                 code.includes(jsxImportRuntime)))
-        if (useFastRefresh && !isRolldownVite) {
+        if (useFastRefresh) {
           plugins.push([
             await loadPlugin('react-refresh/babel'),
             { skipEnvCheck: true },
@@ -368,6 +369,7 @@ export default function viteReact(opts: Options = {}): Plugin[] {
               avoidSourceMapOption,
               '@vitejs/plugin-react',
               id,
+              opts.reactRefreshHost,
             )
             return { code: newCode, map: null }
           },

packages/plugin-rsc/e2e/basic.test.ts

@@ -1152,4 +1152,31 @@ function defineTest(f: Fixture) {
       '(cacheFnCount = 4, nonCacheFnCount = 6)',
     )
   })
+
+  test('css queries', async ({ page }) => {
+    await page.goto(f.url())
+    await waitForHydration(page)
+
+    const tests = [
+      ['.test-css-url-client', 'rgb(255, 100, 0)'],
+      ['.test-css-inline-client', 'rgb(255, 50, 0)'],
+      ['.test-css-raw-client', 'rgb(255, 0, 0)'],
+      ['.test-css-url-server', 'rgb(0, 255, 100)'],
+      ['.test-css-inline-server', 'rgb(0, 255, 50)'],
+      ['.test-css-raw-server', 'rgb(0, 255, 0)'],
+    ] as const
+
+    // css with queries are not injected automatically
+    for (const [selector] of tests) {
+      await expect(page.locator(selector)).toHaveCSS('color', 'rgb(0, 0, 0)')
+    }
+
+    // inject css manually
+    await page.getByRole('button', { name: 'test-css-queries' }).click()
+
+    // verify styles
+    for (const [selector, color] of tests) {
+      await expect(page.locator(selector)).toHaveCSS('color', color)
+    }
+  })
 }

packages/plugin-rsc/e2e/root.test.ts

@@ -0,0 +1,47 @@
+import { test } from '@playwright/test'
+import { setupInlineFixture, useFixture } from './fixture'
+import { defineStarterTest } from './starter'
+import fs from 'node:fs'
+import path from 'node:path'
+
+test.describe(() => {
+  const root = 'examples/e2e/temp/root'
+
+  test.beforeAll(async () => {
+    await setupInlineFixture({
+      src: 'examples/starter',
+      dest: root,
+      files: {
+        'vite.config.base.ts': { cp: 'vite.config.ts' },
+        'vite.config.ts': /* js */ `
+          import baseConfig from './vite.config.base.ts'
+          import path from "node:path";
+          baseConfig.root = "./custom-root";
+          for (const e of Object.values(baseConfig.environments)) {
+            e.build.rollupOptions.input.index = path.resolve(
+              'custom-root',
+              e.build.rollupOptions.input.index,
+          );
+          }
+          export default baseConfig;
+        `,
+      },
+    })
+    fs.mkdirSync(`${root}/custom-root`, { recursive: true })
+    fs.renameSync(`${root}/src`, `${root}/custom-root/src`)
+    fs.renameSync(`${root}/public`, `${root}/custom-root/public`)
+  })
+
+  test.describe('dev-root', () => {
+    const f = useFixture({ root, mode: 'dev' })
+    const oldCreateEditor = f.createEditor
+    f.createEditor = (filePath: string) =>
+      oldCreateEditor(path.resolve(root, 'custom-root', filePath))
+    defineStarterTest(f)
+  })
+
+  test.describe('build-root', () => {
+    const f = useFixture({ root, mode: 'build' })
+    defineStarterTest(f)
+  })
+})

packages/plugin-rsc/examples/basic/src/routes/css-queries/client-inline.css

@@ -0,0 +1,3 @@
+.test-css-inline-client {
+  color: rgb(255, 50, 0);
+}

packages/plugin-rsc/examples/basic/src/routes/css-queries/client-raw.css

@@ -0,0 +1,3 @@
+.test-css-raw-client {
+  color: rgb(255, 0, 0);
+}

packages/plugin-rsc/examples/basic/src/routes/css-queries/client-url.css

@@ -0,0 +1,3 @@
+.test-css-url-client {
+  color: rgb(255, 100, 0);
+}

packages/plugin-rsc/examples/basic/src/routes/css-queries/client.tsx

@@ -0,0 +1,40 @@
+'use client'
+
+import cssUrl from './client-url.css?url'
+import cssInline from './client-inline.css?inline'
+import cssRaw from './client-raw.css?raw'
+import React from 'react'
+
+export function TestCssQueriesClient(props: {
+  serverUrl: string
+  serverInline: string
+  serverRaw: string
+}) {
+  const [enabled, setEnabled] = React.useState(false)
+
+  function urlWithHmr(href: string) {
+    if (import.meta.hot) {
+      href += '?t=' + Date.now()
+    }
+    return href
+  }
+
+  return (
+    <div>
+      <button onClick={() => setEnabled(!enabled)}>test-css-queries</button>
+      {enabled && (
+        <>
+          <link rel="stylesheet" href={urlWithHmr(cssUrl)} />
+          <style>{cssInline}</style>
+          <style>{cssRaw}</style>
+          <link rel="stylesheet" href={urlWithHmr(props.serverUrl)} />
+          <style>{props.serverInline}</style>
+          <style>{props.serverRaw}</style>
+        </>
+      )}
+      <div className="test-css-url-client">test-css-url-client</div>
+      <div className="test-css-inline-client">test-css-inline-client</div>
+      <div className="test-css-raw-client">test-css-raw-client</div>
+    </div>
+  )
+}

packages/plugin-rsc/examples/basic/src/routes/css-queries/server-inline.css

@@ -0,0 +1,3 @@
+.test-css-inline-server {
+  color: rgb(0, 255, 50);
+}

packages/plugin-rsc/examples/basic/src/routes/css-queries/server-raw.css

@@ -0,0 +1,3 @@
+.test-css-raw-server {
+  color: rgb(0, 255, 0);
+}