Add react-strict-dom/postcss-plugin

Author: javascripter

apps/examples/package.json

@@ -14,7 +14,6 @@
     "expo": "^52.0.6",
     "expo-build-properties": "~0.13.1",
     "expo-status-bar": "~2.0.0",
-    "postcss-react-strict-dom": "^0.0.5",
     "react": "~18.3.1",
     "react-dom": "~18.3.1",
     "react-native": "~0.76.1",

apps/examples/postcss.config.js

@@ -6,10 +6,10 @@
  */
 
 module.exports = {
-  plugins: {
-    'postcss-react-strict-dom': {
+  plugins: [
+    require('react-strict-dom/postcss-plugin')({
       include: ['src/**/*.{js,jsx,mjs,ts,tsx}']
-    },
-    autoprefixer: {}
-  }
+    }),
+    require('autoprefixer')
+  ]
 };

apps/website/docs/learn/01-installation.md

@@ -22,12 +22,6 @@ For web support, please make sure the following peer dependencies are installed:
 npm install react react-dom
 ```
 
-Extracting styles to static CSS requires the following PostCSS plugin:
-
-```
-npm install --save-dev postcss-react-strict-dom
-```
-
 ### Native
 
 For native support, please make sure the following peer dependencies are installed (note that using the new React Native architecture is required):

apps/website/docs/learn/02-environment-setup.md

@@ -47,32 +47,35 @@ module.exports = function (api) {
       // Expo's babel preset
       'babel-preset-expo',
       // React Strict DOM's babel preset
-      [reactStrictPreset, {
-        debug: dev,
-        dev,
-        platform
-      }]
+      [
+        reactStrictPreset,
+        {
+          debug: dev,
+          dev,
+          platform
+        }
+      ]
     ]
   };
 };
 ```
 
 ## PostCSS configuration
 
-[PostCSS](https://postcss.org/) is a tool for generating CSS. It's enabled by default in Expo and it's the recommended way to extract React Strict DOM styles to static CSS for web builds. Once the [postcss-react-strict-dom](https://github.com/javascripter/postcss-react-strict-dom) plugin is installed, it can be used to extract styles. Create a `postcss.config.js` file as follows.
+[PostCSS](https://postcss.org/) is a tool for generating CSS. It's enabled by default in Expo and it's the recommended way to extract React Strict DOM styles to static CSS for web builds. `react-strict-dom/postcss-plugin` can be used to extract styles. Create a `postcss.config.js` file as follows.
 
 ```js title="postcss.config.js"
 module.exports = {
   plugins: {
-    'postcss-react-strict-dom': {
+    require('react-strict-dom/postcss-plugin')({
       include: [
         // Include source files to watch for style changes
         'src/**/*.{js,jsx,mjs,ts,tsx}',
         // List any installed node_modules that include UI built with React Strict DOM
         'node_modules/<package-name>/*.js'
       ]
-    },
-    autoprefixer: {}
+    }),
+    require('autoprefixer')
   }
 };
 ```
@@ -122,7 +125,6 @@ Your app needs to include a CSS file that contains a `@stylex` directive. This a
 
 Next, import the CSS file in the entry file of your app.
 
-
 ```js title="index.js"
 // Required for CSS to work on Expo Web.
 import './stylex.css';

packages/react-strict-dom/package.json

@@ -14,6 +14,7 @@
       }
     },
     "./babel-preset": "./babel/preset.js",
+    "./postcss-plugin": "./postcss/plugin.js",
     "./runtime": "./dist/dom/runtime.js",
     "./package.json": "./package.json"
   },
@@ -35,6 +36,7 @@
   "dependencies": {
     "@babel/helper-module-imports": "^7.24.7",
     "@stylexjs/babel-plugin": "^0.9.3",
+    "@stylexjs/postcss-plugin": "^0.9.3",
     "@stylexjs/stylex": "^0.9.3",
     "postcss-value-parser": "^4.1.0"
   },

packages/react-strict-dom/postcss/plugin.js

@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ *
+ */
+
+const styleXPlugin = require('@stylexjs/postcss-plugin');
+
+const plugin = ({
+  cwd = process.cwd(),
+  // By default reuses the Babel configuration from the project root.
+  // Use `babelrc: false` to disable this behavior.
+  babelConfig = {},
+  include,
+  exclude
+}) => {
+  include = [
+    // Include the React Strict DOM package's source files by default
+    require.resolve('react-strict-dom'),
+    ...(include ?? [])
+  ];
+
+  return styleXPlugin({
+    cwd,
+    babelConfig,
+    include,
+    exclude,
+    useCSSLayers: false,
+    importSources: [
+      '@stylexjs/stylex',
+      [{ from: 'react-strict-dom', as: 'css' }]
+    ]
+  });
+};
+
+plugin.postcss = true;
+
+module.exports = plugin;