How to make styled-components work with Vite during production build?

[silenceofthewans]

I recently moved from create-react-app to Vite. Everything is working perfectly in dev server but when I build for production with vite my styles are all messed up it seems they aren't applied properly. So, is there any extra config needed to make styled-component work. In CRA I used babel and babel-plugin-styled-components maybe that is an issue? since Vite doesn't use babel

[silenceofthewans]

I solved it. It wasn't a issue with Vite. Somehow doing a CSS @import inside styled component caused that and removing it solved it. I also had issue while deploying to netlify which mentioned [vite]: Rollup failed to resolve import "react-is" from "node_modules/styled-components/dist/styled-components.browser.esm.js". and I fixed that one by setting node & npm versions in netlify to latest.

[AskAlice]

same

[jonasmarco]

any updates guys, see my project, I'm having the same error during the build process.

https://github.com/jonasmarco/contact-book

[julioalucero]

@jonasmarco did you find a solution?

[danielpza]

Using the react plugin with babel:

		react({
			include: /\.(jsx|tsx)$/,
			babel: {
				plugins: ['styled-components'],
				babelrc: false,
				configFile: false,
			},
		}),

[Amadeo-Frontend]

This works for me 😁
import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';

// https://vitejs.dev/config/
export default defineConfig({
plugins: [
react({
include: /.(jsx|tsx)$/,
babel: {
plugins: ['styled-components'],
babelrc: false,
configFile: false,
},
}),
],
});

[malavshah9]

@silenceofthewans That means currently styled components is supported by Vite, right?

[silenceofthewans]

I don't know about official support but I used the styled api and it worked fine apart from the issue in prod which was more of a issue on styled-components side. Haven't tested css prop etc but it should work.

[ronaldruzicka]

@silenceofthewans I'm also trying to use React + Styled Components with Vite. I would like to have full class names of the styled components on development, which was done with babel-plugin-styled-components and displayName: true. Did you manage to make it work with Vite? It's really hard to debug, when all the classes are compiled to something like .sc-bdfBQB.

Any help appreciated, thanks!

[ronaldruzicka]

I made it work with vite-plugin-babel-macros and importing styled from styled-components/macro
check this issue: styled-components/babel-plugin-styled-components#350

[andrienko]

Thanks!

I wrote a simple eslint plugin to ensure both macro import and cssprop are present: eslint-plugin-styled
It has autofixes too. So I just use the cssprop and run fixes, and macro import is added. Any suggestions are welcome :P

[eduhsoto]

Hi, right now when you installs styled components, automatically at json package it's add "babel-plugin-styled-components"