diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 50cb6aac0..41886f6a7 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -68,6 +68,9 @@ jobs: - run: pnpm -C packages/react-server/examples/custom-out-dir cf-build - run: pnpm -C packages/react-server/examples/custom-out-dir test-e2e-cf-preview - run: pnpm -C packages/react-server/examples/custom-out-dir vc-build + - run: pnpm -C packages/react-server/examples/postcss-tailwind test-e2e + - run: pnpm -C packages/react-server/examples/postcss-tailwind build + - run: pnpm -C packages/react-server/examples/postcss-tailwind test-e2e-preview test-react-server-package: runs-on: ubuntu-latest diff --git a/packages/react-server/examples/next/playwright.config.ts b/packages/react-server/examples/next/playwright.config.mts similarity index 100% rename from packages/react-server/examples/next/playwright.config.ts rename to packages/react-server/examples/next/playwright.config.mts diff --git a/packages/react-server/examples/next/tsconfig.json b/packages/react-server/examples/next/tsconfig.json index d8b93235f..df6de7a87 100644 --- a/packages/react-server/examples/next/tsconfig.json +++ b/packages/react-server/examples/next/tsconfig.json @@ -22,6 +22,12 @@ "@/*": ["./*"] } }, - "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], + "include": [ + "next-env.d.ts", + "**/*.ts", + "**/*.tsx", + ".next/types/**/*.ts", + "*.mts" + ], "exclude": ["node_modules"] } diff --git a/packages/react-server/examples/postcss-tailwind/README.md b/packages/react-server/examples/postcss-tailwind/README.md new file mode 100644 index 000000000..9c06fee17 --- /dev/null +++ b/packages/react-server/examples/postcss-tailwind/README.md @@ -0,0 +1 @@ +# postcss-tailwind diff --git a/packages/react-server/examples/postcss-tailwind/app/_client.tsx b/packages/react-server/examples/postcss-tailwind/app/_client.tsx new file mode 100644 index 000000000..730312b2d --- /dev/null +++ b/packages/react-server/examples/postcss-tailwind/app/_client.tsx @@ -0,0 +1,16 @@ +"use client"; + +import React from "react"; + +export function TestClient() { + const [count, setCount] = React.useState(0); + + return ( + + ); +} diff --git a/packages/react-server/examples/postcss-tailwind/app/layout.tsx b/packages/react-server/examples/postcss-tailwind/app/layout.tsx new file mode 100644 index 000000000..3df6c7191 --- /dev/null +++ b/packages/react-server/examples/postcss-tailwind/app/layout.tsx @@ -0,0 +1,10 @@ +import "./styles.css"; +import type React from "react"; + +export default function Layout(props: React.PropsWithChildren) { + return ( + + {props.children} + + ); +} diff --git a/packages/react-server/examples/postcss-tailwind/app/page.tsx b/packages/react-server/examples/postcss-tailwind/app/page.tsx new file mode 100644 index 000000000..cac972943 --- /dev/null +++ b/packages/react-server/examples/postcss-tailwind/app/page.tsx @@ -0,0 +1,27 @@ +import { TestClient } from "./_client"; + +export default function Page() { + return ( +
+ + +
+ ); +} + +let serverCount = 0; + +function TestServer() { + return ( +
{ + "use server"; + serverCount += 1; + }} + > + +
+ ); +} diff --git a/packages/react-server/examples/postcss-tailwind/app/styles.css b/packages/react-server/examples/postcss-tailwind/app/styles.css new file mode 100644 index 000000000..b5c61c956 --- /dev/null +++ b/packages/react-server/examples/postcss-tailwind/app/styles.css @@ -0,0 +1,3 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; diff --git a/packages/react-server/examples/postcss-tailwind/e2e/basic.test.ts b/packages/react-server/examples/postcss-tailwind/e2e/basic.test.ts new file mode 100644 index 000000000..ac813af8d --- /dev/null +++ b/packages/react-server/examples/postcss-tailwind/e2e/basic.test.ts @@ -0,0 +1,58 @@ +import { type Page, expect, test } from "@playwright/test"; +import { + createEditor, + createReloadChecker, + testNoJs, + waitForHydration, +} from "./helper"; + +test("basic @js", async ({ page }) => { + await page.goto("/"); + await waitForHydration(page); + await testBasic(page); +}); + +testNoJs("basic @nojs", async ({ page }) => { + await page.goto("/"); + await testBasic(page); +}); + +async function testBasic(page: Page) { + await expect(page.getByRole("button", { name: "Test Server:" })).toHaveCSS( + "padding-left", + "8px", + ); + await expect(page.getByRole("button", { name: "Test Client:" })).toHaveCSS( + "padding-left", + "8px", + ); +} + +test("server hmr @dev", async ({ page }) => { + await page.goto("/"); + await waitForHydration(page); + await using _ = await createReloadChecker(page); + + using file = createEditor("app/page.tsx"); + file.edit((t) => + t.replace('