diff --git a/apps/examples/package.json b/apps/examples/package.json index a4e989be..d3c09c1a 100644 --- a/apps/examples/package.json +++ b/apps/examples/package.json @@ -14,7 +14,6 @@ "expo": "^53.0.11", "expo-build-properties": "~0.14.6", "expo-status-bar": "~2.2.3", - "postcss-react-strict-dom": "^0.0.5", "react": "~19.0.0", "react-dom": "~19.0.0", "react-native": "~0.79.5", diff --git a/apps/examples/postcss.config.js b/apps/examples/postcss.config.js index 2fc9ab8d..08583eca 100644 --- a/apps/examples/postcss.config.js +++ b/apps/examples/postcss.config.js @@ -6,11 +6,10 @@ */ module.exports = { - plugins: { - 'postcss-react-strict-dom': { - include: ['src/**/*.{js,jsx,mjs,ts,tsx}'], - useLayers: true - }, - autoprefixer: {} - } + plugins: [ + require('react-strict-dom/postcss-plugin')({ + include: ['src/**/*.{js,jsx,mjs,ts,tsx}'] + }), + require('autoprefixer') + ] }; diff --git a/apps/website/docs/learn/01-installation.md b/apps/website/docs/learn/01-installation.md index 97d382fd..2c1c01bd 100644 --- a/apps/website/docs/learn/01-installation.md +++ b/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. diff --git a/apps/website/docs/learn/02-environment-setup.md b/apps/website/docs/learn/02-environment-setup.md index e2b18d5f..65246e5d 100644 --- a/apps/website/docs/learn/02-environment-setup.md +++ b/apps/website/docs/learn/02-environment-setup.md @@ -47,11 +47,14 @@ 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 + } + ] ] }; }; @@ -59,20 +62,20 @@ module.exports = function (api) { ## 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//*.js' ] - }, - autoprefixer: {} + }), + require('autoprefixer') } }; ``` @@ -120,7 +123,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'; diff --git a/package-lock.json b/package-lock.json index aab3cf36..681ba65a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -55,7 +55,6 @@ "expo": "^53.0.11", "expo-build-properties": "~0.14.6", "expo-status-bar": "~2.2.3", - "postcss-react-strict-dom": "^0.0.5", "react": "~19.0.0", "react-dom": "~19.0.0", "react-native": "~0.79.5", @@ -7389,9 +7388,9 @@ } }, "node_modules/@stylexjs/babel-plugin": { - "version": "0.13.1", - "resolved": "https://registry.npmjs.org/@stylexjs/babel-plugin/-/babel-plugin-0.13.1.tgz", - "integrity": "sha512-W3l025ebB88GP/XO2NCNjXFMQYkl7YqWk/z2UfvXRYY8LoQ7O7fhds+0iLJ8R+39CerpFU1CDHWIbPhAuLUKtA==", + "version": "0.14.1", + "resolved": "https://registry.npmjs.org/@stylexjs/babel-plugin/-/babel-plugin-0.14.1.tgz", + "integrity": "sha512-K7KzSfdFaWKJqZztR0haXowu3lmc0RXDTWIAKBADOChEEw0Z08e8FD3C97NHAHCktgsSc/bCe85g+wmu9a4xuQ==", "license": "MIT", "dependencies": { "@babel/core": "^7.26.8", @@ -7399,14 +7398,40 @@ "@babel/traverse": "^7.26.8", "@babel/types": "^7.26.8", "@dual-bundle/import-meta-resolve": "^4.1.0", - "@stylexjs/stylex": "0.13.1", + "@stylexjs/stylex": "0.14.1", "postcss-value-parser": "^4.1.0" } }, + "node_modules/@stylexjs/postcss-plugin": { + "version": "0.14.1", + "resolved": "https://registry.npmjs.org/@stylexjs/postcss-plugin/-/postcss-plugin-0.14.1.tgz", + "integrity": "sha512-qU9IGeZCQIiyZtB5zAIvuq89vbEcjPwMJ6R8R1NANJ0vfyGeLgltbzMCoeiYfUBkK/XxoaitAkHVUt7F7j7v/Q==", + "license": "MIT", + "dependencies": { + "@babel/core": "^7.26.8", + "@stylexjs/babel-plugin": "0.14.1", + "fast-glob": "^3.3.2", + "glob-parent": "^6.0.2", + "is-glob": "^4.0.3", + "postcss": "^8.4.49" + } + }, + "node_modules/@stylexjs/postcss-plugin/node_modules/glob-parent": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz", + "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==", + "license": "ISC", + "dependencies": { + "is-glob": "^4.0.3" + }, + "engines": { + "node": ">=10.13.0" + } + }, "node_modules/@stylexjs/stylex": { - "version": "0.13.1", - "resolved": "https://registry.npmjs.org/@stylexjs/stylex/-/stylex-0.13.1.tgz", - "integrity": "sha512-s/aRE+pGaroMSttMDlrSMHf1lTF+uGe4ncWoRMlKZav6pg5g11sWuJojgA640aZy9jFgWvWSWbXzyUzeoDuMUQ==", + "version": "0.14.1", + "resolved": "https://registry.npmjs.org/@stylexjs/stylex/-/stylex-0.14.1.tgz", + "integrity": "sha512-UlAGhGUHTqZoMThHdpLUFhO0fjWxJ3VDFRsGK0mNwCD4IEe2EPkIjtZTjHZepidDAbUcNoXlTQoK/y1fcd5f/w==", "license": "MIT", "dependencies": { "css-mediaquery": "^0.1.2", @@ -24565,36 +24590,6 @@ "node": ">=4" } }, - "node_modules/postcss-react-strict-dom": { - "version": "0.0.5", - "resolved": "https://registry.npmjs.org/postcss-react-strict-dom/-/postcss-react-strict-dom-0.0.5.tgz", - "integrity": "sha512-j8t8G1Q6v7qRwJpkUPOOTJhLscYAtNIjB0+U0CAunTzSmTzX3M/KJbpG9ZYlaieRiOBH8pveBTEWXIvawKzWXA==", - "license": "MIT", - "dependencies": { - "fast-glob": "^3.3.2", - "glob-parent": "^6.0.2", - "is-glob": "^4.0.3" - }, - "engines": { - "node": ">=18.0.0" - }, - "peerDependencies": { - "postcss": "*", - "react-strict-dom": "*" - } - }, - "node_modules/postcss-react-strict-dom/node_modules/glob-parent": { - "version": "6.0.2", - "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz", - "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==", - "license": "ISC", - "dependencies": { - "is-glob": "^4.0.3" - }, - "engines": { - "node": ">=10.13.0" - } - }, "node_modules/postcss-reduce-idents": { "version": "6.0.3", "resolved": "https://registry.npmjs.org/postcss-reduce-idents/-/postcss-reduce-idents-6.0.3.tgz", @@ -30396,8 +30391,9 @@ "license": "MIT", "dependencies": { "@babel/helper-module-imports": "^7.24.7", - "@stylexjs/babel-plugin": "^0.13.1", - "@stylexjs/stylex": "^0.13.1", + "@stylexjs/babel-plugin": "^0.14.1", + "@stylexjs/postcss-plugin": "^0.14.1", + "@stylexjs/stylex": "^0.14.1", "postcss-value-parser": "^4.1.0" }, "devDependencies": { diff --git a/packages/react-strict-dom/package.json b/packages/react-strict-dom/package.json index 8d673b76..44be855a 100644 --- a/packages/react-strict-dom/package.json +++ b/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" }, @@ -34,8 +35,9 @@ }, "dependencies": { "@babel/helper-module-imports": "^7.24.7", - "@stylexjs/babel-plugin": "^0.13.1", - "@stylexjs/stylex": "^0.13.1", + "@stylexjs/babel-plugin": "^0.14.1", + "@stylexjs/stylex": "^0.14.1", + "@stylexjs/postcss-plugin": "^0.14.1", "postcss-value-parser": "^4.1.0" }, "devDependencies": { diff --git a/packages/react-strict-dom/postcss/plugin.js b/packages/react-strict-dom/postcss/plugin.js new file mode 100644 index 00000000..9975ef2f --- /dev/null +++ b/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'), + require.resolve('react-strict-dom/runtime'), + ...(include ?? []) + ]; + + return styleXPlugin({ + cwd, + babelConfig, + include, + exclude, + useCSSLayers: true, + importSources: [ + '@stylexjs/stylex', + 'stylex', + { from: 'react-strict-dom', as: 'css' } + ] + }); +}; + +plugin.postcss = true; + +module.exports = plugin;