postcss-react-strict-dom

postcss-react-strict-dom is a PostCSS plugin that enables static CSS extraction with React Strict DOM, compatible with various bundlers like Next.js and Expo Web.

Installation

Install the plugin via npm or yarn:

npm install postcss-react-strict-dom --save-dev
# or
yarn add postcss-react-strict-dom --dev

Usage

Configure postcss.config.js to include postcss-react-strict-dom in your project.

PostCSS Configuration

Below is an example postcss.config.js setup for this plugin. By default, the plugin will reuse your project's Babel configuration for static CSS extraction.

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-react-strict-dom': {
      include: [
        'src/**/*.{js,jsx,ts,tsx}',
      ],
    },
    autoprefixer: {},
  },
}

Configuration Options

type Options = {
  include: string[]
  exclude?: string[]
  cwd: string
  babelConfig: babel.TransformOptions
}

• include: Array of paths or glob patterns to compile.
• exclude: Array of paths or glob patterns to exclude from compilation. Paths in exclude take precedence over include.
• cwd: Working directory for the plugin; defaults to process.cwd().
• babelConfig: Options for Babel configuration. By default, the plugin reads from babel.config.js in your project. For custom configurations, set babelrc: false and specify desired options. Refer to Babel Config Options for available options.

Babel Configuration

A separate Babel configuration file (babel.config.js) is required to support React Strict DOM. Configure it as shown below, referencing the react-strict-dom Babel preset.

Babel Config for React Strict DOM

Reference: React Strict DOM Babel Preset

// babel.config.js
import reactStrictBabelPreset from 'react-strict-dom/babel-preset'

export default function babelConfig() {
  return {
    presets: [[reactStrictBabelPreset, { rootDir: process.cwd() }]],
  }
}

Importing a global CSS file in your project

Create a global.css in your project:

/* src/global.css */
@stylex;

Then, import the file in your root layout file:

import '@/global.css'

The @stylex directive will be automatically replaced with the statically extracted CSS by this plugin.

Running the Plugin

Once configured, the plugin will automatically process and extract static CSS based on your defined include and exclude options. This setup supports web-only projects like Next.js and Remix, and universal platforms with support for native apps like Expo.

Examples

• Expo Web Integration: Supports Expo Web with support for DOM components.
• Next.js Integration: Next.js demo. Uses the official Babel preset under the hood.

License

This project is licensed under the MIT License. See the LICENSE file for details.

Acknowledgments

Special thanks to the contributors of React Strict DOM and StyleX for their foundational work in CSS-in-JS and static extraction patterns.