From 84dc76e91562855a3534113de48ffab8bff8f043 Mon Sep 17 00:00:00 2001 From: Tsubasa Sakai Date: Sat, 17 May 2025 17:06:38 +0900 Subject: [PATCH 1/2] Add react-strict-dom/postcss-plugin --- apps/examples/package.json | 1 - apps/examples/postcss.config.js | 13 ++--- apps/website/docs/learn/01-installation.md | 6 -- .../docs/learn/02-environment-setup.md | 22 +++---- package-lock.json | 58 +++++++++---------- packages/react-strict-dom/package.json | 2 + packages/react-strict-dom/postcss/plugin.js | 41 +++++++++++++ 7 files changed, 88 insertions(+), 55 deletions(-) create mode 100644 packages/react-strict-dom/postcss/plugin.js 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..41d32b41 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", @@ -7403,6 +7402,32 @@ "postcss-value-parser": "^4.1.0" } }, + "node_modules/@stylexjs/postcss-plugin": { + "version": "0.13.1", + "resolved": "https://registry.npmjs.org/@stylexjs/postcss-plugin/-/postcss-plugin-0.13.1.tgz", + "integrity": "sha512-0Y9osp5rNlJHsU1yfKXllSfVZBy5cyLzP2yvPUjedaHoXn0FjOaS0R+EkzkQj8eDOEqlmnO1Zx3uNAR9afjqeA==", + "license": "MIT", + "dependencies": { + "@babel/core": "^7.26.8", + "@stylexjs/babel-plugin": "0.13.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", @@ -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", @@ -30397,6 +30392,7 @@ "dependencies": { "@babel/helper-module-imports": "^7.24.7", "@stylexjs/babel-plugin": "^0.13.1", + "@stylexjs/postcss-plugin": "^0.13.1", "@stylexjs/stylex": "^0.13.1", "postcss-value-parser": "^4.1.0" }, diff --git a/packages/react-strict-dom/package.json b/packages/react-strict-dom/package.json index 8d673b76..ad739851 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" }, @@ -36,6 +37,7 @@ "@babel/helper-module-imports": "^7.24.7", "@stylexjs/babel-plugin": "^0.13.1", "@stylexjs/stylex": "^0.13.1", + "@stylexjs/postcss-plugin": "^0.13.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; From f8e7aca73e51721e3002cf76b06e616e13a23e1b Mon Sep 17 00:00:00 2001 From: Tsubasa Sakai Date: Thu, 3 Jul 2025 13:18:39 +0900 Subject: [PATCH 2/2] Update @stylexjs/stylex to 0.14 --- package-lock.json | 28 +++++++++++++------------- packages/react-strict-dom/package.json | 6 +++--- 2 files changed, 17 insertions(+), 17 deletions(-) diff --git a/package-lock.json b/package-lock.json index 41d32b41..681ba65a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7388,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", @@ -7398,18 +7398,18 @@ "@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.13.1", - "resolved": "https://registry.npmjs.org/@stylexjs/postcss-plugin/-/postcss-plugin-0.13.1.tgz", - "integrity": "sha512-0Y9osp5rNlJHsU1yfKXllSfVZBy5cyLzP2yvPUjedaHoXn0FjOaS0R+EkzkQj8eDOEqlmnO1Zx3uNAR9afjqeA==", + "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.13.1", + "@stylexjs/babel-plugin": "0.14.1", "fast-glob": "^3.3.2", "glob-parent": "^6.0.2", "is-glob": "^4.0.3", @@ -7429,9 +7429,9 @@ } }, "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", @@ -30391,9 +30391,9 @@ "license": "MIT", "dependencies": { "@babel/helper-module-imports": "^7.24.7", - "@stylexjs/babel-plugin": "^0.13.1", - "@stylexjs/postcss-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 ad739851..44be855a 100644 --- a/packages/react-strict-dom/package.json +++ b/packages/react-strict-dom/package.json @@ -35,9 +35,9 @@ }, "dependencies": { "@babel/helper-module-imports": "^7.24.7", - "@stylexjs/babel-plugin": "^0.13.1", - "@stylexjs/stylex": "^0.13.1", - "@stylexjs/postcss-plugin": "^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": {