test(rsc): organize css tests

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

@@ -567,6 +567,15 @@ function defineTest(f: Fixture) {
   test('css @js', async ({ page }) => {
     await page.goto(f.url())
     await waitForHydration(page)
+    await testCssBasic(page)
+  })
+
+  testNoJs('css @nojs', async ({ page }) => {
+    await page.goto(f.url())
+    await testCss(page)
+  })
+
+  async function testCssBasic(page: Page) {
     await testCss(page)
     await expect(page.locator('.test-dep-css-in-server')).toHaveCSS(
       'color',
@@ -576,20 +585,23 @@ function defineTest(f: Fixture) {
       'color',
       'rgb(255, 165, 0)',
     )
-  })
-
-  testNoJs('css @nojs', async ({ page }) => {
-    await page.goto(f.url())
-    await testCss(page)
-    await expect(page.locator('.test-dep-css-in-server')).toHaveCSS(
+    await expect(page.getByTestId('css-module-client')).toHaveCSS(
       'color',
       'rgb(255, 165, 0)',
     )
-    await expect(page.locator('.test-style-server-manual')).toHaveCSS(
+    await expect(page.getByTestId('css-module-server')).toHaveCSS(
       'color',
       'rgb(255, 165, 0)',
     )
-  })
+    await expect(page.locator('.test-style-url-client')).toHaveCSS(
+      'color',
+      'rgb(255, 165, 0)',
+    )
+    await expect(page.locator('.test-style-url-server')).toHaveCSS(
+      'color',
+      'rgb(255, 165, 0)',
+    )
+  }
 
   async function testCss(page: Page, color = 'rgb(255, 165, 0)') {
     await expect(page.locator('.test-style-client')).toHaveCSS('color', color)
@@ -783,128 +795,84 @@ function defineTest(f: Fixture) {
         )
       }).toPass()
     }
-  })
 
-  test('css client no ssr', async ({ page }) => {
-    await page.goto(f.url())
-    await waitForHydration(page)
-    await using _ = await expectNoReload(page)
-    await page.locator("a[href='?test-client-style-no-ssr']").click()
-    await expect(page.locator('.test-style-client-no-ssr')).toHaveCSS(
-      'color',
-      'rgb(0, 200, 100)',
-    )
-  })
-
-  test('css module client @js', async ({ page }) => {
-    await page.goto(f.url())
-    await waitForHydration(page)
-    await expect(page.getByTestId('css-module-client')).toHaveCSS(
-      'color',
-      'rgb(255, 165, 0)',
-    )
-
-    if (f.mode !== 'dev') return
-
-    // test client css module HMR
-    await using _ = await expectNoReload(page)
-    const editor = f.createEditor('src/routes/style-client/client.module.css')
-    editor.edit((s) => s.replaceAll('rgb(255, 165, 0)', 'rgb(0, 165, 255)'))
-    await expect(page.getByTestId('css-module-client')).toHaveCSS(
-      'color',
-      'rgb(0, 165, 255)',
-    )
-    editor.reset()
-    await expect(page.getByTestId('css-module-client')).toHaveCSS(
-      'color',
-      'rgb(255, 165, 0)',
-    )
-  })
-
-  test('css module server @js', async ({ page }) => {
-    await page.goto(f.url())
-    await waitForHydration(page)
-    await expect(page.getByTestId('css-module-server')).toHaveCSS(
-      'color',
-      'rgb(255, 165, 0)',
-    )
-
-    if (f.mode !== 'dev') return
-
-    // test server css module HMR
-    await using _ = await expectNoReload(page)
-    const editor = f.createEditor('src/routes/style-server/server.module.css')
-    editor.edit((s) => s.replaceAll('rgb(255, 165, 0)', 'rgb(0, 165, 255)'))
-    await expect(page.getByTestId('css-module-server')).toHaveCSS(
-      'color',
-      'rgb(0, 165, 255)',
-    )
-    editor.reset()
-    await expect(page.getByTestId('css-module-server')).toHaveCSS(
-      'color',
-      'rgb(255, 165, 0)',
-    )
-  })
-
-  testNoJs('css module @nojs', async ({ page }) => {
-    await page.goto(f.url())
-    await expect(page.getByTestId('css-module-client')).toHaveCSS(
-      'color',
-      'rgb(255, 165, 0)',
-    )
-    await expect(page.getByTestId('css-module-server')).toHaveCSS(
-      'color',
-      'rgb(255, 165, 0)',
-    )
-  })
+    test('css module client hmr', async ({ page }) => {
+      await page.goto(f.url())
+      await waitForHydration(page)
+      await using _ = await expectNoReload(page)
+      const editor = f.createEditor('src/routes/style-client/client.module.css')
+      editor.edit((s) => s.replaceAll('rgb(255, 165, 0)', 'rgb(0, 165, 255)'))
+      await expect(page.getByTestId('css-module-client')).toHaveCSS(
+        'color',
+        'rgb(0, 165, 255)',
+      )
+      editor.reset()
+      await expect(page.getByTestId('css-module-client')).toHaveCSS(
+        'color',
+        'rgb(255, 165, 0)',
+      )
+    })
 
