Using styled-jsx within Vite

[colindunn109]

Hey everyone!

I've been working on porting an existing project that leverages styled-jsx into a new project that I will be using Vite for.

The issue is, whenever I render out a component, I am thrown the following error:

this error means that styled-jsx didn't transpile your code at all therefore the style element is rendered as regular html and jsx is an invalid prop for it. More on that here.

The reason being is in order to leverage styled-jsx you need to pull it into you babel config.
I thought it would be simple to just pull the styled-jsx file into my vite.config but I am having no luck, and instead getting an error whenever I try an introduce that plugin into Vite.

I am aware there are alternatives to using styled-jsx, however the codebase that is being ported is very large, and rethinking how to structure our css would be a massive amount of lift.

Does anyone have any ideas? Does Vite need a separate plugin for styled-jsx for this to work?

Thanks!

[nathanoffline]

Were you able to figure this out? I've tried adding styled-jsx to vite.config.js but in the browser it logs __dirname is not defined.

[axerivant]

I didn't because I moved to svelte.

[colindunn109]

No dice here. There needs to be a Vite plugin that enables this. My team ended up moving another direction using CSS Modules as it was similar enough to get the functionality we needed. IE colocated and locally scoped styles.

The solution here would be to have a plugin to use within your vite config, but at the time of writing I don't believe there is one. If I knew more about the plugin world, I would author one myself. But sadly I do not.

I'd recommend taking a look into Emotion as well as another CSS-in-JS approach, or CSS Modules if you just want to locally scope and co-locate your CSS with components.

[AddictArts]

@axerivant funny, while true it would solve issues, it really doesn't address this specific issue and obviously moving a big react code-base to svelte is not an easy decision.

@colindunn109 I too decided to abandon it and use CSS Modules, thanks, which vite out of the box handles.

Even the emotion team has moved away from CSS-in-JS as I recall. It has it merits and the colocation is fantastic, but tooling always seems to crop up with issues. CSS Modules is the next closest thing. As mentioned similar enough.

[EranGrin]

I think I found a reasonable solution,
in the vite config:
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [
react({
babel: {
plugins: [
"styled-jsx/babel"
],
}
}),

[colindunn109]

Nice yea it looks like Vite now has support for this which is awesome. In general being on Vite means you can choose really any CSS solution now which is awesome progress from when I made this post.

[michelestaffiere]

this doesn't work - Styles are not being rendered with StyledJSX class names and styles leak out to other components

[EranGrin]

@michelestaffiere check out this post https://medium.com/@soniceran/using-styled-jsx-with-vite-and-react-cabf0d2ac10b