vite-plugin-twin? About Vite integration and not having to import twin.macro every time. Babel plugin didn't work, this is my solution.

[brunoti]

I've seen this:
https://www.npmjs.com/package/vite-plugin-twin

And I created this:

{
  name: 'vite-plugin-twin',
  enforce: 'pre',
  transform(code, name) {
    if (name.endsWith('.tsx')) {
      return {
        code: `
          import 'twin.macro';
          ${code}
        `,
      };
    }

    return {
      code,
    };
  },
}

I know the condition I'm using is not good enough, but I think I can help in some way. I did this because adding babel-plugin-twin on the react vite plugin like this:

react({
  babel: {
    plugins: [
      'babel-plugin-twin',
      'babel-plugin-macros',
      'babel-plugin-styled-components',
    ],
  },
})

But it would give an error when building, not when serving, but it was impossible to build. That "custom plugin" I made solved the problem and I could remove the babel plugin.

Also, I've looked at the babel plugin and it looks like it only verifies if already imported but nothing else. I don't need the condition on my project but it looks like the only thing I'm missing. Right?

Help me to help you!

[ben-rogerson]

Hey there - thanks for looking into this.
Before moving into custom plugin territory, it's worth asking if you saw this issue and tested the workaround?
If that works, possibly worth rolling a fix straight into babel-plugin-twin?

[brunoti]

sure! I will take a look and see if I can fix it there.