-  test('css url client @js', async ({ page }) => {
-    await page.goto(f.url())
-    await waitForHydration(page)
-    await expect(page.locator('.test-style-url-client')).toHaveCSS(
-      'color',
-      'rgb(255, 165, 0)',
-    )
+    test('css module server hmr', async ({ page }) => {
+      await page.goto(f.url())
+      await waitForHydration(page)
+      await using _ = await expectNoReload(page)
+      const editor = f.createEditor('src/routes/style-server/server.module.css')
+      editor.edit((s) => s.replaceAll('rgb(255, 165, 0)', 'rgb(0, 165, 255)'))
+      await expect(page.getByTestId('css-module-server')).toHaveCSS(
+        'color',
+        'rgb(0, 165, 255)',
+      )
+      editor.reset()
+      await expect(page.getByTestId('css-module-server')).toHaveCSS(
+        'color',
+        'rgb(255, 165, 0)',
+      )
+    })
 
-    if (f.mode !== 'dev') return
+    test('css url client hmr', async ({ page }) => {
+      await page.goto(f.url())
+      await waitForHydration(page)
+      await using _ = await expectNoReload(page)
+      const editor = f.createEditor('src/routes/style-client/client-url.css')
+      editor.edit((s) => s.replaceAll('rgb(255, 165, 0)', 'rgb(0, 165, 255)'))
+      await expect(page.locator('.test-style-url-client')).toHaveCSS(
+        'color',
+        'rgb(0, 165, 255)',
+      )
+      editor.reset()
+      await expect(page.locator('.test-style-url-client')).toHaveCSS(
+        'color',
+        'rgb(255, 165, 0)',
+      )
+    })
 
-    // test client css url HMR
-    await using _ = await expectNoReload(page)
-    const editor = f.createEditor('src/routes/style-client/client-url.css')
-    editor.edit((s) => s.replaceAll('rgb(255, 165, 0)', 'rgb(0, 165, 255)'))
-    await expect(page.locator('.test-style-url-client')).toHaveCSS(
-      'color',
-      'rgb(0, 165, 255)',
-    )
-    editor.reset()
-    await expect(page.locator('.test-style-url-client')).toHaveCSS(
-      'color',
-      'rgb(255, 165, 0)',
-    )
+    test('css url server hmr', async ({ page }) => {
+      await page.goto(f.url())
+      await waitForHydration(page)
+      await using _ = await expectNoReload(page)
+      const editor = f.createEditor('src/routes/style-server/server-url.css')
+      editor.edit((s) => s.replaceAll('rgb(255, 165, 0)', 'rgb(0, 165, 255)'))
+      await expect(page.locator('.test-style-url-server')).toHaveCSS(
+        'color',
+        'rgb(0, 165, 255)',
+      )
+      editor.reset()
+      await expect(page.locator('.test-style-url-server')).toHaveCSS(
+        'color',
+        'rgb(255, 165, 0)',
+      )
+    })
   })
 
