Styled components and integrating with vite's react plugin

[leanmiguel]

Hello,

I'm looking at the example for vite and it looks like it's using https://www.npmjs.com/package/@vitejs/plugin-react-refresh. When initalizing a new vite project it comes with https://www.npmjs.com/package/@vitejs/plugin-react, and I can't seem to use that with twin.macro. I'm not too familiar with bundlers/build tools, and I was hoping I could get some clarification onto what's going on behind the scenes? I'd like to be able to use the new vite plugin so that I wouldn't have to import react in my app.

EDIT: it looks it's just been updated! Thanks for the update :) It'd still be very helpful to understand what is happening under the hood (for what was happening before), and what resources I can use to look into this further. Thanks!

[ben-rogerson]

Hey there, great you saw I just updated the styled components + vite example. I still need to update the remaining next examples too.

Here's the section from the readme that explains how twin works:

When babel runs over your javascript or typescript files at compile time, twin grabs your classes and converts them into css objects. These css objects are then passed into your chosen css-in-js library without the need for an extra client-side bundle:

import tw from 'twin.macro'

tw`text-sm md:text-lg`

// ↓ ↓ ↓ ↓ ↓ ↓

{
 fontSize: '0.875rem',
 '@media (min-width: 768px)': {
   fontSize: '1.125rem',
 },
}

Did you have any questions on top of this?

[leanmiguel]

Thanks for updating it!

I think I'm more confused as to why I couldn't use https://www.npmjs.com/package/@vitejs/plugin-react before when it was still using https://www.npmjs.com/package/@vitejs/plugin-react-refresh. I had an error whenever I tried to add the BaseStyles so I'm wondering what was happening there

[ben-rogerson]

All I know is that they tell us to use the react plugin now - sorry!

[leanmiguel]

No problem, thanks for taking a look!

[FezVrasta]

Where can I find the example to follow?

[ben-rogerson]

@FezVrasta Vite examples are here:
https://github.com/ben-rogerson/twin.examples/tree/master/vite-styled-components-typescript
https://github.com/ben-rogerson/twin.examples/tree/master/vite-emotion-typescript