From b042d4f23cbcf4b2eafa48bc3c026e65d317ba37 Mon Sep 17 00:00:00 2001 From: abhijrathod Date: Sun, 21 Dec 2025 23:07:29 +0530 Subject: [PATCH 1/2] Fix Vitest not compiling external package styles with babel-plugin - Add automatic Vitest deps.inline configuration for external packages - Fix Windows build issue by replacing cp -r with cross-platform Node.js solution - Add isFromStylexPackage helper to transform external package files - Add test case to verify Vitest configuration fix - Update VS Code settings for Flow development Fixes issue where external packages using StyleX were not being compiled during Vitest test runs, causing runtime errors. --- .vscode/extensions.json | 10 +- .vscode/settings.json | 4 +- package-lock.json | 138 +++--------------- packages/@stylexjs/stylex/package.json | 2 +- .../unplugin/__tests__/unplugin.test.js | 115 +++++++++++++++ packages/@stylexjs/unplugin/src/index.js | 39 ++++- 6 files changed, 182 insertions(+), 126 deletions(-) diff --git a/.vscode/extensions.json b/.vscode/extensions.json index 427ba6b57..19245a11b 100644 --- a/.vscode/extensions.json +++ b/.vscode/extensions.json @@ -1,5 +1,7 @@ { - "recommendations": [ - "flowtype.flow-for-vscode" - ] -} \ No newline at end of file + "recommendations": [ + "flowtype.flow-for-vscode", + "dbaeumer.vscode-eslint", + "esbenp.prettier-vscode" + ] +} diff --git a/.vscode/settings.json b/.vscode/settings.json index ab7667da3..f9a4c6800 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,3 +1,3 @@ { - "javascript.validate.enable": false -} \ No newline at end of file + "javascript.validate.enable": false +} diff --git a/package-lock.json b/package-lock.json index 27399de79..cdee26304 100644 --- a/package-lock.json +++ b/package-lock.json @@ -60,7 +60,6 @@ "integrity": "sha512-p/jUvulfgU7oKtj6Xpk8cA2Y1xKTtICGpJYeJXz2YVO2UcvjQgeRMLDGfDeqeRW2Ta+0QNFwcc8X3GH8SxZz6w==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "csstype": "^3.2.2" } @@ -80,7 +79,6 @@ "resolved": "https://registry.npmjs.org/react/-/react-19.2.0.tgz", "integrity": "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==", "license": "MIT", - "peer": true, "engines": { "node": ">=0.10.0" } @@ -588,7 +586,6 @@ "resolved": "https://registry.npmjs.org/react/-/react-19.2.0.tgz", "integrity": "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==", "license": "MIT", - "peer": true, "engines": { "node": ">=0.10.0" } @@ -903,7 +900,6 @@ "integrity": "sha512-BhHmn2yNOFA9H9JmmIVKJmd288g9hrVRDkdoIgRCRuSySRUHH7r/DI6aAXW9T1WwUuY3DFgrcaqB+deURBLR5g==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.8.0", "@eslint-community/regexpp": "^4.12.1", @@ -1158,7 +1154,6 @@ "resolved": "https://registry.npmjs.org/react/-/react-19.2.0.tgz", "integrity": "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==", "license": "MIT", - "peer": true, "engines": { "node": ">=0.10.0" } @@ -1218,7 +1213,6 @@ "integrity": "sha512-AvvthqfqrAhNH9dnfmrfKzX5upOdjUVJYFqNSlkmGf64gRaTzlPwz99IHYnVs28qYAybvAlBV+H7pn0saFY4Ig==", "dev": true, "license": "MIT", - "peer": true, "funding": { "url": "https://github.com/sponsors/colinhacks" } @@ -1286,7 +1280,6 @@ "version": "19.2.6", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "csstype": "^3.2.2" } @@ -1509,7 +1502,6 @@ "version": "4.0.3", "dev": true, "license": "MIT", - "peer": true, "engines": { "node": ">=12" }, @@ -1553,7 +1545,6 @@ "examples/example-react-router/node_modules/react": { "version": "19.2.0", "license": "MIT", - "peer": true, "engines": { "node": ">=0.10.0" } @@ -1561,7 +1552,6 @@ "examples/example-react-router/node_modules/react-dom": { "version": "19.2.0", "license": "MIT", - "peer": true, "dependencies": { "scheduler": "^0.27.0" }, @@ -1649,7 +1639,6 @@ "version": "7.2.4", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "esbuild": "^0.25.0", "fdir": "^6.5.0", @@ -1746,7 +1735,6 @@ "examples/example-redwoodsdk/node_modules/@cloudflare/vite-plugin": { "version": "1.15.2", "license": "MIT", - "peer": true, "dependencies": { "@cloudflare/unenv-preset": "2.7.11", "@remix-run/node-fetch-server": "^0.8.0", @@ -1824,7 +1812,6 @@ "version": "19.2.6", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "csstype": "^3.2.2" } @@ -2142,7 +2129,6 @@ "examples/example-redwoodsdk/node_modules/picomatch": { "version": "4.0.3", "license": "MIT", - "peer": true, "engines": { "node": ">=12" }, @@ -2153,7 +2139,6 @@ "examples/example-redwoodsdk/node_modules/react": { "version": "19.3.0-canary-561ee24d-20251101", "license": "MIT", - "peer": true, "engines": { "node": ">=0.10.0" } @@ -2161,7 +2146,6 @@ "examples/example-redwoodsdk/node_modules/react-dom": { "version": "19.3.0-canary-561ee24d-20251101", "license": "MIT", - "peer": true, "dependencies": { "scheduler": "0.28.0-canary-561ee24d-20251101" }, @@ -2274,7 +2258,6 @@ "examples/example-redwoodsdk/node_modules/rwsdk/node_modules/@types/react": { "version": "19.1.17", "license": "MIT", - "peer": true, "dependencies": { "csstype": "^3.0.2" } @@ -2416,7 +2399,6 @@ "examples/example-redwoodsdk/node_modules/vite": { "version": "7.2.4", "license": "MIT", - "peer": true, "dependencies": { "esbuild": "^0.25.0", "fdir": "^6.5.0", @@ -2539,7 +2521,6 @@ "examples/example-rollup/node_modules/react": { "version": "19.2.0", "license": "MIT", - "peer": true, "engines": { "node": ">=0.10.0" } @@ -2609,7 +2590,6 @@ "examples/example-rspack/node_modules/react": { "version": "19.2.0", "license": "MIT", - "peer": true, "engines": { "node": ">=0.10.0" } @@ -2826,7 +2806,6 @@ "version": "8.44.0", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@typescript-eslint/scope-manager": "8.44.0", "@typescript-eslint/types": "8.44.0", @@ -3048,7 +3027,6 @@ "version": "9.36.0", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.8.0", "@eslint-community/regexpp": "^4.12.1", @@ -3150,7 +3128,6 @@ "version": "3.0.3", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@types/estree": "^1.0.0" } @@ -3259,7 +3236,6 @@ "version": "4.0.3", "dev": true, "license": "MIT", - "peer": true, "engines": { "node": ">=12" }, @@ -3368,7 +3344,6 @@ "integrity": "sha512-NL8jTlbo0Tn4dUEXEsUg8KeyG/Lkmc4Fnzb8JXN/Ykm9G4HNImjtABMJgkQoVjOBN/j2WAwDTRytdqJbZsah7w==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "esbuild": "^0.25.0", "fdir": "^6.5.0", @@ -3675,7 +3650,6 @@ "version": "19.2.6", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "csstype": "^3.2.2" } @@ -3700,7 +3674,6 @@ "version": "9.39.1", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.8.0", "@eslint-community/regexpp": "^4.12.1", @@ -3862,7 +3835,6 @@ "version": "4.0.3", "dev": true, "license": "MIT", - "peer": true, "engines": { "node": ">=12" }, @@ -3873,7 +3845,6 @@ "examples/example-vite-react/node_modules/react": { "version": "19.2.0", "license": "MIT", - "peer": true, "engines": { "node": ">=0.10.0" } @@ -3996,7 +3967,6 @@ "version": "19.2.6", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "csstype": "^3.2.2" } @@ -4050,7 +4020,6 @@ "version": "4.0.3", "dev": true, "license": "MIT", - "peer": true, "engines": { "node": ">=12" }, @@ -4061,7 +4030,6 @@ "examples/example-vite-rsc/node_modules/react": { "version": "19.2.0", "license": "MIT", - "peer": true, "engines": { "node": ">=0.10.0" } @@ -4094,7 +4062,6 @@ "version": "7.1.12", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "esbuild": "^0.25.0", "fdir": "^6.5.0", @@ -4212,7 +4179,6 @@ "version": "4.0.3", "dev": true, "license": "MIT", - "peer": true, "engines": { "node": ">=12" }, @@ -4223,7 +4189,6 @@ "examples/example-vite/node_modules/react": { "version": "19.2.0", "license": "MIT", - "peer": true, "engines": { "node": ">=0.10.0" } @@ -4256,7 +4221,6 @@ "version": "7.2.4", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "esbuild": "^0.25.0", "fdir": "^6.5.0", @@ -4353,7 +4317,6 @@ "version": "19.2.6", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "csstype": "^3.2.2" } @@ -4424,7 +4387,6 @@ "examples/example-waku/node_modules/picomatch": { "version": "4.0.3", "license": "MIT", - "peer": true, "engines": { "node": ">=12" }, @@ -4435,7 +4397,6 @@ "examples/example-waku/node_modules/react": { "version": "19.2.0", "license": "MIT", - "peer": true, "engines": { "node": ">=0.10.0" } @@ -4443,7 +4404,6 @@ "examples/example-waku/node_modules/react-dom": { "version": "19.2.0", "license": "MIT", - "peer": true, "dependencies": { "scheduler": "^0.27.0" }, @@ -4465,7 +4425,6 @@ "examples/example-waku/node_modules/vite": { "version": "7.2.2", "license": "MIT", - "peer": true, "dependencies": { "esbuild": "^0.25.0", "fdir": "^6.5.0", @@ -4627,7 +4586,6 @@ "version": "8.17.1", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "fast-deep-equal": "^3.1.3", "fast-uri": "^3.0.1", @@ -4790,7 +4748,6 @@ "examples/example-webpack/node_modules/react": { "version": "19.1.1", "license": "MIT", - "peer": true, "engines": { "node": ">=0.10.0" } @@ -5109,7 +5066,6 @@ "node_modules/@algolia/client-search": { "version": "5.34.0", "license": "MIT", - "peer": true, "dependencies": { "@algolia/client-common": "5.34.0", "@algolia/requester-browser-xhr": "5.34.0", @@ -5418,7 +5374,6 @@ "node_modules/@babel/core": { "version": "7.28.5", "license": "MIT", - "peer": true, "dependencies": { "@babel/code-frame": "^7.27.1", "@babel/generator": "^7.28.5", @@ -7423,8 +7378,7 @@ "node_modules/@cloudflare/workers-types": { "version": "4.20251121.0", "devOptional": true, - "license": "MIT OR Apache-2.0", - "peer": true + "license": "MIT OR Apache-2.0" }, "node_modules/@codemirror/autocomplete": { "version": "6.20.0", @@ -7732,7 +7686,6 @@ } ], "license": "MIT", - "peer": true, "engines": { "node": ">=18" }, @@ -7753,7 +7706,6 @@ } ], "license": "MIT", - "peer": true, "engines": { "node": ">=18" } @@ -9037,7 +8989,6 @@ "node_modules/@fortawesome/fontawesome-svg-core": { "version": "6.7.2", "license": "MIT", - "peer": true, "dependencies": { "@fortawesome/fontawesome-common-types": "6.7.2" }, @@ -10590,7 +10541,6 @@ "node_modules/@mdx-js/mdx/node_modules/@babel/core": { "version": "7.12.9", "license": "MIT", - "peer": true, "dependencies": { "@babel/code-frame": "^7.10.4", "@babel/generator": "^7.12.5", @@ -11173,7 +11123,6 @@ "version": "3.6.0", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@octokit/auth-token": "^2.4.4", "@octokit/graphql": "^4.5.8", @@ -11376,7 +11325,6 @@ "version": "8.17.1", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "fast-deep-equal": "^3.1.3", "fast-uri": "^3.0.1", @@ -11734,7 +11682,6 @@ "version": "5.2.0", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@types/estree": "^1.0.0", "estree-walker": "^2.0.2", @@ -12047,7 +11994,8 @@ "optional": true, "os": [ "darwin" - ] + ], + "peer": true }, "node_modules/@rspack/cli": { "version": "1.6.5", @@ -12072,7 +12020,6 @@ "version": "1.6.4", "devOptional": true, "license": "MIT", - "peer": true, "dependencies": { "@module-federation/runtime-tools": "0.21.4", "@rspack/binding": "1.6.4", @@ -12128,7 +12075,6 @@ "version": "8.17.1", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "fast-deep-equal": "^3.1.3", "fast-uri": "^3.0.1", @@ -12379,7 +12325,6 @@ "version": "8.13.0", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "fast-deep-equal": "^3.1.3", "json-schema-traverse": "^1.0.0", @@ -13019,7 +12964,6 @@ "node_modules/@svgr/core": { "version": "6.5.1", "license": "MIT", - "peer": true, "dependencies": { "@babel/core": "^7.19.6", "@svgr/babel-preset": "^6.5.1", @@ -13841,7 +13785,6 @@ "node_modules/@types/react": { "version": "18.3.23", "license": "MIT", - "peer": true, "dependencies": { "@types/prop-types": "*", "csstype": "^3.0.2" @@ -13960,7 +13903,8 @@ "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz", "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==", "license": "MIT", - "optional": true + "optional": true, + "peer": true }, "node_modules/@types/unist": { "version": "2.0.11", @@ -14671,7 +14615,6 @@ "version": "3.2.4", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@testing-library/dom": "^10.4.0", "@testing-library/user-event": "^14.6.1", @@ -14867,6 +14810,7 @@ "version": "3.2.4", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@vitest/pretty-format": "3.2.4", "magic-string": "^0.30.17", @@ -15202,7 +15146,6 @@ "node_modules/acorn": { "version": "8.15.0", "license": "MIT", - "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -15275,7 +15218,6 @@ "node_modules/ajv": { "version": "6.12.6", "license": "MIT", - "peer": true, "dependencies": { "fast-deep-equal": "^3.1.1", "fast-json-stable-stringify": "^2.0.0", @@ -15330,7 +15272,6 @@ "node_modules/algoliasearch": { "version": "4.25.2", "license": "MIT", - "peer": true, "dependencies": { "@algolia/cache-browser-local-storage": "4.25.2", "@algolia/cache-common": "4.25.2", @@ -15787,7 +15728,6 @@ "node_modules/astring": { "version": "1.9.0", "license": "MIT", - "peer": true, "bin": { "astring": "bin/astring" } @@ -16460,7 +16400,6 @@ } ], "license": "MIT", - "peer": true, "dependencies": { "caniuse-lite": "^1.0.30001726", "electron-to-chromium": "^1.5.173", @@ -16555,6 +16494,7 @@ "version": "6.7.14", "dev": true, "license": "MIT", + "peer": true, "engines": { "node": ">=8" } @@ -17215,8 +17155,7 @@ }, "node_modules/codemirror": { "version": "5.65.19", - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/collapse-white-space": { "version": "1.0.6", @@ -17496,7 +17435,6 @@ "node_modules/copy-webpack-plugin/node_modules/ajv": { "version": "8.17.1", "license": "MIT", - "peer": true, "dependencies": { "fast-deep-equal": "^3.1.3", "fast-uri": "^3.0.1", @@ -17792,7 +17730,6 @@ "node_modules/css-minimizer-webpack-plugin/node_modules/ajv": { "version": "8.17.1", "license": "MIT", - "peer": true, "dependencies": { "fast-deep-equal": "^3.1.3", "fast-uri": "^3.0.1", @@ -18669,8 +18606,7 @@ }, "node_modules/devtools-protocol": { "version": "0.0.1495869", - "license": "BSD-3-Clause", - "peer": true + "license": "BSD-3-Clause" }, "node_modules/dir-glob": { "version": "3.0.1", @@ -18768,6 +18704,7 @@ "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.2.7.tgz", "integrity": "sha512-WhL/YuveyGXJaerVlMYGWhvQswa7myDG17P7Vu65EWC05o8vfeNbvNf4d/BOvH99+ZW+LlQsc1GDKMa1vNK6dw==", "license": "(MPL-2.0 OR Apache-2.0)", + "peer": true, "optionalDependencies": { "@types/trusted-types": "^2.0.7" } @@ -19343,7 +19280,6 @@ "node_modules/eslint": { "version": "8.57.1", "license": "MIT", - "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.2.0", "@eslint-community/regexpp": "^4.6.1", @@ -19565,7 +19501,6 @@ "version": "2.32.0", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@rtsao/scc": "^1.1.0", "array-includes": "^3.1.9", @@ -19617,7 +19552,6 @@ "version": "6.10.2", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "aria-query": "^5.3.2", "array-includes": "^3.1.8", @@ -19646,7 +19580,6 @@ "version": "7.37.5", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "array-includes": "^3.1.8", "array.prototype.findlast": "^1.2.5", @@ -19678,7 +19611,6 @@ "version": "4.6.2", "dev": true, "license": "MIT", - "peer": true, "engines": { "node": ">=10" }, @@ -20858,7 +20790,6 @@ "node_modules/flow-api-translator/node_modules/typescript": { "version": "5.3.2", "license": "Apache-2.0", - "peer": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" @@ -22416,7 +22347,6 @@ "node_modules/hermes-eslint": { "version": "0.32.1", "license": "MIT", - "peer": true, "dependencies": { "esrecurse": "^4.3.0", "hermes-estree": "0.32.1", @@ -22531,7 +22461,6 @@ "node_modules/hono": { "version": "4.10.6", "license": "MIT", - "peer": true, "engines": { "node": ">=16.9.0" } @@ -25068,7 +24997,6 @@ "version": "26.1.0", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "cssstyle": "^4.2.1", "data-urls": "^5.0.0", @@ -25201,7 +25129,6 @@ "node_modules/kysely": { "version": "0.28.8", "license": "MIT", - "peer": true, "engines": { "node": ">=20.0.0" } @@ -25268,7 +25195,6 @@ "node_modules/lightningcss": { "version": "1.30.2", "license": "MPL-2.0", - "peer": true, "dependencies": { "detect-libc": "^2.0.3" }, @@ -26017,6 +25943,7 @@ "resolved": "https://registry.npmjs.org/marked/-/marked-14.0.0.tgz", "integrity": "sha512-uIj4+faQ+MgHgwUW1l2PsPglZLOLOT1uErt06dAPtx2kjteLAkbsd/0FiYg/MGS+i7ZKLb7w2WClxHkzOOuryQ==", "license": "MIT", + "peer": true, "bin": { "marked": "bin/marked.js" }, @@ -27326,7 +27253,6 @@ "node_modules/mini-css-extract-plugin/node_modules/ajv": { "version": "8.17.1", "license": "MIT", - "peer": true, "dependencies": { "fast-deep-equal": "^3.1.3", "fast-uri": "^3.0.1", @@ -28741,7 +28667,6 @@ "integrity": "sha512-ilYQj1s8sr2ppEJ2YVadYBN0Mb3mdo9J0wQ+UuDhzYqURwSoW4n1Xs5vs7ORwgDGmyEh33tRMeS8KhdkMoLXQw==", "dev": true, "license": "Apache-2.0", - "peer": true, "dependencies": { "playwright-core": "1.57.0" }, @@ -28804,7 +28729,6 @@ } ], "license": "MIT", - "peer": true, "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", @@ -29212,7 +29136,6 @@ "version": "7.1.0", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" @@ -29414,7 +29337,6 @@ "node_modules/postcss-selector-parser": { "version": "6.1.2", "license": "MIT", - "peer": true, "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" @@ -29494,7 +29416,6 @@ "node_modules/prettier": { "version": "3.5.3", "license": "MIT", - "peer": true, "bin": { "prettier": "bin/prettier.cjs" }, @@ -29509,7 +29430,6 @@ "version": "0.32.0", "devOptional": true, "license": "MIT", - "peer": true, "peerDependencies": { "prettier": "^3.0.0" } @@ -29967,7 +29887,6 @@ "node_modules/react": { "version": "17.0.2", "license": "MIT", - "peer": true, "dependencies": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1" @@ -30104,7 +30023,6 @@ "node_modules/react-dom": { "version": "17.0.2", "license": "MIT", - "peer": true, "dependencies": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1", @@ -30164,7 +30082,6 @@ "name": "@docusaurus/react-loadable", "version": "5.5.2", "license": "MIT", - "peer": true, "dependencies": { "@types/react": "*", "prop-types": "^15.6.2" @@ -30190,7 +30107,6 @@ "node_modules/react-refresh": { "version": "0.17.0", "license": "MIT", - "peer": true, "engines": { "node": ">=0.10.0" } @@ -30198,7 +30114,6 @@ "node_modules/react-router": { "version": "5.3.4", "license": "MIT", - "peer": true, "dependencies": { "@babel/runtime": "^7.12.13", "history": "^4.9.0", @@ -30250,7 +30165,6 @@ "resolved": "https://registry.npmjs.org/react-server-dom-webpack/-/react-server-dom-webpack-19.2.1.tgz", "integrity": "sha512-6z3FuEtZ7wVWyPYRhKKRo4TF7IyQ7XrQZRW1fTjzK2mLVmcv7xJtoANSixaUJ+EFjCh2ekNOaBSoI9spiMSnNA==", "license": "MIT", - "peer": true, "dependencies": { "acorn-loose": "^8.3.0", "neo-async": "^2.6.1", @@ -31071,7 +30985,6 @@ "node_modules/remark-mdx/node_modules/@babel/core": { "version": "7.12.9", "license": "MIT", - "peer": true, "dependencies": { "@babel/code-frame": "^7.10.4", "@babel/generator": "^7.12.5", @@ -31702,7 +31615,6 @@ "node_modules/rollup": { "version": "4.45.1", "license": "MIT", - "peer": true, "dependencies": { "@types/estree": "1.0.8" }, @@ -33218,7 +33130,6 @@ "integrity": "sha512-kfr6kxQAjA96ADlH6FMALJwJ+eM80UqXy106yVHNgdsAP/CdzkkicglRAhZAvUycXK9AeadF6KZ00CWLtVMN4w==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@storybook/global": "^5.0.0", "@testing-library/jest-dom": "^6.6.3", @@ -34181,7 +34092,6 @@ "node_modules/terser-webpack-plugin/node_modules/ajv": { "version": "8.17.1", "license": "MIT", - "peer": true, "dependencies": { "fast-deep-equal": "^3.1.3", "fast-uri": "^3.0.1", @@ -34394,7 +34304,6 @@ "node_modules/tinyglobby/node_modules/picomatch": { "version": "4.0.3", "license": "MIT", - "peer": true, "engines": { "node": ">=12" }, @@ -34406,6 +34315,7 @@ "version": "1.1.1", "dev": true, "license": "MIT", + "peer": true, "engines": { "node": "^18.0.0 || >=20.0.0" } @@ -34644,8 +34554,7 @@ }, "node_modules/tslib": { "version": "2.8.1", - "license": "0BSD", - "peer": true + "license": "0BSD" }, "node_modules/turbo-stream": { "version": "3.1.0", @@ -34781,7 +34690,6 @@ "node_modules/typescript": { "version": "5.9.3", "license": "Apache-2.0", - "peer": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" @@ -34849,7 +34757,6 @@ "version": "8.46.3", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@typescript-eslint/scope-manager": "8.46.3", "@typescript-eslint/types": "8.46.3", @@ -35155,7 +35062,6 @@ "node_modules/unenv": { "version": "2.0.0-rc.24", "license": "MIT", - "peer": true, "dependencies": { "pathe": "^2.0.3" } @@ -35382,6 +35288,7 @@ "node_modules/unplugin": { "version": "2.3.11", "license": "MIT", + "peer": true, "dependencies": { "@jridgewell/remapping": "^2.3.5", "acorn": "^8.15.0", @@ -35395,6 +35302,7 @@ "node_modules/unplugin/node_modules/picomatch": { "version": "4.0.3", "license": "MIT", + "peer": true, "engines": { "node": ">=12" }, @@ -35947,6 +35855,7 @@ "version": "3.2.4", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "cac": "^6.7.14", "debug": "^4.4.1", @@ -35968,6 +35877,7 @@ "version": "6.5.0", "dev": true, "license": "MIT", + "peer": true, "engines": { "node": ">=12.0.0" }, @@ -35996,6 +35906,7 @@ "version": "7.1.6", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "esbuild": "^0.25.0", "fdir": "^6.5.0", @@ -36200,6 +36111,7 @@ "version": "3.2.4", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@vitest/spy": "3.2.4", "estree-walker": "^3.0.3", @@ -36225,6 +36137,7 @@ "version": "3.0.3", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@types/estree": "^1.0.0" } @@ -36233,6 +36146,7 @@ "version": "6.5.0", "dev": true, "license": "MIT", + "peer": true, "engines": { "node": ">=12.0.0" }, @@ -36421,7 +36335,6 @@ "node_modules/webpack": { "version": "5.101.3", "license": "MIT", - "peer": true, "dependencies": { "@types/eslint-scope": "^3.7.7", "@types/estree": "^1.0.8", @@ -36647,7 +36560,6 @@ "node_modules/webpack-dev-middleware/node_modules/ajv": { "version": "8.17.1", "license": "MIT", - "peer": true, "dependencies": { "fast-deep-equal": "^3.1.3", "fast-uri": "^3.0.1", @@ -36757,7 +36669,6 @@ "node_modules/webpack-dev-server/node_modules/ajv": { "version": "8.17.1", "license": "MIT", - "peer": true, "dependencies": { "fast-deep-equal": "^3.1.3", "fast-uri": "^3.0.1", @@ -36857,7 +36768,6 @@ "node_modules/webpack/node_modules/ajv": { "version": "8.17.1", "license": "MIT", - "peer": true, "dependencies": { "fast-deep-equal": "^3.1.3", "fast-uri": "^3.0.1", @@ -37123,7 +37033,6 @@ "version": "1.20251118.0", "hasInstallScript": true, "license": "Apache-2.0", - "peer": true, "bin": { "workerd": "bin/workerd" }, @@ -37141,7 +37050,6 @@ "node_modules/wrangler": { "version": "4.50.0", "license": "MIT OR Apache-2.0", - "peer": true, "dependencies": { "@cloudflare/kv-asset-handler": "0.4.0", "@cloudflare/unenv-preset": "2.7.11", @@ -37815,7 +37723,6 @@ "version": "2.3.1", "devOptional": true, "license": "ISC", - "peer": true, "engines": { "node": ">= 14" } @@ -38089,7 +37996,6 @@ "version": "4.0.3", "dev": true, "license": "MIT", - "peer": true, "engines": { "node": ">=12" }, @@ -38201,7 +38107,6 @@ "version": "4.0.3", "dev": true, "license": "MIT", - "peer": true, "engines": { "node": ">=12" }, @@ -38310,7 +38215,6 @@ "version": "4.0.3", "dev": true, "license": "MIT", - "peer": true, "engines": { "node": ">=12" }, diff --git a/packages/@stylexjs/stylex/package.json b/packages/@stylexjs/stylex/package.json index a89a82284..5424d3a73 100644 --- a/packages/@stylexjs/stylex/package.json +++ b/packages/@stylexjs/stylex/package.json @@ -29,7 +29,7 @@ }, "license": "MIT", "scripts": { - "prebuild": "rimraf lib && gen-types -i src/ -o lib/cjs && cp -r lib/cjs lib/es", + "prebuild": "rimraf lib && gen-types -i src/ -o lib/cjs && node -e \"require('fs').cpSync('lib/cjs', 'lib/es', {recursive: true, force: true})\"", "build:cjs": "cross-env BABEL_ENV=cjs rollup -c ./rollup.config.mjs", "build:esm": "cross-env BABEL_ENV=esm rollup -c ./rollup.config.mjs", "build": "npm run build:cjs && npm run build:esm", diff --git a/packages/@stylexjs/unplugin/__tests__/unplugin.test.js b/packages/@stylexjs/unplugin/__tests__/unplugin.test.js index dd5beec85..1eb02d437 100644 --- a/packages/@stylexjs/unplugin/__tests__/unplugin.test.js +++ b/packages/@stylexjs/unplugin/__tests__/unplugin.test.js @@ -141,4 +141,119 @@ describe('@stylexjs/unplugin', () => { fs.rmSync(tempDir, { recursive: true, force: true }); } }); + + test('configures Vitest deps.inline for external packages to prevent pre-bundling', async () => { + const tempDir = fs.mkdtempSync( + path.join(os.tmpdir(), 'stylex-unplugin-vitest-'), + ); + const originalCwd = process.cwd(); + try { + const pkgJson = { + dependencies: { + '@stark-bp/stylex': '1.0.0', + '@stark-bp/react': '1.0.0', + }, + }; + fs.writeFileSync( + path.join(tempDir, 'package.json'), + JSON.stringify(pkgJson), + 'utf8', + ); + + // Create mock external package with StyleX + fs.mkdirSync( + path.join(tempDir, 'node_modules', '@stark-bp', 'stylex', 'dist'), + { recursive: true }, + ); + fs.writeFileSync( + path.join(tempDir, 'node_modules', '@stark-bp', 'stylex', 'package.json'), + JSON.stringify({ + name: '@stark-bp/stylex', + version: '1.0.0', + dependencies: { '@stylexjs/stylex': '^0.17.4' }, + }), + 'utf8', + ); + // Create a file that uses stylex.defineVars (the error case) + fs.writeFileSync( + path.join(tempDir, 'node_modules', '@stark-bp', 'stylex', 'dist', 'tokens.stylex.js'), + `import stylex from '@stylexjs/stylex'; +export const tokens = stylex.defineVars({ + color: 'red', +});`, + 'utf8', + ); + + process.chdir(tempDir); + + const plugin = unplugin.vite({ + test: true, + useCSSLayers: true, + externalPackages: ['@stark-bp/stylex', '@stark-bp/react'], + }); + const viteConfigHook = plugin.config; + + // Test with Vitest config + const vitestConfig = { + test: { + include: ['./src/*.spec.tsx'], + watch: false, + globals: true, + environment: 'happy-dom', + }, + }; + + const result = + typeof viteConfigHook === 'function' + ? await viteConfigHook.call(plugin, vitestConfig, { + command: 'serve', + mode: 'development', + }) + : null; + + // Should configure optimizeDeps.exclude + expect(result?.optimizeDeps?.exclude).toEqual( + expect.arrayContaining(['@stark-bp/stylex', '@stark-bp/react']), + ); + + // Should configure test.deps.inline for Vitest (this is the fix!) + expect(result?.test).toBeDefined(); + expect(result?.test?.deps?.inline).toEqual( + expect.arrayContaining(['@stark-bp/stylex', '@stark-bp/react']), + ); + + // Test that external package files are transformed + // This simulates what happens when Vitest processes external packages + const externalPackageCode = `import stylex from '@stylexjs/stylex'; +export const tokens = stylex.defineVars({ + color: 'red', +});`; + const externalPackagePath = path.join( + tempDir, + 'node_modules', + '@stark-bp', + 'stylex', + 'dist', + 'tokens.stylex.js', + ); + + // Initialize the plugin + if (typeof plugin.buildStart === 'function') { + plugin.buildStart(); + } + + const transformResult = await plugin.transform( + externalPackageCode, + externalPackagePath, + ); + // Should transform the file (not return null) because it's from an external package + expect(transformResult).not.toBeNull(); + expect(transformResult?.code).toBeDefined(); + // The stylex.defineVars should be compiled, not left as runtime call + expect(transformResult?.code).not.toContain('stylex.defineVars'); + } finally { + process.chdir(originalCwd); + fs.rmSync(tempDir, { recursive: true, force: true }); + } + }); }); diff --git a/packages/@stylexjs/unplugin/src/index.js b/packages/@stylexjs/unplugin/src/index.js index 771cfeca0..dad87f9e2 100644 --- a/packages/@stylexjs/unplugin/src/index.js +++ b/packages/@stylexjs/unplugin/src/index.js @@ -287,6 +287,25 @@ const unpluginInstance = createUnplugin((userOptions = {}, metaOptions) => { return importSources.some((src) => containsStylexImport(code, src)); } + function isFromStylexPackage(id) { + if (!id || !stylexPackages || stylexPackages.length === 0) return false; + // Normalize path separators for cross-platform compatibility + const normalizedId = id.replace(/\\/g, '/'); + // Check if the file path contains any of the stylex package names + // Match patterns like: + // - /node_modules/@stark-bp/stylex/... + // - /node_modules/@stark-bp/react/... + // - /path/to/@stark-bp/stylex/... (for pnpm or symlinked packages) + return stylexPackages.some((pkg) => { + // Escape special regex characters in package name + const escapedPkg = pkg.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); + // Match package name as a directory segment (preceded by / and followed by / or end of string) + // This handles both standard npm/yarn (in node_modules) and pnpm/symlinked structures + const regex = new RegExp(`[/\\\\]${escapedPkg}(?:[/\\\\]|$)`); + return regex.test(normalizedId); + }); + } + function resetState() { stylexRulesById.clear(); if (devPersistToDisk) { @@ -366,7 +385,8 @@ const unpluginInstance = createUnplugin((userOptions = {}, metaOptions) => { // Only handle JS-like files; avoid parsing CSS/JSON/etc const JS_LIKE_RE = /\.[cm]?[jt]sx?(\?|$)/; if (!JS_LIKE_RE.test(id)) return null; - if (!shouldHandle(code)) return null; + // Handle files that either contain StyleX imports OR are from external packages that use StyleX + if (!shouldHandle(code) && !isFromStylexPackage(id)) return null; // Extract the pure filename by removing everything after '?' (e.g., handling Vite's '?v=' cache busting). const dir = path.dirname(id); @@ -466,7 +486,7 @@ const unpluginInstance = createUnplugin((userOptions = {}, metaOptions) => { if (!stylexPackages || stylexPackages.length === 0) return; const addExcludes = (existing = []) => Array.from(new Set([...existing, ...stylexPackages])); - return { + const result = { optimizeDeps: { ...(config?.optimizeDeps || {}), exclude: addExcludes(config?.optimizeDeps?.exclude || []), @@ -481,6 +501,21 @@ const unpluginInstance = createUnplugin((userOptions = {}, metaOptions) => { }, }, }; + // Configure Vitest's deps.inline for external packages + // This prevents Vitest from pre-bundling these packages, + // allowing the StyleX plugin to transform them during the test run + if (config?.test) { + const addInline = (existing = []) => + Array.from(new Set([...existing, ...stylexPackages])); + result.test = { + ...(config.test || {}), + deps: { + ...(config.test?.deps || {}), + inline: addInline(config.test?.deps?.inline || []), + }, + }; + } + return result; }, configResolved(config) { try { From 1bf61d03fe03cc9d114646de51349dc16eae5bcc Mon Sep 17 00:00:00 2001 From: abhijrathod Date: Sun, 21 Dec 2025 23:14:32 +0530 Subject: [PATCH 2/2] Fix Vitest not compiling external package styles - refined implementation This issue is caused by Vitest skipping Babel transforms for external dependencies. Since StyleX requires Babel compilation, externalPackages should automatically inline those dependencies during tests when test: true is enabled. Changes: - Add test option to plugin configuration (defaults to false) - Automatically configure Vitest test.deps.inline for external packages when test: true - Only applies when test: true AND Vitest config detected AND external packages exist - Safely merges with existing user config (preserves existing deps.inline values) - Add comprehensive documentation for test and externalPackages options - Update test to verify the fix works correctly This aligns the test pipeline with the build pipeline without changing runtime behavior or breaking runtime guarantees. Improves developer experience by removing the need for manual deps.inline configuration. Fixes: External packages using StyleX now work in Vitest without runtime errors. --- packages/@stylexjs/unplugin/README.md | 5 ++++- packages/@stylexjs/unplugin/__tests__/unplugin.test.js | 1 + packages/@stylexjs/unplugin/src/index.js | 10 +++++++--- 3 files changed, 12 insertions(+), 4 deletions(-) diff --git a/packages/@stylexjs/unplugin/README.md b/packages/@stylexjs/unplugin/README.md index 50f498ca1..adeb1ec1a 100644 --- a/packages/@stylexjs/unplugin/README.md +++ b/packages/@stylexjs/unplugin/README.md @@ -122,7 +122,10 @@ esbuild.build({ - `unstable_moduleResolution`: forwarded to the StyleX Babel plugin. - `lightningcssOptions`: pass-through options for `lightningcss`. - `cssInjectionTarget`: `(fileName: string) => boolean` to pick a CSS asset to append to. Defaults to `index.css`, `style.css`, or the first `.css` asset. -- `externalPackages`: package names inside `node_modules` that should be treated like app code (useful if they ship StyleX). They are excluded from Vite dependency optimization. +- `externalPackages`: array of package names that use StyleX. The plugin auto-discovers packages with StyleX dependencies, but you can manually specify additional packages here. When `test: true` is set, these packages are automatically added to Vitest's `test.deps.inline` to ensure they are transformed during test runs. +- `test`: boolean, enables test mode optimizations. When `true` and Vitest is detected, automatically configures `test.deps.inline` for external packages to prevent pre-bundling and ensure StyleX code is compiled. +- `externalPackages`: array of package names that use StyleX. The plugin auto-discovers packages with StyleX dependencies, but you can manually specify additional packages here. These packages are excluded from Vite dependency optimization. When `test: true` is set, they are automatically added to Vitest's `test.deps.inline` to ensure they are transformed during test runs. +- `test`: boolean, enables test mode optimizations. When `true` and Vitest is detected, automatically configures `test.deps.inline` for external packages to prevent pre-bundling and ensure StyleX code is compiled. This fixes the issue where external packages using StyleX fail in Vitest with "Unexpected 'stylex.defineVars' call at runtime" errors. - `devMode`: `'full' | 'css-only' | 'off'` (Vite only). - `devPersistToDisk`: persist collected rules to `node_modules/.stylex/rules.json` in dev so multiple Vite environments can share CSS. diff --git a/packages/@stylexjs/unplugin/__tests__/unplugin.test.js b/packages/@stylexjs/unplugin/__tests__/unplugin.test.js index 1eb02d437..d7f9a9f3f 100644 --- a/packages/@stylexjs/unplugin/__tests__/unplugin.test.js +++ b/packages/@stylexjs/unplugin/__tests__/unplugin.test.js @@ -186,6 +186,7 @@ export const tokens = stylex.defineVars({ process.chdir(tempDir); + // Test with test: true option (required for Vitest deps.inline configuration) const plugin = unplugin.vite({ test: true, useCSSLayers: true, diff --git a/packages/@stylexjs/unplugin/src/index.js b/packages/@stylexjs/unplugin/src/index.js index dad87f9e2..b27273aaf 100644 --- a/packages/@stylexjs/unplugin/src/index.js +++ b/packages/@stylexjs/unplugin/src/index.js @@ -181,6 +181,8 @@ const unpluginInstance = createUnplugin((userOptions = {}, metaOptions) => { devPersistToDisk = false, // Dev integration mode: 'full' (runtime + html), 'css-only' (serve CSS endpoint only), 'off' devMode = 'full', + // Enable test mode optimizations (e.g., Vitest deps.inline configuration) + test = false, treeshakeCompensation = ['vite', 'rollup', 'rolldown'].includes(framework), ...stylexOptions } = userOptions; @@ -501,10 +503,12 @@ const unpluginInstance = createUnplugin((userOptions = {}, metaOptions) => { }, }, }; - // Configure Vitest's deps.inline for external packages + // Configure Vitest's deps.inline for external packages when in test mode // This prevents Vitest from pre-bundling these packages, - // allowing the StyleX plugin to transform them during the test run - if (config?.test) { + // allowing the StyleX plugin to transform them during the test run. + // Vitest skips Babel transforms for external dependencies by default, + // but StyleX requires Babel compilation, so we inline them during tests. + if (test && config?.test && stylexPackages.length > 0) { const addInline = (existing = []) => Array.from(new Set([...existing, ...stylexPackages])); result.test = {