-  test('css url server @js', async ({ page }) => {
+  test('css client no ssr', async ({ page }) => {
     await page.goto(f.url())
     await waitForHydration(page)
-    await expect(page.locator('.test-style-url-server')).toHaveCSS(
-      'color',
-      'rgb(255, 165, 0)',
-    )
-
-    if (f.mode !== 'dev') return
-
-    // test server css url HMR
     await using _ = await expectNoReload(page)
-    const editor = f.createEditor('src/routes/style-server/server-url.css')
-    editor.edit((s) => s.replaceAll('rgb(255, 165, 0)', 'rgb(0, 165, 255)'))
-    await expect(page.locator('.test-style-url-server')).toHaveCSS(
-      'color',
-      'rgb(0, 165, 255)',
-    )
-    editor.reset()
-    await expect(page.locator('.test-style-url-server')).toHaveCSS(
+    await page.locator("a[href='?test-client-style-no-ssr']").click()
+    await expect(page.locator('.test-style-client-no-ssr')).toHaveCSS(
       'color',
-      'rgb(255, 165, 0)',
+      'rgb(0, 200, 100)',
     )
   })
 

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

@@ -15,6 +15,7 @@ export function TestCssQueriesClient(props: {
   return (
     <div>
       <button onClick={() => setEnabled(!enabled)}>test-css-queries</button>
+      <br />
       {enabled && (
         <>
           <link rel="stylesheet" href={cssUrl} />
@@ -25,9 +26,11 @@ export function TestCssQueriesClient(props: {
           <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>
+      <span className="test-css-url-client">test-css-url-client</span>
+      <span>|</span>
+      <span className="test-css-inline-client">test-css-inline-client</span>
+      <span>|</span>
+      <span className="test-css-raw-client">test-css-raw-client</span>
     </div>
   )
 }

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

@@ -11,11 +11,11 @@ export function TestCssQueries() {
         serverInline={cssInline}
         serverRaw={cssRaw}
       />
-      <div>
-        <div className="test-css-url-server">test-css-url-server</div>
-        <div className="test-css-inline-server">test-css-inline-server</div>
-        <div className="test-css-raw-server">test-css-raw-server</div>
-      </div>
+      <span className="test-css-url-server">test-css-url-server</span>
+      <span>|</span>
+      <span className="test-css-inline-server">test-css-inline-server</span>
+      <span>|</span>
+      <span className="test-css-raw-server">test-css-raw-server</span>
     </div>
   )
 }

packages/plugin-rsc/examples/basic/src/routes/root.tsx

@@ -23,8 +23,6 @@ import { TestSerializationServer } from './serialization/server'
 import { TestCssClientNoSsr } from './style-client-no-ssr/server'
 import { TestStyleClient } from './style-client/client'
 import { TestStyleServer } from './style-server/server'
-import { TestTailwindClient } from './tailwind/client'
-import { TestTailwindServer } from './tailwind/server'
 import { TestTemporaryReference } from './temporary-reference/client'
 import { TestUseCache } from './use-cache/server'
 import { TestReactCache } from './react-cache/server'
@@ -42,6 +40,7 @@ import { TestHmrSwitchServer } from './hmr-switch/server'
 import { TestHmrSwitchClient } from './hmr-switch/client'
 import { TestTreeShakeServer } from './tree-shake/server'
 import { TestClientChunkServer } from './chunk/server'
+import { TestTailwind } from './tailwind'
 
 export function Root(props: { url: URL }) {
   return (
@@ -61,8 +60,7 @@ export function Root(props: { url: URL }) {
         <TestStyleClient />
         <TestStyleServer />
         <TestCssClientNoSsr url={props.url} />
-        <TestTailwindClient />
-        <TestTailwindServer />
+        <TestTailwind />
         <TestDepCssInServer />
         <TestHydrationMismatch url={props.url} />
         <TestHmrClientDep />

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

@@ -7,18 +7,21 @@ import styleUrl from './client-url.css?url'
 
 export function TestStyleClient() {
   return (
-    <>
+    <div style={{ display: 'flex' }}>
       <div className="test-style-client">test-style-client</div>
+      <span>|</span>
       <div data-testid="css-module-client" className={styles.client}>
         test-css-module-client
       </div>
+      <span>|</span>
       <link
         rel="stylesheet"
         href={styleUrl}
         precedence="test-style-manual-link"
       />
       <div className="test-style-url-client">test-style-url-client</div>
+      <span>|</span>
       <TestClientDep />
-    </>
+    </div>
   )
 }

packages/plugin-rsc/examples/basic/src/routes/style-server/server.tsx

@@ -4,23 +4,26 @@ import styleUrl from './server-url.css?url'
 
 export function TestStyleServer() {
   return (
-    <>
+    <div style={{ display: 'flex' }}>
       <div className="test-style-server">test-style-server</div>
+      <span>|</span>
       <div data-testid="css-module-server" className={styles.server}>
         test-css-module-server
       </div>
+      <span>|</span>
       <link
         rel="stylesheet"
         href={styleUrl}
         precedence="test-style-manual-link"
       />
       <div className="test-style-url-server">test-style-url-server</div>
+      <span>|</span>
       <link
         rel="stylesheet"
         href="/test-style-server-manual.css"
         precedence="test-style-manual-link"
       />
       <div className="test-style-server-manual">test-style-server-manual</div>
-    </>
+    </div>
   )
 }

packages/plugin-rsc/examples/basic/src/routes/tailwind/index.tsx

@@ -0,0 +1,12 @@
+import { TestTailwindClient } from './client'
+import { TestTailwindServer } from './server'
+
+export function TestTailwind() {
+  return (
+    <div style={{ display: 'flex' }}>
+      <TestTailwindClient />
+      <span>|</span>
+      <TestTailwindServer />
+    </div>
+  )
+}