Could someone help me get the postcss plugin working with solid js?

[taphill]

I'm trying to get solid js working with the stylex postcss plugin but am running in to the following error.

@stylexjs_stylex.js?v=f3fa421c:122 Uncaught Error: 'stylex.defineVars' should never be called at runtime.
It should be compiled away by '@stylexjs/babel-plugin'

Here's what I currently have

I attempted mimic this react example here, but I'm not sure where I'm going wrong. Can anyone help me out?

[zaydek]

Unsure but FWIW I use vite-plugin-stylex. I don't know if it works with Solid but I wouldn't be surprised if it does. https://github.com/HorusGoul/vite-plugin-stylex

[nmn]

I had tried to use the custom Vite plugin on the ecosystem page as part of the Qwik starter template in a Solid app and it just worked. Most setups other than Next.js are usually simple enough to work.

[nmn]

@taphill setting treeshakeCompensation: false in the babel config seems to solve the problem:

https://stackblitz.com/edit/vitejs-vite-ntuc7mbx?file=package.json,babel.config.cjs,src%2Ftokens.stylex.ts,src%2FApp.tsx

I also added the StyleX Babel plugin as an explicit dependency but I don't think that should make a difference since the package is installed either way. Still, it's a good practice to do so since it may not work with pnpm or bun.

[taphill]

That did the the trick, thank you @nmn!

Are there any gotchas I need to be aware with having that off? It doesn't seem like it from what I can tell in the docs.

https://stylexjs.com/docs/api/configuration/babel-plugin/#treeshakecompensation

[nmn]

There should be no gotchas! StyleX works with Solid.

Just remember to translate the React examples to Solid when trying various patterns.

e.g.

This example:

<div
  {...stylex.props(
    styles.base,
    props.isHighlighted && styles.highlighted,
    isActive ? styles.active : styles.inactive,
  )}
/>

Would probably become

<div
  {...stylex.props(
    styles.base,
    props.isHighlighted && styles.highlighted,
    isActive() ? styles.active : styles.inactive,
  )}
/>

in Solid

[taphill]

@nmn I may have spoken a little bit to soon. I seem to be running in to that same error again once I add more than one component which imports from the tokens.stylex.ts file. Do you have any other suggestions to get past this?

https://stackblitz.com/edit/vitejs-vite-bqafjxba?file=src%2FWrapper.tsx

[nmn]

@taphill

I am a bit confused why Vite is not transforming the .stylex.ts file when it's transforming everything else. The PostCSS part of things is working as expected and the CSS file is generated correctly.

So Vite is getting tripped up on the most basic transformation here.

I'm trying to update https://github.com/nmn/solid-start-stylex to the latest StyleX and see if that's a more reliable experience. Will report back once I do.

[nmn]

I couldn't figure out where the issue with Babel and Vite is in the postcss setup.
My current guess is that the Solid plugin doesn't apply the Babel plugin consistently in all cases.

Anyway, the custom Vite plugin I wrote a while ago for SolidStart seems to work extremely well still. Give it a try.
https://stackblitz.com/edit/vitejs-vite-drwahwas?file=src%2Ftokens.stylex.ts

(ignore pre.mjs, that's a way to apply pre-transformations before StyleX that I've been playing around with)