Issue building static storybook in 0.8.0

[BMCwebdev]

Heyo. So when I updated to v0.8.0 I ran into an issue running npm run build-storybook. The build would fail with this error message:

=> Failed to build the preview
TypeError: [vite-plugin-stylex] this.addWatchFile is not a function

If I roll back to v 0.7.0 the build will run. Let me know if I can provide any other information. Thanks!

[HorusGoul]

This plugin doesn't call the addWatchFile anywhere, I'm going to need a reproduction repo, storybook version, vite version, etc.

[patrickstubner]

Same issue here. But not only when running storybook, also when running normal build pnpm run build or pnpm run build-storybook.
I'm using a pretty basic Vite 5.2.6, React 18.2.0, Typescript 5.4.3 setup.
@stylexjs/stylex version 0.5.1
vite-plugin-stylex version 0.8.1 same Error as in the original post.
vite-plugin-stylex version 0.7.0 works fine.
So Storybook does not seam to be the issue but I'm on version 8.0.4 there.
So everything pretty up to date.
Hope this will help you.

[BMCwebdev]

In a test env I just set up with v8, everything worked fine while building storybook.
In the app I am working on I tested it out, and v8 I got that error.
I'll try to see what the differences between the two builds are, they are nearly the same. Will get back to you and set up a test repo if I track it down. Thanks!

[predaytor]

Aha! the error occurs when using the url string:
https://stackblitz.com/edit/remix-run-remix-tbable?file=app%2Froutes%2F_index.tsx

const styles = stylex.create({
	root: {
		backgroundImage: 'url(/background.svg)',
		// ^
	},
});

❯ pnpm build

> @ build /home/projects/remix-run-remix-tbable
> remix vite:build

vite v5.2.6 building for production...
✓ 83 modules transformed.
warnings when minifying css:
Unknown at rule: @stylex
rendering chunks (5)...
/assets/background.svg referenced in stylex.css didn't resolve at build time, it will remain unchanged to be resolved at runtime
x Build failed in 1.15s
TypeError: [vite-plugin-stylex] this.addWatchFile is not a function
    at Object.transform (file:///home/projects/remix-run-remix-tbable/node_modules/.pnpm/vite@5.2.6_lightningcss@1.24.1/node_modules/vite/dist/node/chunks/dep-BBHrJRja.js:31569:26)
    at async Object.generateBundle (file:///home/projects/remix-run-remix-tbable/node_modules/.pnpm/vite-plugin-stylex@0.8.1_@stylexjs+stylex@0.5.1_vite@5.2.6/node_modules/vite-plugin-stylex/dist/index.mjs:189:35)
    at async Bundle.generate (file:///home/projects/remix-run-remix-tbable/node_modules/.pnpm/rollup@4.13.0/node_modules/rollup/dist/es/shared/node-entry.js:17967:9)
    at async eval (file:///home/projects/remix-run-remix-tbable/node_modules/.pnpm/rollup@4.13.0/node_modules/rollup/dist/es/shared/node-entry.js:20504:27)
    at async catchUnfinishedHookActions (file:///home/projects/remix-run-remix-tbable/node_modules/.pnpm/rollup@4.13.0/node_modules/rollup/dist/es/shared/node-entry.js:19932:16)
    at async Module.build (file:///home/projects/remix-run-remix-tbable/node_modules/.pnpm/vite@5.2.6_lightningcss@1.24.1/node_modules/vite/dist/node/chunks/dep-BBHrJRja.js:67323:22)
    at async viteBuild (file:///home/projects/remix-run-remix-tbable/node_modules/.pnpm/@remix-run+dev@2.8.1_@remix-run+serve@2.8.1_lightningcss@1.24.1_typescript@5.4.3_vite@5.2.6/node_modules/@remix-run/dev/dist/vite/build.js:212:5)
    at async build (file:///home/projects/remix-run-remix-tbable/node_modules/.pnpm/@remix-run+dev@2.8.1_@remix-run+serve@2.8.1_lightningcss@1.24.1_typescript@5.4.3_vite@5.2.6/node_modules/@remix-run/dev/dist/vite/build.js:236:3)
    at async Object.viteBuild (file:///home/projects/remix-run-remix-tbable/node_modules/.pnpm/@remix-run+dev@2.8.1_@remix-run+serve@2.8.1_lightningcss@1.24.1_typescript@5.4.3_vite@5.2.6/node_modules/@remix-run/dev/dist/cli/commands.js:183:5)
    at async Object.run (file:///home/projects/remix-run-remix-tbable/node_modules/.pnpm/@remix-run+dev@2.8.1_@remix-run+serve@2.8.1_lightningcss@1.24.1_typescript@5.4.3_vite@5.2.6/node_modules/@remix-run/dev/dist/cli/run.js:252:7) {
  code: 'PLUGIN_ERROR',
  plugin: 'vite-plugin-stylex',
  hook: 'generateBundle'
}
 ELIFECYCLE  Command failed with exit code 1.

[nexisbs]

Same here:

The problem comes from this code:

const cssResult = await viteCssPlugin.transform?.call({}, stylexCSS, "stylex.css");

[nexisbs]

I think this will fix it:

const cssResult = await viteCssPlugin.transform?.call(
	this,
	stylexCSS,
	'stylex.css'
);

[HorusGoul]

Thank you all for the help! This is clearly going to keep happening so I'm going to release a small patch (0.8.2) and investigate how to use this new experimental API from Vite (vitejs/vite#16135) to make the plugin use the Vite pipeline for transforming CSS instead of this bunch of hacky things on generateBundle.

[predaytor]

Can confirm that the new version 0.9.0-next.0 has fixed this issue.