[unplugin] Vitest not compiling external package styles with babel-plugin
- Dominant language
- JavaScript
- Stars
- 10.3k
- Forks
- 481
- Avg merge
- 3d 8h
- Merged PRs (30d)
- 13
Description
## Describe the issue
When running vitest with the vite unplugin and being dependent on external packages using stylex, it errors with
```
Error: Unexpected 'stylex.defineVars' call at runtime. Styles must be compiled by '@stylexjs/babel-plugin'.
````
It runs perfectly fine when not using any external packages.
## Versions
"@stylexjs/unplugin": "0.17.3",
"react": "19.2.0",
"react-dom": "19.2.0",
"vite": "7.2.6",
"vite-tsconfig-paths": "5.1.4",
"vitest": "4.0.14"
## Setup
### Vite Config
```js
import stylex from "@stylexjs/unplugin";
import react from "@vitejs/plugin-react";
import { defineConfig } from "vitest/config";
export default defineConfig({
plugins: [
stylex.vite({
test: true,
useCSSLayers: true,
// @ts-expect-error seems like this is missing from the stylex types
externalPackages: ["@stark-bp/stylex", "@stark-bp/react", "@stark-bp/react-icons"],
}),
react(),
],
test: {
include: ["./src/*.spec.tsx"],
watch: false,
globals: true,
environment: "happy-dom",
},
});
```
### Cases
```js
import stylex from "@stylexjs/stylex";
import "../styles.css";
const styles = stylex.create({
root: {
backgroundColor: "blue",
},
});
export const Test = () =>
```
```js
import { Box } from "@stark-bp/react/box";
import "../styles.css";
export const TestExternal = () => stylex;
```
### Test
```js
import { render } from "@testing-library/react";
import { Test } from "./Test";
import { TestExternal } from "./TestExternal";
it("renders without crashing", async () => {
render(); // Works
});
it("renders without crashing", async () => {
render(); // Fails
});
```
### Error
```
Error: Unexpected 'stylex.defineVars' call at runtime. Styles must be compiled by '@stylexjs/babel-plugin'.
❯ errorForFn node_modules/@stylexjs/stylex/lib/es/stylex.mjs:133:28
❯ Module.stylexDefineVars node_modules/@stylexjs/stylex/lib/es/stylex.mjs:145:9
❯ node_modules/@stark-bp/stylex/dist/tokens.stylex.js:2:34
❯ src/stylex/TestExternal.tsx:1:1
1| import { Box } from "@stark-bp/react/box";
| ^
2| import "../styles.css";
3|
```
Contributor guide
Assessment
This issue has not been assessed yet.