Add react-strict-dom/postcss-plugin

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,33 +47,36 @@ 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': {
+  plugins: [
+    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';