[unplugin] Vitest not compiling external package styles with babel-plugin #1399
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
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
import stylex from "@stylexjs/stylex";
import "../styles.css";
const styles = stylex.create({
root: {
backgroundColor: "blue",
},
});
export const Test = () => <div {...stylex.props(styles.root)}>stylex</div>;import { Box } from "@stark-bp/react/box";
import "../styles.css";
export const TestExternal = () => <Box>stylex</Box>;Test
import { render } from "@testing-library/react";
import { Test } from "./Test";
import { TestExternal } from "./TestExternal";
it("renders without crashing", async () => {
render(<Test />); // Works
});
it("renders without crashing", async () => {
render(<TestExternal />); // 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|