From 801861ae3cf9b388332d6a092daf4eb1cd0efb3c Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Tue, 20 May 2025 19:16:08 -0700 Subject: [PATCH] Update @stylexjs/stylex to 0.13 --- .github/CODEOWNERS | 1 - apps/examples/postcss.config.js | 3 +- .../docs/api/02-css/03-defineConsts.md | 21 ++ .../{03-defineVars.md => 04-defineVars.md} | 0 ...firstThatWorks.md => 05-firstThatWorks.md} | 0 .../{05-keyframes.md => 06-keyframes.md} | 0 .../website/docs/api/02-css/07-positionTry.md | 21 ++ apps/website/docs/api/index.md | 2 + package-lock.json | 219 +++++++++--------- packages/react-strict-dom/babel/preset.js | 4 +- packages/react-strict-dom/package.json | 4 +- .../dom/modules/createStrictDOMComponent.js | 2 +- .../src/native/stylex/index.js | 88 ++++--- .../src/types/renderer.web.js | 1 + packages/react-strict-dom/src/types/styles.js | 10 +- .../react-strict-dom/tests/css-test.native.js | 10 + patches/@stylexjs+babel-plugin+0.9.3.patch | 54 ----- 17 files changed, 230 insertions(+), 210 deletions(-) create mode 100644 apps/website/docs/api/02-css/03-defineConsts.md rename apps/website/docs/api/02-css/{03-defineVars.md => 04-defineVars.md} (100%) rename apps/website/docs/api/02-css/{04-firstThatWorks.md => 05-firstThatWorks.md} (100%) rename apps/website/docs/api/02-css/{05-keyframes.md => 06-keyframes.md} (100%) create mode 100644 apps/website/docs/api/02-css/07-positionTry.md delete mode 100644 patches/@stylexjs+babel-plugin+0.9.3.patch diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index 520e1e45..455bf822 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -1,2 +1 @@ * @necolas -/packages/scripts/* @necolas @nmn diff --git a/apps/examples/postcss.config.js b/apps/examples/postcss.config.js index 0bf1561e..2fc9ab8d 100644 --- a/apps/examples/postcss.config.js +++ b/apps/examples/postcss.config.js @@ -8,7 +8,8 @@ module.exports = { plugins: { 'postcss-react-strict-dom': { - include: ['src/**/*.{js,jsx,mjs,ts,tsx}'] + include: ['src/**/*.{js,jsx,mjs,ts,tsx}'], + useLayers: true }, autoprefixer: {} } diff --git a/apps/website/docs/api/02-css/03-defineConsts.md b/apps/website/docs/api/02-css/03-defineConsts.md new file mode 100644 index 00000000..e1d0ce94 --- /dev/null +++ b/apps/website/docs/api/02-css/03-defineConsts.md @@ -0,0 +1,21 @@ +--- +draft: true +--- + +# css.defineConsts + +

How to define constants.

+ +:::warning + +`css.defineConsts()` is currently only supported on web. + +::: + +## Overview + +... + +## API + +... diff --git a/apps/website/docs/api/02-css/03-defineVars.md b/apps/website/docs/api/02-css/04-defineVars.md similarity index 100% rename from apps/website/docs/api/02-css/03-defineVars.md rename to apps/website/docs/api/02-css/04-defineVars.md diff --git a/apps/website/docs/api/02-css/04-firstThatWorks.md b/apps/website/docs/api/02-css/05-firstThatWorks.md similarity index 100% rename from apps/website/docs/api/02-css/04-firstThatWorks.md rename to apps/website/docs/api/02-css/05-firstThatWorks.md diff --git a/apps/website/docs/api/02-css/05-keyframes.md b/apps/website/docs/api/02-css/06-keyframes.md similarity index 100% rename from apps/website/docs/api/02-css/05-keyframes.md rename to apps/website/docs/api/02-css/06-keyframes.md diff --git a/apps/website/docs/api/02-css/07-positionTry.md b/apps/website/docs/api/02-css/07-positionTry.md new file mode 100644 index 00000000..5dde1831 --- /dev/null +++ b/apps/website/docs/api/02-css/07-positionTry.md @@ -0,0 +1,21 @@ +--- +draft: true +--- + +# css.positionTry + +

