Next.js + postcss-react-strict-dom Demo

What

This is a demo of how to extract StyleX CSS for Next.js using postcss-react-strict-dom.

This is a continuation of StyleX CSS extraction method used for React-Strict-DOM's official Expo Web examples using postcss-react-strict-dom, but for Next.js 15 and App Dir.

See related issues and PRs for context:

• facebook/react-strict-dom#236
• facebook/react-strict-dom#34
• facebook/react-strict-dom#239

How

1. Install dependencies

Install required dependencies:

bun add react-strict-dom
bun add --save-dev postcss-react-strict-dom autoprefixer

Install @stylexjs/babel-plugin explicitly (not sure this is a upstream bug but this dependency is required for running).

bun add --save-dev @stylexjs/[email protected]

2. Apply patches

This repository tries to run the official example from RSD as closely as possible.

Please see package.json and patches/ dir for more details:

1. Patch for "[email protected]" is applied to apply latest upstream changes not published yet on npm.

2. Patches borrowed from RSD (@stylexjs/[email protected]" and "@stylexjs/[email protected]") are applied to render some official examples correctly.

3. Configure PostCSS Plugin for Next.js

Please see next.config.ts, babel.config.js, and postcss.config.js for correct configuration for Next.js.

4.Run

In development:

bun run dev

In production:

bun run build && bun run start

1. / renders the official example (copied and lightly-modified for Next.js)

2. /server-action-demo is a test page to confirm Server Actions still work correctly