Feature request: warning for missing "import 'twin.macro';"

[matepaiva]

Hi all!

In most of my cases, I use the tw directive within an HTML tag. The directive does not use any imported lib, but it depends on having an absolute import on every page that we use it. Example:

import 'twin.macro';

export default function Footer() {
  return <footer tw="bg-almost-black text-gray-300 px-6 lg:px-8 py-6 md:py-12">hello</footer>;

The problem is: sometimes we forget to add the twin.macro during a refactor.

I was wondering if we could apply a eslint rule or a warning when the file has a tw directive but no twin.macro import. It's like the warning eslint shows when you use jsx without importing the React lib.

Do you think it is possible?

Thank you

[ben-rogerson]

Hey Matheus,

If you're only after the tw prop you can avoid the import altogether with babel-plugin-twin.

I'm keen on adding a "tw hasn't been imported" warning too, but it'll only be possible with babel-plugin-twin running in your project.

[ben-rogerson]

• I'm also keen to explore a "eslint-plugin-twin" too

[matepaiva]

Thank you, @ben-rogerson! It works like a charm for my use case!