How to define position-try styles.

+ +:::warning + +`css.positionTry()` is currently only supported on web. + +::: + +## Overview + +... + +## API + +... diff --git a/apps/website/docs/api/index.md b/apps/website/docs/api/index.md index 5b415394..f3c9e423 100644 --- a/apps/website/docs/api/index.md +++ b/apps/website/docs/api/index.md @@ -15,9 +15,11 @@ sidebar_position: -1 * [**css**](/api/css/) - An overview of working with styles. * [css.create](/api/css/create) - How to create styles. * [css.createTheme](/api/css/createTheme) - How to create themes. + * [css.defineVars](/api/css/defineVars) - How to define variables. * [css.firstThatWorks](/api/css/firstThatWorks) - How to declare fallback values. + ## html diff --git a/package-lock.json b/package-lock.json index 53c8a90d..b874a261 100644 --- a/package-lock.json +++ b/package-lock.json @@ -459,44 +459,44 @@ } }, "node_modules/@babel/code-frame": { - "version": "7.26.2", - "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.26.2.tgz", - "integrity": "sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==", + "version": "7.27.1", + "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.27.1.tgz", + "integrity": "sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==", "license": "MIT", "dependencies": { - "@babel/helper-validator-identifier": "^7.25.9", + "@babel/helper-validator-identifier": "^7.27.1", "js-tokens": "^4.0.0", - "picocolors": "^1.0.0" + "picocolors": "^1.1.1" }, "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/compat-data": { - "version": "7.26.3", - "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.26.3.tgz", - "integrity": "sha512-nHIxvKPniQXpmQLb0vhY3VaFb3S0YrTAwpOWJZh1wn3oJPjJk9Asva204PsBdmAE8vpzfHudT8DB0scYvy9q0g==", + "version": "7.27.2", + "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.27.2.tgz", + "integrity": "sha512-TUtMJYRPyUb/9aU8f3K0mjmjf6M9N5Woshn2CS6nqJSeJtTtQcpLUXjGt9vbF8ZGff0El99sWkLgzwW3VXnxZQ==", "license": "MIT", "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/core": { - "version": "7.26.0", - "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.26.0.tgz", - "integrity": "sha512-i1SLeK+DzNnQ3LL/CswPCa/E5u4lh1k6IAEphON8F+cXt0t9euTshDru0q7/IqMa1PMPz5RnHuHscF8/ZJsStg==", + "version": "7.27.1", + "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.27.1.tgz", + "integrity": "sha512-IaaGWsQqfsQWVLqMn9OB92MNN7zukfVA4s7KKAI0KfrrDsZ0yhi5uV4baBuLuN7n3vsZpwP8asPPcVwApxvjBQ==", "license": "MIT", "dependencies": { "@ampproject/remapping": "^2.2.0", - "@babel/code-frame": "^7.26.0", - "@babel/generator": "^7.26.0", - "@babel/helper-compilation-targets": "^7.25.9", - "@babel/helper-module-transforms": "^7.26.0", - "@babel/helpers": "^7.26.0", - "@babel/parser": "^7.26.0", - "@babel/template": "^7.25.9", - "@babel/traverse": "^7.25.9", - "@babel/types": "^7.26.0", + "@babel/code-frame": "^7.27.1", + "@babel/generator": "^7.27.1", + "@babel/helper-compilation-targets": "^7.27.1", + "@babel/helper-module-transforms": "^7.27.1", + "@babel/helpers": "^7.27.1", + "@babel/parser": "^7.27.1", + "@babel/template": "^7.27.1", + "@babel/traverse": "^7.27.1", + "@babel/types": "^7.27.1", "convert-source-map": "^2.0.0", "debug": "^4.1.0", "gensync": "^1.0.0-beta.2", @@ -530,13 +530,13 @@ } }, "node_modules/@babel/generator": { - "version": "7.26.2", - "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.26.2.tgz", - "integrity": "sha512-zevQbhbau95nkoxSq3f/DC/SC+EEOUZd3DYqfSkMhY2/wfSeaHV1Ew4vk8e+x8lja31IbyuUa2uQ3JONqKbysw==", + "version": "7.27.1", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.27.1.tgz", + "integrity": "sha512-UnJfnIpc/+JO0/+KRVQNGU+y5taA5vCbwN8+azkX6beii/ZF+enZJSOKo11ZSzGJjlNfJHfQtmQT8H+9TXPG2w==", "license": "MIT", "dependencies": { - "@babel/parser": "^7.26.2", - "@babel/types": "^7.26.0", + "@babel/parser": "^7.27.1", + "@babel/types": "^7.27.1", "@jridgewell/gen-mapping": "^0.3.5", "@jridgewell/trace-mapping": "^0.3.25", "jsesc": "^3.0.2" @@ -583,13 +583,13 @@ } }, "node_modules/@babel/helper-compilation-targets": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.25.9.tgz", - "integrity": "sha512-j9Db8Suy6yV/VHa4qzrj9yZfZxhLWQdVnRlXxmKLYlhWUVB1sB2G5sxuWYXk/whHD9iW76PmNzxZ4UCnTQTVEQ==", + "version": "7.27.2", + "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.27.2.tgz", + "integrity": "sha512-2+1thGUUWWjLTYTHZWK1n8Yga0ijBz1XAhUXcKy81rd5g6yh7hGqMp45v7cadSbEHc9G3OTv45SyneRN3ps4DQ==", "license": "MIT", "dependencies": { - "@babel/compat-data": "^7.25.9", - "@babel/helper-validator-option": "^7.25.9", + "@babel/compat-data": "^7.27.2", + "@babel/helper-validator-option": "^7.27.1", "browserslist": "^4.24.0", "lru-cache": "^5.1.1", "semver": "^6.3.1" @@ -664,27 +664,27 @@ } }, "node_modules/@babel/helper-module-imports": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.25.9.tgz", - "integrity": "sha512-tnUA4RsrmflIM6W6RFTLFSXITtl0wKjgpnLgXyowocVPrbYrLUXSBXDgTs8BlbmIzIdlBySRQjINYs2BAkiLtw==", + "version": "7.27.1", + "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.27.1.tgz", + "integrity": "sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w==", "license": "MIT", "dependencies": { - "@babel/traverse": "^7.25.9", - "@babel/types": "^7.25.9" + "@babel/traverse": "^7.27.1", + "@babel/types": "^7.27.1" }, "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/helper-module-transforms": { - "version": "7.26.0", - "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.26.0.tgz", - "integrity": "sha512-xO+xu6B5K2czEnQye6BHA7DolFFmS3LB7stHZFaOLb1pAwO1HWLS8fXA+eh0A2yIvltPVmx3eNNDBJA2SLHXFw==", + "version": "7.27.1", + "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.27.1.tgz", + "integrity": "sha512-9yHn519/8KvTU5BjTVEEeIM3w9/2yXNKoD82JifINImhpKkARMJKPP59kLo+BafpdN5zgNeIcS4jsGDmd3l58g==", "license": "MIT", "dependencies": { - "@babel/helper-module-imports": "^7.25.9", - "@babel/helper-validator-identifier": "^7.25.9", - "@babel/traverse": "^7.25.9" + "@babel/helper-module-imports": "^7.27.1", + "@babel/helper-validator-identifier": "^7.27.1", + "@babel/traverse": "^7.27.1" }, "engines": { "node": ">=6.9.0" @@ -773,27 +773,27 @@ } }, "node_modules/@babel/helper-string-parser": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz", - "integrity": "sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==", + "version": "7.27.1", + "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz", + "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==", "license": "MIT", "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/helper-validator-identifier": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz", - "integrity": "sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==", + "version": "7.27.1", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.27.1.tgz", + "integrity": "sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==", "license": "MIT", "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/helper-validator-option": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.25.9.tgz", - "integrity": "sha512-e/zv1co8pp55dNdEcCynfj9X7nyUKUXoUEwfXqaZt0omVOmDe9oOTdKStH4GmAw6zxMFs50ZayuMfHDKlO7Tfw==", + "version": "7.27.1", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.27.1.tgz", + "integrity": "sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==", "license": "MIT", "engines": { "node": ">=6.9.0" @@ -813,13 +813,13 @@ } }, "node_modules/@babel/helpers": { - "version": "7.26.0", - "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.26.0.tgz", - "integrity": "sha512-tbhNuIxNcVb21pInl3ZSjksLCvgdZy9KwJ8brv993QtIVKJBBkYXz4q4ZbAv31GdnC+R90np23L5FbEBlthAEw==", + "version": "7.27.1", + "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.27.1.tgz", + "integrity": "sha512-FCvFTm0sWV8Fxhpp2McP5/W53GPllQ9QeQ7SiqGWjMf/LVG07lFa5+pgK05IRhVwtvafT22KF+ZSnM9I545CvQ==", "license": "MIT", "dependencies": { - "@babel/template": "^7.25.9", - "@babel/types": "^7.26.0" + "@babel/template": "^7.27.1", + "@babel/types": "^7.27.1" }, "engines": { "node": ">=6.9.0" @@ -841,12 +841,12 @@ } }, "node_modules/@babel/parser": { - "version": "7.26.2", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.26.2.tgz", - "integrity": "sha512-DWMCZH9WA4Maitz2q21SRKHo9QXZxkDsbNZoVD62gusNtNBBqDg9i7uOhASfTfIGNzW+O+r7+jAlM8dwphcJKQ==", + "version": "7.27.2", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.27.2.tgz", + "integrity": "sha512-QYLs8299NA7WM/bZAdp+CviYYkVoYXlDW2rzliy3chxd1PQjej7JORuMJDJXJUb9g0TT+B99EwaVLKmX+sPXWw==", "license": "MIT", "dependencies": { - "@babel/types": "^7.26.0" + "@babel/types": "^7.27.1" }, "bin": { "parser": "bin/babel-parser.js" @@ -2512,30 +2512,30 @@ "license": "MIT" }, "node_modules/@babel/template": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.25.9.tgz", - "integrity": "sha512-9DGttpmPvIxBb/2uwpVo3dqJ+O6RooAFOS+lB+xDqoE2PVCE8nfoHMdZLpfCQRLwvohzXISPZcgxt80xLfsuwg==", + "version": "7.27.2", + "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.27.2.tgz", + "integrity": "sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==", "license": "MIT", "dependencies": { - "@babel/code-frame": "^7.25.9", - "@babel/parser": "^7.25.9", - "@babel/types": "^7.25.9" + "@babel/code-frame": "^7.27.1", + "@babel/parser": "^7.27.2", + "@babel/types": "^7.27.1" }, "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/traverse": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.25.9.tgz", - "integrity": "sha512-ZCuvfwOwlz/bawvAuvcj8rrithP2/N55Tzz342AkTvq4qaWbGfmCk/tKhNaV2cthijKrPAA8SRJV5WWe7IBMJw==", + "version": "7.27.1", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.27.1.tgz", + "integrity": "sha512-ZCYtZciz1IWJB4U61UPu4KEaqyfj+r5T1Q5mqPo+IBpcG9kHv30Z0aD8LXPgC1trYa6rK0orRyAhqUgk4MjmEg==", "license": "MIT", "dependencies": { - "@babel/code-frame": "^7.25.9", - "@babel/generator": "^7.25.9", - "@babel/parser": "^7.25.9", - "@babel/template": "^7.25.9", - "@babel/types": "^7.25.9", + "@babel/code-frame": "^7.27.1", + "@babel/generator": "^7.27.1", + "@babel/parser": "^7.27.1", + "@babel/template": "^7.27.1", + "@babel/types": "^7.27.1", "debug": "^4.3.1", "globals": "^11.1.0" }, @@ -2563,13 +2563,13 @@ } }, "node_modules/@babel/types": { - "version": "7.26.0", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.0.tgz", - "integrity": "sha512-Z/yiTPj+lDVnF7lWeKCIJzaIkI0vYO87dMpZ4bg4TDrFe4XXLFWL1TbXU27gBP3QccxV9mZICCrnjnYlJjXHOA==", + "version": "7.27.1", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.27.1.tgz", + "integrity": "sha512-+EzkxvLNfiUeKMgy/3luqfsCWFRXLb7U6wNQTk60tovuckwB15B191tJWvpp4HjiQWdJkCxO3Wbvc6jlk3Xb2Q==", "license": "MIT", "dependencies": { - "@babel/helper-string-parser": "^7.25.9", - "@babel/helper-validator-identifier": "^7.25.9" + "@babel/helper-string-parser": "^7.27.1", + "@babel/helper-validator-identifier": "^7.27.1" }, "engines": { "node": ">=6.9.0" @@ -3863,6 +3863,16 @@ "node": ">= 10.0.0" } }, + "node_modules/@dual-bundle/import-meta-resolve": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/@dual-bundle/import-meta-resolve/-/import-meta-resolve-4.1.0.tgz", + "integrity": "sha512-+nxncfwHM5SgAtrVzgpzJOI1ol0PkumhVo469KCf9lUi21IGcY90G98VuHm9VRrUypmAzawAHO9bs6hqeADaVg==", + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, "node_modules/@eslint-community/eslint-utils": { "version": "4.4.0", "license": "MIT", @@ -7797,40 +7807,37 @@ } }, "node_modules/@stylexjs/babel-plugin": { - "version": "0.9.3", - "resolved": "https://registry.npmjs.org/@stylexjs/babel-plugin/-/babel-plugin-0.9.3.tgz", - "integrity": "sha512-D/zWrxddlEmVOKSMB0Ei+IOtpxK/U5ghQPaByKEUKIHVlH2Di4dYQiR8W1DjZJamD6NigR5ULB5Lait15p4gdg==", - "license": "MIT", - "dependencies": { - "@babel/core": "^7.25.8", - "@babel/helper-module-imports": "^7.22.15", - "@babel/traverse": "^7.25.7", - "@babel/types": "^7.25.8", - "@stylexjs/shared": "0.9.3", - "@stylexjs/stylex": "0.9.3", - "esm-resolve": "^1.0.11" - } - }, - "node_modules/@stylexjs/shared": { - "version": "0.9.3", - "resolved": "https://registry.npmjs.org/@stylexjs/shared/-/shared-0.9.3.tgz", - "integrity": "sha512-0gtKFjZxAvDdUdoZTuvukovboD3K12BxkswKHHBRvzfcrM0rQXGMXoHS1gLRMQJ9kllJaa/I3sclbeWKyELm6Q==", + "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==", "license": "MIT", "dependencies": { + "@babel/core": "^7.26.8", + "@babel/helper-module-imports": "^7.25.9", + "@babel/traverse": "^7.26.8", + "@babel/types": "^7.26.8", + "@dual-bundle/import-meta-resolve": "^4.1.0", + "@stylexjs/stylex": "0.13.1", "postcss-value-parser": "^4.1.0" } }, "node_modules/@stylexjs/stylex": { - "version": "0.9.3", - "resolved": "https://registry.npmjs.org/@stylexjs/stylex/-/stylex-0.9.3.tgz", - "integrity": "sha512-q3kYZ5bMXlVyF6Wh8b8Uwl701aSu8aEhim0AlQTaAXKMt0J6nTCWOjSwq6GNR74Ez4pcm2Ha4NDqhkYhKYGBcQ==", + "version": "0.13.1", + "resolved": "https://registry.npmjs.org/@stylexjs/stylex/-/stylex-0.13.1.tgz", + "integrity": "sha512-s/aRE+pGaroMSttMDlrSMHf1lTF+uGe4ncWoRMlKZav6pg5g11sWuJojgA640aZy9jFgWvWSWbXzyUzeoDuMUQ==", "license": "MIT", "dependencies": { "css-mediaquery": "^0.1.2", "invariant": "^2.2.4", - "styleq": "0.1.3" + "styleq": "0.2.1" } }, + "node_modules/@stylexjs/stylex/node_modules/styleq": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/styleq/-/styleq-0.2.1.tgz", + "integrity": "sha512-L0TR0NQb+X4/ktDEKmjWyp27gla+LUYi/by5k5SjKXf6/pvZP7wbwEB5J+tqxdFVPgzbsuz+d4RTScO/QZquBw==", + "license": "MIT" + }, "node_modules/@svgr/babel-plugin-add-jsx-attribute": { "version": "8.0.0", "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-8.0.0.tgz", @@ -11846,6 +11853,8 @@ }, "node_modules/css-mediaquery": { "version": "0.1.2", + "resolved": "https://registry.npmjs.org/css-mediaquery/-/css-mediaquery-0.1.2.tgz", + "integrity": "sha512-COtn4EROW5dBGlE/4PiKnh6rZpAPxDeFLaEEwt4i10jpDMFt2EhQGS79QmmrO+iKCHv0PU/HrOWEhijFd1x99Q==", "license": "BSD" }, "node_modules/css-minimizer-webpack-plugin": { @@ -13786,12 +13795,6 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/esm-resolve": { - "version": "1.0.11", - "resolved": "https://registry.npmjs.org/esm-resolve/-/esm-resolve-1.0.11.tgz", - "integrity": "sha512-LxF0wfUQm3ldUDHkkV2MIbvvY0TgzIpJ420jHSV1Dm+IlplBEWiJTKWM61GtxUfvjV6iD4OtTYFGAGM2uuIUWg==", - "license": "Apache-2.0" - }, "node_modules/espree": { "version": "9.6.1", "resolved": "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz", @@ -31590,8 +31593,8 @@ "license": "MIT", "dependencies": { "@babel/helper-module-imports": "^7.24.7", - "@stylexjs/babel-plugin": "^0.9.3", - "@stylexjs/stylex": "^0.9.3", + "@stylexjs/babel-plugin": "^0.13.1", + "@stylexjs/stylex": "^0.13.1", "postcss-value-parser": "^4.1.0" }, "devDependencies": { diff --git a/packages/react-strict-dom/babel/preset.js b/packages/react-strict-dom/babel/preset.js index ac671fa6..cfc7e5ad 100644 --- a/packages/react-strict-dom/babel/preset.js +++ b/packages/react-strict-dom/babel/preset.js @@ -27,6 +27,7 @@ function reactStrictPreset(_, options = {}) { [ styleXPlugin, { + debug: opts.debug, dev: opts.dev, importSources: [{ from: 'react-strict-dom', as: 'css' }], runtimeInjection: false, @@ -35,8 +36,7 @@ function reactStrictPreset(_, options = {}) { rootDir: process.cwd(), type: 'commonJS' //themeFileExtension: '.cssvars.js', - }, - useRemForFontSize: false + } } ] ]; diff --git a/packages/react-strict-dom/package.json b/packages/react-strict-dom/package.json index 92ee5917..23ac626e 100644 --- a/packages/react-strict-dom/package.json +++ b/packages/react-strict-dom/package.json @@ -34,8 +34,8 @@ }, "dependencies": { "@babel/helper-module-imports": "^7.24.7", - "@stylexjs/babel-plugin": "^0.9.3", - "@stylexjs/stylex": "^0.9.3", + "@stylexjs/babel-plugin": "^0.13.1", + "@stylexjs/stylex": "^0.13.1", "postcss-value-parser": "^4.1.0" }, "devDependencies": { diff --git a/packages/react-strict-dom/src/dom/modules/createStrictDOMComponent.js b/packages/react-strict-dom/src/dom/modules/createStrictDOMComponent.js index 396ef17a..ee7bff76 100644 --- a/packages/react-strict-dom/src/dom/modules/createStrictDOMComponent.js +++ b/packages/react-strict-dom/src/dom/modules/createStrictDOMComponent.js @@ -7,7 +7,7 @@ * @flow strict */ -import type { CompiledStyles } from '@stylexjs/stylex/lib/StyleXTypes'; +import type { CompiledStyles } from '@stylexjs/stylex'; import type { ReactDOMStyleProps } from '../../types/renderer.web'; import type { StrictProps } from '../../types/StrictProps'; diff --git a/packages/react-strict-dom/src/native/stylex/index.js b/packages/react-strict-dom/src/native/stylex/index.js index fb780898..a60e6139 100644 --- a/packages/react-strict-dom/src/native/stylex/index.js +++ b/packages/react-strict-dom/src/native/stylex/index.js @@ -408,6 +408,8 @@ function resolveStyle( return result; } +export const __customProperties: MutableCustomProperties = {}; + /** * The create method shim should do initial transforms like * renaming/expanding/validating properties, essentially all the steps @@ -433,6 +435,45 @@ function _create(styles: S): { } export const create: IStyleX['create'] = _create as $FlowFixMe; +const RE_CAPTURE_VAR_NAME = /^var\(--(.*)\)$/; +export const createTheme = ( + baseTokens: Tokens, + overrides: CustomProperties +): CustomProperties => { + const result: MutableCustomProperties = { $$theme: 'theme' }; + for (const key in baseTokens) { + const varName: string = baseTokens[key]; + const normalizedKey = varName.replace(RE_CAPTURE_VAR_NAME, '$1'); + result[normalizedKey] = overrides[key]; + } + return result; +}; + +export const defineConsts = (tokens: { + [string]: string +}): { [string]: string } => { + if (__DEV__) { + errorMsg('css.defineConsts() is not supported.'); + } + return tokens; +}; + +type Tokens = { [string]: string }; +let defineVarsCount = 1; +export const defineVars = (tokens: CustomProperties): Tokens => { + const result: Tokens = {}; + for (const key in tokens) { + const value = tokens[key]; + const customPropName = `${key}__id__${defineVarsCount++}`; + result[key] = `var(--${customPropName})`; + // NOTE: it's generally not a good idea to mutate the default context, + // but defineVars is always called before any component body is evaluated, + // and so it's safe to do so here. + __customProperties[customPropName] = value; + } + return result; +}; + export const firstThatWorks = ( ...values: $ReadOnlyArray ): T => { @@ -442,7 +483,6 @@ export const firstThatWorks = ( type Keyframes = { +[key: string]: { +[k: string]: string | number } }; - function _keyframes(k: Keyframes): Keyframes { if (__DEV__) { errorMsg('css.keyframes() is not supported.'); @@ -451,9 +491,16 @@ function _keyframes(k: Keyframes): Keyframes { } export const keyframes: (Keyframes) => string = _keyframes as $FlowFixMe; -/** - * The spread method shim - */ +type PositionTry = { + +[k: string]: string | number +}; +function _positionTry(p: PositionTry): PositionTry { + if (__DEV__) { + errorMsg('css.positionTry() is not supported.'); + } + return p; +} +export const positionTry: (PositionTry) => string = _positionTry as $FlowFixMe; export function props( this: ResolveStyleOptions, @@ -645,36 +692,3 @@ export function props( return nativeProps; } - -type Tokens = { [string]: string }; -let count = 1; -const RE_CAPTURE_VAR_NAME = /^var\(--(.*)\)$/; - -export const __customProperties: MutableCustomProperties = {}; - -export const defineVars = (tokens: CustomProperties): Tokens => { - const result: Tokens = {}; - for (const key in tokens) { - const value = tokens[key]; - const customPropName = `${key}__id__${count++}`; - result[key] = `var(--${customPropName})`; - // NOTE: it's generally not a good idea to mutate the default context, - // but defineVars is always called before any component body is evaluated, - // and so it's safe to do so here. - __customProperties[customPropName] = value; - } - return result; -}; - -export const createTheme = ( - baseTokens: Tokens, - overrides: CustomProperties -): CustomProperties => { - const result: MutableCustomProperties = { $$theme: 'theme' }; - for (const key in baseTokens) { - const varName: string = baseTokens[key]; - const normalizedKey = varName.replace(RE_CAPTURE_VAR_NAME, '$1'); - result[normalizedKey] = overrides[key]; - } - return result; -}; diff --git a/packages/react-strict-dom/src/types/renderer.web.js b/packages/react-strict-dom/src/types/renderer.web.js index 9389c841..76672427 100644 --- a/packages/react-strict-dom/src/types/renderer.web.js +++ b/packages/react-strict-dom/src/types/renderer.web.js @@ -9,5 +9,6 @@ export type ReactDOMStyleProps = $ReadOnly<{ className?: string, + 'data-style-src'?: string, style?: $ReadOnly<{ [string]: string | number }> }>; diff --git a/packages/react-strict-dom/src/types/styles.js b/packages/react-strict-dom/src/types/styles.js index a02db78d..797fa5ee 100644 --- a/packages/react-strict-dom/src/types/styles.js +++ b/packages/react-strict-dom/src/types/styles.js @@ -13,9 +13,9 @@ import type { StyleXStyles, Theme, VarGroup -} from '@stylexjs/stylex/lib/StyleXTypes'; +} from '@stylexjs/stylex'; -import typeof TStyleX from '@stylexjs/stylex'; +import typeof * as TStyleX from '@stylexjs/stylex'; export type Style = InlineStyles; @@ -25,11 +25,13 @@ export type Styles = StyleXArray< export type IStyleX = $ReadOnly<{ create: TStyleX['create'], + createTheme: TStyleX['createTheme'], + defineConsts: TStyleX['defineConsts'], + defineVars: TStyleX['defineVars'], firstThatWorks: TStyleX['firstThatWorks'], keyframes: TStyleX['keyframes'], + positionTry: TStyleX['positionTry'], props: TStyleX['props'], - defineVars: TStyleX['defineVars'], - createTheme: TStyleX['createTheme'], ... }>; diff --git a/packages/react-strict-dom/tests/css-test.native.js b/packages/react-strict-dom/tests/css-test.native.js index 5218c37e..a4800832 100644 --- a/packages/react-strict-dom/tests/css-test.native.js +++ b/packages/react-strict-dom/tests/css-test.native.js @@ -584,6 +584,16 @@ describe('properties: general', () => { ); }); + test('positionTryFallbacks', () => { + css.positionTry({ + left: 0, + width: 1000 + }); + expect(console.error).toHaveBeenCalledWith( + expect.stringContaining('css.positionTry() is not supported') + ); + }); + test('transitionProperty', () => { const { underTest } = css.create({ underTest: { diff --git a/patches/@stylexjs+babel-plugin+0.9.3.patch b/patches/@stylexjs+babel-plugin+0.9.3.patch deleted file mode 100644 index ccac1451..00000000 --- a/patches/@stylexjs+babel-plugin+0.9.3.patch +++ /dev/null @@ -1,54 +0,0 @@ -diff --git a/node_modules/@stylexjs/babel-plugin/lib/index.js b/node_modules/@stylexjs/babel-plugin/lib/index.js -index 0a7919f..d7ce000 100644 ---- a/node_modules/@stylexjs/babel-plugin/lib/index.js -+++ b/node_modules/@stylexjs/babel-plugin/lib/index.js -@@ -1233,15 +1233,9 @@ function readImportDeclarations(path, state) { - if (importedName === 'props') { - state.stylexPropsImport.add(localName); - } -- if (importedName === 'attrs') { -- state.stylexAttrsImport.add(localName); -- } - if (importedName === 'keyframes') { - state.stylexKeyframesImport.add(localName); - } -- if (importedName === 'include') { -- state.stylexIncludeImport.add(localName); -- } - if (importedName === 'firstThatWorks') { - state.stylexFirstThatWorksImport.add(localName); - } -@@ -1284,15 +1278,9 @@ function readRequires(path, state) { - if (prop.key.name === 'props') { - state.stylexPropsImport.add(value.name); - } -- if (prop.key.name === 'attrs') { -- state.stylexAttrsImport.add(value.name); -- } - if (prop.key.name === 'keyframes') { - state.stylexKeyframesImport.add(value.name); - } -- if (prop.key.name === 'include') { -- state.stylexIncludeImport.add(value.name); -- } - if (prop.key.name === 'firstThatWorks') { - state.stylexFirstThatWorksImport.add(value.name); - } -@@ -1321,7 +1309,7 @@ function injectDevClassNames(obj, varName, state) { - for (const [key, value] of Object.entries(obj)) { - const devClassName = namespaceToDevClassName(key, varName, state.filename ?? 'UnknownFile'); - result[key] = { -- [devClassName]: devClassName, -+ //[devClassName]: devClassName, - ...value - }; - } -@@ -1332,7 +1320,7 @@ function convertToTestStyles(obj, varName, state) { - for (const [key, _value] of Object.entries(obj)) { - const devClassName = namespaceToDevClassName(key, varName, state.filename ?? 'UnknownFile'); - result[key] = { -- [devClassName]: devClassName, -+ //[devClassName]: devClassName, - $$css: true - }; - }