How to use this with Vite?

[FezVrasta]

Thanks for the plugin! I tried to use the styled-components plugin on a Vite project but it doesn't seem to do anything, I tried to use it in the optimizeDeps.esbuildOptions.plugins and in the plugins but it has no effect. Could you provide guidance please?

[alexkuz]

@FezVrasta Vite uses different plugin API than Esbuild, so this plugin wouldn't work there. I haven't used Vite a lot, but I wrote a Vite version, can you try it out?

yarn add --dev 'https://gitpkg.now.sh/lukalabs/lukalabs-npm/packages/esbuild-styled-components?vite-plugin'

Here's how you would use it in vite.config.js:

import styledComponentsPlugin from '@lukalabs/esbuild-styled-components/vite';
import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [styledComponentsPlugin({ namespace: 'xxx' }), react()],
})

[FezVrasta]

Thanks, I get this error when I try your command, may you publish it on npm please?

Internal Error: Invalid descriptor (https://gitpkg.now.sh/lukalabs/lukalabs-npm/packages/esbuild-styled-components?vite-plugin)

[alexkuz]

Are you using Yarn 2? I will publish this later, meanwhile please try this one:

yarn add --dev '@lukalabs/esbuild-styled-components@https://gitpkg.now.sh/api/pkg.tgz?url=lukalabs%2Flukalabs-npm%2Fpackages%2Fesbuild-styled-components&commit=vite-plugin'

[FezVrasta]

Thanks, this installs correctly with Yarn 2, but the plugin doesn't seem to do anything, my css properties are not compiled into className ones.

[alexkuz]

Yes, the implementation here is limited and doesn't include css props, at least for now. I should have mentioned it in README. It was created mainly to solve server rendering issues. I can look into implementing css, not sure when though.

Have you tried using vite-plugin-babel-macros + babel-plugin-styled-components, as discussed here?

[FezVrasta]

I'm using the react-plugin-swc with the swc styled-components plugin for now, having a esbuild-native solution would have been great though!

[igor-levkov]

I'm using the react-plugin-swc with the swc styled-components plugin for now, having a esbuild-native solution would have been great though!

@FezVrasta are you using awc plugin setup with Vite? If yes, then do you have sample repo for it?

[FezVrasta]

I'm just using this in the plugins list:

const react = require('@vitejs/plugin-react-swc').default;

[...]

      react({ plugins: [['@swc/plugin-styled-components', {}]] }),