Fix Vitest not compiling external package styles with babel-plugin #1405

Abhijrathod · 2025-12-21T17:56:50Z

Description

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.

Problem

When running Vitest with @stylexjs/unplugin, external packages that use StyleX are not being compiled by the Babel plugin, causing runtime errors:

Error: Unexpected 'stylex.defineVars' call at runtime. Styles must be compiled by '@stylexjs/babel-plugin'.

This happens because Vitest pre-bundles dependencies, skipping Babel transforms for external packages.

Solution

Added test option to plugin configuration (defaults to false)
When test: true is set and Vitest config is detected, automatically configure test.deps.inline for external packages
This prevents Vitest from pre-bundling these packages, allowing the StyleX plugin to transform them during test runs
Safely merges with existing user config (preserves existing deps.inline values)

Changes

packages/@stylexjs/unplugin/src/index.js: Added test option and Vitest deps.inline configuration
packages/@stylexjs/unplugin/__tests__/unplugin.test.js: Added test case to verify the fix
packages/@stylexjs/unplugin/README.md: Documented test and updated externalPackages options
packages/@stylexjs/stylex/package.json: Fixed Windows build issue (cross-platform file copy)

Testing

✅ Local StyleX code works
✅ External StyleX packages now work (with fix)
✅ externalPackages alone is sufficient (no manual deps.inline needed)
✅ No runtime stylex.defineVars error
✅ All existing tests pass

What This Fix Does

Aligns the test pipeline with the build pipeline - External packages are now transformed in tests just like in builds
Does NOT change runtime behavior - Only affects test configuration
Does NOT break runtime guarantees - StyleX runtime behavior unchanged
Improves developer experience - Removes need for manual deps.inline configuration

Related Issues

Fixes #1399

- 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.

…tion 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.

meta-cla · 2025-12-21T17:56:57Z

Hi @Abhijrathod!

Thank you for your pull request and welcome to our community.

Action Required

In order to merge any pull request (code, docs, etc.), we require contributors to sign our Contributor License Agreement, and we don't seem to have one on file for you.

Process

In order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA.

Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with CLA signed. The tagging process may take up to 1 hour after signing. Please give it that time before contacting us about it.

If you have received this in error or have any questions, please contact us at [email protected]. Thanks!

meta-cla · 2025-12-21T20:08:25Z

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Meta Open Source project. Thanks!

nmn

There's a lot of small issues and lot of code that seems redundant.

Generally, we expect you to manually configure vite and vitest to compile external packages that use StyleX. We might improve this in the future, but this PR doesn't seem to be making much of an improvement on that front.

It has a misunderstanding of what stylexPackages even means, which is the imports for StyleX itself and not other external packages that use StyleX.

nmn · 2025-12-26T01:07:07Z

.vscode/extensions.json

+  "recommendations": [
+    "flowtype.flow-for-vscode",
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode"


Please don't include unrelated changes.

nmn · 2025-12-26T01:07:13Z

.vscode/settings.json

 {
-    "javascript.validate.enable": false
-}
+  "javascript.validate.enable": false


nmn · 2025-12-26T01:07:25Z

packages/@stylexjs/stylex/package.json

  "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})\"",


We don't want inline node scripts

nmn · 2025-12-26T01:07:42Z

packages/@stylexjs/unplugin/README.md

+- `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.


duplication.

nmn · 2025-12-26T01:14:25Z

packages/@stylexjs/unplugin/src/index.js

+    // - /node_modules/@stark-bp/stylex/...
+    // - /node_modules/@stark-bp/react/...
+    // - /path/to/@stark-bp/stylex/... (for pnpm or symlinked packages)


what is @stark-bp?

nmn · 2025-12-26T01:14:42Z

packages/@stylexjs/unplugin/src/index.js

+    // - /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, '\\$&');


This file path matching logic is overly complicated.

Abhijrathod added 2 commits December 21, 2025 23:07

Abhijrathod requested review from ezzak, mellyeliu, necolas, nmn and vincentriemer as code owners December 21, 2025 17:56

meta-cla bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Dec 21, 2025

Merge branch 'main' into fix/vitest-external-packages

49bad71

nmn requested changes Dec 26, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Fix Vitest not compiling external package styles with babel-plugin #1405

Fix Vitest not compiling external package styles with babel-plugin #1405

Uh oh!

Abhijrathod commented Dec 21, 2025

Uh oh!

meta-cla bot commented Dec 21, 2025

Uh oh!

meta-cla bot commented Dec 21, 2025

Uh oh!

nmn left a comment

Uh oh!

nmn Dec 26, 2025

Uh oh!

nmn Dec 26, 2025

Uh oh!

nmn Dec 26, 2025

Uh oh!

nmn Dec 26, 2025

Uh oh!

nmn Dec 26, 2025

Uh oh!

nmn Dec 26, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

		- `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.

Fix Vitest not compiling external package styles with babel-plugin #1405

Are you sure you want to change the base?

Fix Vitest not compiling external package styles with babel-plugin #1405

Uh oh!

Conversation

Abhijrathod commented Dec 21, 2025

Description

Problem

Solution

Changes

Testing

What This Fix Does

Related Issues

Uh oh!

meta-cla bot commented Dec 21, 2025

Action Required

Process

Uh oh!

meta-cla bot commented Dec 21, 2025

Uh oh!

nmn left a comment

Choose a reason for hiding this comment

Uh oh!

nmn Dec 26, 2025

Choose a reason for hiding this comment

Uh oh!

nmn Dec 26, 2025

Choose a reason for hiding this comment

Uh oh!

nmn Dec 26, 2025

Choose a reason for hiding this comment

Uh oh!

nmn Dec 26, 2025

Choose a reason for hiding this comment

Uh oh!

nmn Dec 26, 2025

Choose a reason for hiding this comment

Uh oh!

nmn Dec 26, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants