diff --git a/apps/examples/package.json b/apps/examples/package.json index 6153a62..55dc86a 100644 --- a/apps/examples/package.json +++ b/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", diff --git a/apps/examples/postcss.config.js b/apps/examples/postcss.config.js index 0bf1561..08583ec 100644 --- a/apps/examples/postcss.config.js +++ b/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') + ] }; diff --git a/apps/website/docs/learn/01-installation.md b/apps/website/docs/learn/01-installation.md index fe9fe90..d10debd 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 (note that using the new React Native architecture is required): diff --git a/apps/website/docs/learn/02-environment-setup.md b/apps/website/docs/learn/02-environment-setup.md index 7738f41..35290f5 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,21 +62,21 @@ 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': { + 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//*.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'; diff --git a/package-lock.json b/package-lock.json index 3238bb3..2ef71ce 100644 --- a/package-lock.json +++ b/package-lock.json @@ -56,7 +56,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", @@ -102,6 +101,7 @@ }, "node_modules/@aashutoshrathi/word-wrap": { "version": "1.2.6", + "dev": true, "license": "MIT", "engines": { "node": ">=0.10.0" @@ -241,16 +241,6 @@ "@algolia/transporter": "4.24.0" } }, - "node_modules/@algolia/client-common": { - "version": "5.2.2", - "resolved": "https://registry.npmjs.org/@algolia/client-common/-/client-common-5.2.2.tgz", - "integrity": "sha512-inldkgfW/2MzMR0I3EH5NbdYvypZBOlaj8fO9FuP/kAT9h3tZoDch7xA7bUaJ72z6Y3+gtjCeiRyL3CL6gyNRA==", - "license": "MIT", - "peer": true, - "engines": { - "node": ">= 14.0.0" - } - }, "node_modules/@algolia/client-personalization": { "version": "4.24.0", "resolved": "https://registry.npmjs.org/@algolia/client-personalization/-/client-personalization-4.24.0.tgz", @@ -272,21 +262,6 @@ "@algolia/transporter": "4.24.0" } }, - "node_modules/@algolia/client-search": { - "version": "5.2.2", - "resolved": "https://registry.npmjs.org/@algolia/client-search/-/client-search-5.2.2.tgz", - "integrity": "sha512-7F6HDbtv3LoKvY7zeK17wZ5ep5fo3/Fp2R5F0ndmuV6+5lp+bZaWhmKSSjkRFwLJwsakftf3j2Sij/4ESJnGBg==", - "license": "MIT", - "peer": true, - "dependencies": { - "@algolia/client-common": "5.2.2", - "@algolia/requester-browser-xhr": "5.2.2", - "@algolia/requester-node-http": "5.2.2" - }, - "engines": { - "node": ">= 14.0.0" - } - }, "node_modules/@algolia/events": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/@algolia/events/-/events-4.0.1.tgz", @@ -366,38 +341,12 @@ "@algolia/requester-common": "4.24.0" } }, - "node_modules/@algolia/requester-browser-xhr": { - "version": "5.2.2", - "resolved": "https://registry.npmjs.org/@algolia/requester-browser-xhr/-/requester-browser-xhr-5.2.2.tgz", - "integrity": "sha512-5ZazHmkZL9SwMFwVr+WOaAoteypEGkOrqiJ4H59SZS6YanU7RDpKO8YG+fKAwcExlFQxxZ9Mdf2eeawxtuihnw==", - "license": "MIT", - "peer": true, - "dependencies": { - "@algolia/client-common": "5.2.2" - }, - "engines": { - "node": ">= 14.0.0" - } - }, "node_modules/@algolia/requester-common": { "version": "4.24.0", "resolved": "https://registry.npmjs.org/@algolia/requester-common/-/requester-common-4.24.0.tgz", "integrity": "sha512-k3CXJ2OVnvgE3HMwcojpvY6d9kgKMPRxs/kVohrwF5WMr2fnqojnycZkxPoEg+bXm8fi5BBfFmOqgYztRtHsQA==", "license": "MIT" }, - "node_modules/@algolia/requester-node-http": { - "version": "5.2.2", - "resolved": "https://registry.npmjs.org/@algolia/requester-node-http/-/requester-node-http-5.2.2.tgz", - "integrity": "sha512-lTG6hzxNV4hmbG/ixJMu7MvhN3qzjOGEkn8YlQMGT96yJZUV9yU7+w/NLetBC8zjfiMwezoD6lsK+WvK1PUMvw==", - "license": "MIT", - "peer": true, - "dependencies": { - "@algolia/client-common": "5.2.2" - }, - "engines": { - "node": ">= 14.0.0" - } - }, "node_modules/@algolia/transporter": { "version": "4.24.0", "resolved": "https://registry.npmjs.org/@algolia/transporter/-/transporter-4.24.0.tgz", @@ -3865,6 +3814,7 @@ }, "node_modules/@eslint-community/eslint-utils": { "version": "4.4.0", + "dev": true, "license": "MIT", "dependencies": { "eslint-visitor-keys": "^3.3.0" @@ -3878,6 +3828,7 @@ }, "node_modules/@eslint-community/eslint-utils/node_modules/eslint-visitor-keys": { "version": "3.4.0", + "dev": true, "license": "Apache-2.0", "engines": { "node": "^12.22.0 || ^14.17.0 || >=16.0.0" @@ -3890,6 +3841,7 @@ "version": "4.6.2", "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.6.2.tgz", "integrity": "sha512-pPTNuaAG3QMH+buKyBIGJs3g/S5y0caxw0ygM3YyE6yJFySwiGGSzA+mM3KJ8QQvzeLh3blwgSonkFjgQdxzMw==", + "dev": true, "engines": { "node": "^12.0.0 || ^14.0.0 || >=16.0.0" } @@ -3898,6 +3850,7 @@ "version": "2.1.4", "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.4.tgz", "integrity": "sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==", + "dev": true, "dependencies": { "ajv": "^6.12.4", "debug": "^4.3.2", @@ -3919,12 +3872,14 @@ "node_modules/@eslint/eslintrc/node_modules/argparse": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", - "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==" + "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==", + "dev": true }, "node_modules/@eslint/eslintrc/node_modules/globals": { "version": "13.24.0", "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz", "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==", + "dev": true, "dependencies": { "type-fest": "^0.20.2" }, @@ -3939,6 +3894,7 @@ "version": "4.1.0", "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz", "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==", + "dev": true, "dependencies": { "argparse": "^2.0.1" }, @@ -3950,6 +3906,7 @@ "version": "0.20.2", "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz", "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==", + "dev": true, "engines": { "node": ">=10" }, @@ -3961,6 +3918,7 @@ "version": "8.57.0", "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.57.0.tgz", "integrity": "sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==", + "dev": true, "engines": { "node": "^12.22.0 || ^14.17.0 || >=16.0.0" } @@ -5694,6 +5652,7 @@ "version": "0.11.14", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz", "integrity": "sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==", + "dev": true, "dependencies": { "@humanwhocodes/object-schema": "^2.0.2", "debug": "^4.3.1", @@ -5705,6 +5664,7 @@ }, "node_modules/@humanwhocodes/module-importer": { "version": "1.0.1", + "dev": true, "license": "Apache-2.0", "engines": { "node": ">=12.22" @@ -5717,7 +5677,8 @@ "node_modules/@humanwhocodes/object-schema": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.2.tgz", - "integrity": "sha512-6EwiSjwWYP7pTckG6I5eyFANjPhmPjUX9JRLUSfNPC7FX7zK9gyZAfUEaECL6ALTpGX5AjnBq3C9XmVWPitNpw==" + "integrity": "sha512-6EwiSjwWYP7pTckG6I5eyFANjPhmPjUX9JRLUSfNPC7FX7zK9gyZAfUEaECL6ALTpGX5AjnBq3C9XmVWPitNpw==", + "dev": true }, "node_modules/@isaacs/cliui": { "version": "8.0.2", @@ -12346,6 +12307,7 @@ }, "node_modules/deep-is": { "version": "0.1.4", + "dev": true, "license": "MIT" }, "node_modules/deepmerge": { @@ -12908,6 +12870,7 @@ }, "node_modules/doctrine": { "version": "3.0.0", + "dev": true, "license": "Apache-2.0", "dependencies": { "esutils": "^2.0.2" @@ -13415,6 +13378,7 @@ "version": "8.57.0", "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.57.0.tgz", "integrity": "sha512-dZ6+mexnaTIbSBZWgou51U6OmzIhYM2VcNdtiTtI7qPNZm35Akpr0f6vtw3w1Kmn5PYo+tZVfh13WrhpS6oLqQ==", + "dev": true, "dependencies": { "@eslint-community/eslint-utils": "^4.2.0", "@eslint-community/regexpp": "^4.6.1", @@ -13600,6 +13564,7 @@ }, "node_modules/eslint/node_modules/ansi-styles": { "version": "4.3.0", + "dev": true, "license": "MIT", "dependencies": { "color-convert": "^2.0.1" @@ -13613,10 +13578,12 @@ }, "node_modules/eslint/node_modules/argparse": { "version": "2.0.1", + "dev": true, "license": "Python-2.0" }, "node_modules/eslint/node_modules/chalk": { "version": "4.1.2", + "dev": true, "license": "MIT", "dependencies": { "ansi-styles": "^4.1.0", @@ -13631,6 +13598,7 @@ }, "node_modules/eslint/node_modules/color-convert": { "version": "2.0.1", + "dev": true, "license": "MIT", "dependencies": { "color-name": "~1.1.4" @@ -13641,10 +13609,12 @@ }, "node_modules/eslint/node_modules/color-name": { "version": "1.1.4", + "dev": true, "license": "MIT" }, "node_modules/eslint/node_modules/escape-string-regexp": { "version": "4.0.0", + "dev": true, "license": "MIT", "engines": { "node": ">=10" @@ -13657,6 +13627,7 @@ "version": "7.2.2", "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz", "integrity": "sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==", + "dev": true, "dependencies": { "esrecurse": "^4.3.0", "estraverse": "^5.2.0" @@ -13672,6 +13643,7 @@ "version": "3.4.3", "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz", "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==", + "dev": true, "engines": { "node": "^12.22.0 || ^14.17.0 || >=16.0.0" }, @@ -13681,6 +13653,7 @@ }, "node_modules/eslint/node_modules/find-up": { "version": "5.0.0", + "dev": true, "license": "MIT", "dependencies": { "locate-path": "^6.0.0", @@ -13695,6 +13668,7 @@ }, "node_modules/eslint/node_modules/glob-parent": { "version": "6.0.2", + "dev": true, "license": "ISC", "dependencies": { "is-glob": "^4.0.3" @@ -13705,6 +13679,7 @@ }, "node_modules/eslint/node_modules/globals": { "version": "13.20.0", + "dev": true, "license": "MIT", "dependencies": { "type-fest": "^0.20.2" @@ -13718,6 +13693,7 @@ }, "node_modules/eslint/node_modules/has-flag": { "version": "4.0.0", + "dev": true, "license": "MIT", "engines": { "node": ">=8" @@ -13725,6 +13701,7 @@ }, "node_modules/eslint/node_modules/js-yaml": { "version": "4.1.0", + "dev": true, "license": "MIT", "dependencies": { "argparse": "^2.0.1" @@ -13735,6 +13712,7 @@ }, "node_modules/eslint/node_modules/locate-path": { "version": "6.0.0", + "dev": true, "license": "MIT", "dependencies": { "p-locate": "^5.0.0" @@ -13748,6 +13726,7 @@ }, "node_modules/eslint/node_modules/p-locate": { "version": "5.0.0", + "dev": true, "license": "MIT", "dependencies": { "p-limit": "^3.0.2" @@ -13761,6 +13740,7 @@ }, "node_modules/eslint/node_modules/path-exists": { "version": "4.0.0", + "dev": true, "license": "MIT", "engines": { "node": ">=8" @@ -13768,6 +13748,7 @@ }, "node_modules/eslint/node_modules/supports-color": { "version": "7.2.0", + "dev": true, "license": "MIT", "dependencies": { "has-flag": "^4.0.0" @@ -13778,6 +13759,7 @@ }, "node_modules/eslint/node_modules/type-fest": { "version": "0.20.2", + "dev": true, "license": "(MIT OR CC0-1.0)", "engines": { "node": ">=10" @@ -13796,6 +13778,7 @@ "version": "9.6.1", "resolved": "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz", "integrity": "sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==", + "dev": true, "dependencies": { "acorn": "^8.9.0", "acorn-jsx": "^5.3.2", @@ -13812,6 +13795,7 @@ "version": "3.4.3", "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz", "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==", + "dev": true, "engines": { "node": "^12.22.0 || ^14.17.0 || >=16.0.0" }, @@ -14666,6 +14650,7 @@ }, "node_modules/fast-levenshtein": { "version": "2.0.6", + "dev": true, "license": "MIT" }, "node_modules/fast-loops": { @@ -14769,6 +14754,7 @@ }, "node_modules/file-entry-cache": { "version": "6.0.1", + "dev": true, "license": "MIT", "dependencies": { "flat-cache": "^3.0.4" @@ -15016,6 +15002,7 @@ }, "node_modules/flat-cache": { "version": "3.0.4", + "dev": true, "license": "MIT", "dependencies": { "flatted": "^3.1.0", @@ -15027,6 +15014,7 @@ }, "node_modules/flatted": { "version": "3.2.7", + "dev": true, "license": "ISC" }, "node_modules/flow-api-translator": { @@ -15827,7 +15815,8 @@ "node_modules/graphemer": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz", - "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==" + "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==", + "dev": true }, "node_modules/gray-matter": { "version": "4.0.3", @@ -16164,35 +16153,6 @@ "he": "bin/he" } }, - "node_modules/hermes-eslint": { - "version": "0.20.1", - "resolved": "https://registry.npmjs.org/hermes-eslint/-/hermes-eslint-0.20.1.tgz", - "integrity": "sha512-EhdvFV6RkPIJvbqN8oqFZO1oF4NlPWMjhMjCWkUJX1YL1MZMfkF7nSdx6RKTq6xK17yo+Bgv88L21xuH9GtRpw==", - "dev": true, - "peer": true, - "dependencies": { - "esrecurse": "^4.3.0", - "hermes-estree": "0.20.1", - "hermes-parser": "0.20.1" - } - }, - "node_modules/hermes-eslint/node_modules/hermes-estree": { - "version": "0.20.1", - "resolved": "https://registry.npmjs.org/hermes-estree/-/hermes-estree-0.20.1.tgz", - "integrity": "sha512-SQpZK4BzR48kuOg0v4pb3EAGNclzIlqMj3Opu/mu7bbAoFw6oig6cEt/RAi0zTFW/iW6Iz9X9ggGuZTAZ/yZHg==", - "dev": true, - "peer": true - }, - "node_modules/hermes-eslint/node_modules/hermes-parser": { - "version": "0.20.1", - "resolved": "https://registry.npmjs.org/hermes-parser/-/hermes-parser-0.20.1.tgz", - "integrity": "sha512-BL5P83cwCogI8D7rrDCgsFY0tdYUtmFP9XaXtl2IQjC+2Xo+4okjfXintlTxcIwl4qeGddEl28Z11kbVIw0aNA==", - "dev": true, - "peer": true, - "dependencies": { - "hermes-estree": "0.20.1" - } - }, "node_modules/hermes-estree": { "version": "0.23.1", "resolved": "https://registry.npmjs.org/hermes-estree/-/hermes-estree-0.23.1.tgz", @@ -19814,6 +19774,7 @@ }, "node_modules/json-stable-stringify-without-jsonify": { "version": "1.0.1", + "dev": true, "license": "MIT" }, "node_modules/json5": { @@ -19922,6 +19883,7 @@ }, "node_modules/levn": { "version": "0.4.1", + "dev": true, "license": "MIT", "dependencies": { "prelude-ls": "^1.2.1", @@ -20530,6 +20492,7 @@ }, "node_modules/lodash.merge": { "version": "4.6.2", + "dev": true, "license": "MIT" }, "node_modules/lodash.throttle": { @@ -23818,6 +23781,7 @@ }, "node_modules/natural-compare": { "version": "1.4.0", + "dev": true, "license": "MIT" }, "node_modules/negotiator": { @@ -24379,6 +24343,7 @@ }, "node_modules/optionator": { "version": "0.9.3", + "dev": true, "license": "MIT", "dependencies": { "@aashutoshrathi/word-wrap": "^1.2.3", @@ -25739,36 +25704,6 @@ "postcss": "^8.4.31" } }, - "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", @@ -25892,6 +25827,7 @@ }, "node_modules/prelude-ls": { "version": "1.2.1", + "dev": true, "license": "MIT", "engines": { "node": ">= 0.8.0" @@ -25901,6 +25837,7 @@ "version": "3.3.3", "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz", "integrity": "sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==", + "dev": true, "license": "MIT", "bin": { "prettier": "bin/prettier.cjs" @@ -25916,6 +25853,7 @@ "version": "0.25.0", "resolved": "https://registry.npmjs.org/prettier-plugin-hermes-parser/-/prettier-plugin-hermes-parser-0.25.0.tgz", "integrity": "sha512-B5vzcDyTA/T0R7LGMSkLTp3VtRCEe1NItzsM6L/4gDOBGzDDMMMOwxRxogwL9xL07GPBOJrzlggwFaSQOhLVLw==", + "dev": true, "license": "MIT", "dependencies": { "hermes-estree": "0.25.0", @@ -25930,12 +25868,14 @@ "version": "0.25.0", "resolved": "https://registry.npmjs.org/hermes-estree/-/hermes-estree-0.25.0.tgz", "integrity": "sha512-xjILoUIyOpLoOHqj8UJs/HNYQ279IfLKTTv9nmXKNT2+QKT/TQF9AyQFrRMo+3xwZoO7k4azocYpCzA1cSvBDg==", + "dev": true, "license": "MIT" }, "node_modules/prettier-plugin-hermes-parser/node_modules/hermes-parser": { "version": "0.25.0", "resolved": "https://registry.npmjs.org/hermes-parser/-/hermes-parser-0.25.0.tgz", "integrity": "sha512-CeAdhgMfbZcrYh+HHKVKsj7VNhOTr0jiLFlcVVoRORbZ/Nr4J90WjEq2CZoahgH15/DYY/VBhuLqpIzJqfdBEQ==", + "dev": true, "license": "MIT", "dependencies": { "hermes-estree": "0.25.0" @@ -27952,13 +27892,6 @@ "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==", "license": "MIT" }, - "node_modules/search-insights": { - "version": "2.17.0", - "resolved": "https://registry.npmjs.org/search-insights/-/search-insights-2.17.0.tgz", - "integrity": "sha512-AskayU3QNsXQzSL6v4LTYST7NNfs2HWyHHB+sdORP9chsytAhro5XRfToAMI/LAVYgNbzowVZTMfBRodgbUHKg==", - "license": "MIT", - "peer": true - }, "node_modules/section-matter": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/section-matter/-/section-matter-1.0.0.tgz", @@ -29819,6 +29752,7 @@ }, "node_modules/type-check": { "version": "0.4.0", + "dev": true, "license": "MIT", "dependencies": { "prelude-ls": "^1.2.1" diff --git a/packages/react-strict-dom/package.json b/packages/react-strict-dom/package.json index 8268694..94ef8c4 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" }, diff --git a/packages/react-strict-dom/postcss/builder.js b/packages/react-strict-dom/postcss/builder.js new file mode 100644 index 0000000..234a84c --- /dev/null +++ b/packages/react-strict-dom/postcss/builder.js @@ -0,0 +1,182 @@ +/** + * 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 path = require('node:path'); +const fs = require('node:fs'); +const { normalize, resolve } = require('path'); +const { globSync } = require('fast-glob'); +const isGlob = require('is-glob'); +const globParent = require('glob-parent'); +const createBundler = require('./bundler'); + +// Parses a glob pattern and extracts its base directory and pattern. +// Returns an object with `base` and `glob` properties. +function parseGlob(pattern) { + // License: MIT + // Based on: + // https://github.com/chakra-ui/panda/blob/6ab003795c0b076efe6879a2e6a2a548cb96580e/packages/node/src/parse-glob.ts + let glob = pattern; + const base = globParent(pattern); + + if (base !== '.') { + glob = pattern.substring(base.length); + if (glob.charAt(0) === '/') { + glob = glob.substring(1); + } + } + + if (glob.substring(0, 2) === './') { + glob = glob.substring(2); + } + if (glob.charAt(0) === '/') { + glob = glob.substring(1); + } + + return { base, glob }; +} + +// Parses a file path or glob pattern into a PostCSS dependency message. +function parseDependency(fileOrGlob) { + // License: MIT + // Based on: + // https://github.com/chakra-ui/panda/blob/6ab003795c0b076efe6879a2e6a2a548cb96580e/packages/node/src/parse-dependency.ts + if (fileOrGlob.startsWith('!')) { + return null; + } + + let message = null; + + if (isGlob(fileOrGlob)) { + const { base, glob } = parseGlob(fileOrGlob); + message = { type: 'dir-dependency', dir: normalize(resolve(base)), glob }; + } else { + message = { type: 'dependency', file: normalize(resolve(fileOrGlob)) }; + } + + return message; +} + +// Creates a builder for transforming files and bundling StyleX CSS. +function createBuilder() { + let config = null; + + const bundler = createBundler(); + + const fileModifiedMap = new Map(); + + // Configures the builder with the provided options. + function configure(options) { + config = options; + } + + /// Retrieves the current configuration. + function getConfig() { + if (config == null) { + throw new Error('Builder not configured'); + } + return config; + } + + // Finds the `@stylex;` at-rule in the provided PostCSS root. + function findStyleXAtRule(root) { + let styleXAtRule = null; + root.walkAtRules((atRule) => { + if (atRule.name === 'stylex' && !atRule.params) { + styleXAtRule = atRule; + } + }); + return styleXAtRule; + } + + // Retrieves all files that match the include and exclude patterns. + function getFiles() { + const { cwd, include, exclude } = getConfig(); + return globSync(include, { + onlyFiles: true, + ignore: exclude, + cwd + }); + } + + // Transforms the included files, bundles the CSS, and returns the result. + async function build({ shouldSkipTransformError }) { + const { cwd, babelConfig, useCSSLayers, isDev } = getConfig(); + + const files = getFiles(); + const filesToTransform = []; + + // Remove deleted files since the last build + for (const file of fileModifiedMap.keys()) { + if (!files.includes(file)) { + fileModifiedMap.delete(file); + bundler.remove(file); + } + } + + for (const file of files) { + const filePath = path.resolve(cwd, file); + const mtimeMs = fs.existsSync(filePath) + ? fs.statSync(filePath).mtimeMs + : -Infinity; + + // Skip files that have not been modified since the last build + // On first run, all files will be transformed + const shouldSkip = + fileModifiedMap.has(file) && mtimeMs === fileModifiedMap.get(file); + + if (shouldSkip) { + continue; + } + + fileModifiedMap.set(file, mtimeMs); + filesToTransform.push(file); + } + + await Promise.all( + filesToTransform.map((file) => { + const filePath = path.resolve(cwd, file); + const contents = fs.readFileSync(filePath, 'utf-8'); + if (!bundler.shouldTransform(contents)) { + return; + } + return bundler.transform(filePath, contents, babelConfig, { + isDev, + shouldSkipTransformError + }); + }) + ); + + const css = bundler.bundle({ useCSSLayers }); + return css; + } + + // Retrieves the dependencies that PostCSS should watch. + function getDependencies() { + const { include } = getConfig(); + const dependencies = []; + + for (const fileOrGlob of include) { + const dependency = parseDependency(fileOrGlob); + if (dependency != null) { + dependencies.push(dependency); + } + } + + return dependencies; + } + + return { + findStyleXAtRule, + configure, + build, + getDependencies + }; +} + +module.exports = createBuilder; diff --git a/packages/react-strict-dom/postcss/bundler.js b/packages/react-strict-dom/postcss/bundler.js new file mode 100644 index 0000000..91ff3f3 --- /dev/null +++ b/packages/react-strict-dom/postcss/bundler.js @@ -0,0 +1,77 @@ +/** + * 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 babel = require('@babel/core'); +const reactStrictBabelPreset = require('react-strict-dom/babel-preset'); + +// Creates a stateful bundler for processing StyleX rules using Babel. +module.exports = function createBundler() { + const styleXRulesMap = new Map(); + + // Determines if the source code should be transformed based on the presence of StyleX/RSD imports. + function shouldTransform(sourceCode) { + return ( + sourceCode.includes('stylex') || sourceCode.includes('react-strict-dom') + ); + } + + // Transforms the source code using Babel, extracting StyleX rules and storing them. + async function transform(id, sourceCode, babelConfig, options) { + const { isDev, shouldSkipTransformError } = options; + const { code, map, metadata } = await babel + .transformAsync(sourceCode, { + filename: id, + caller: { + name: 'react-strict-dom/postcss-plugin', + platform: 'web', + isDev, + supportsStaticESM: true + }, + ...babelConfig + }) + .catch((error) => { + if (shouldSkipTransformError) { + console.warn( + `[react-strict-dom/postcss-plugin] Failed to transform "${id}": ${error.message}` + ); + + return { code: sourceCode, map: null, metadata: {} }; + } + throw error; + }); + + const stylex = metadata.stylex; + if (stylex != null && stylex.length > 0) { + styleXRulesMap.set(id, stylex); + } + + return { code, map, metadata }; + } + + // Removes the stored StyleX rules for the specified file. + function remove(id) { + styleXRulesMap.delete(id); + } + + // Bundles all collected StyleX rules into a single CSS string. + function bundle({ useCSSLayers }) { + const rules = Array.from(styleXRulesMap.values()).flat(); + + const css = reactStrictBabelPreset.generateStyles(rules); + + return css; + } + + return { + shouldTransform, + transform, + remove, + bundle + }; +}; diff --git a/packages/react-strict-dom/postcss/plugin.js b/packages/react-strict-dom/postcss/plugin.js new file mode 100644 index 0000000..19e95fb --- /dev/null +++ b/packages/react-strict-dom/postcss/plugin.js @@ -0,0 +1,107 @@ +/** + * 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 postcss = require('postcss'); +const createBuilder = require('./builder'); + +const PLUGIN_NAME = 'react-strict-dom/postcss-plugin'; + +const builder = createBuilder(); + +const isDev = process.env.NODE_ENV === 'development'; + +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, + useCSSLayers = false +}) => { + include = [ + // Include the React Strict DOM package's source files by default + require.resolve('react-strict-dom'), + ...(include ?? []) + ]; + + exclude = [ + // Exclude type declaration files by default because it never contains any CSS rules. + '**/*.d.ts', + '**/*.flow', + ...(exclude ?? []) + ]; + + // Whether to skip the error when transforming StyleX rules. + // Useful in watch mode where Fast Refresh can recover from errors. + // Initial transform will still throw errors in watch mode to surface issues early. + let shouldSkipTransformError = false; + + return { + postcssPlugin: PLUGIN_NAME, + plugins: [ + // Processes the PostCSS root node to find and transform StyleX at-rules. + async function (root, result) { + const fileName = result.opts.from; + + // Configure the builder with the provided options + await builder.configure({ + include, + exclude, + cwd, + babelConfig, + useCSSLayers, + isDev + }); + + // Find the "@stylex" at-rule + const styleXAtRule = builder.findStyleXAtRule(root); + if (styleXAtRule == null) { + return; + } + + // Get dependencies to be watched for changes + const dependencies = builder.getDependencies(); + + // Add each dependency to the PostCSS result messages. + // This watches the entire "./src" directory for "./src/**/*.{ts,tsx}" + // to handle new files and deletions reliably in watch mode. + for (const dependency of dependencies) { + result.messages.push({ + plugin: PLUGIN_NAME, + parent: fileName, + ...dependency + }); + } + + // Build and parse the CSS from collected StyleX rules + const css = await builder.build({ + shouldSkipTransformError + }); + const parsed = await postcss.parse(css, { + from: fileName + }); + + // Replace the "@stylex" rule with the generated CSS + styleXAtRule.replaceWith(parsed); + + result.root = root; + + if (!shouldSkipTransformError) { + // Build was successful, subsequent builds are for watch mode + shouldSkipTransformError = true; + } + } + ] + }; +}; + +plugin.postcss = true; + +module.exports = plugin;