Twin.macro: TypeScript: error TS6133: 'tw' is declared but its value is never read.

[aaronjensen]

If you use tw just as an element prop, TypeScript doesn't think it's being used if I have noUnusedLocals: true in my tsconfig.json.

I could disable this warning in TS, or // @ts-ignore, but is there a better way of dealing with it?

[ben-rogerson]

Hey, there's currently no way of dealing with it that I can recommend.
If you find a way to disable the error for the tw import without a ignore comment, please let me know.

My plans are to allow usage of the twin tw prop without defining a default import:

// Something like this in the future 
import 'twin.macro'

[aaronjensen]

Ah, that'd be great, thanks. I'll let you know if I come across anything better.

[rbutera]

Perhaps we could look at how babel-plugin-styled-components implements the css prop?

[ben-rogerson]

Could be a good implementation to check out, I'll put it on the cards

[itsMapleLeaf]

@aaronjensen This should work:

import {} from "twin.macro"

const jsx = <div tw=""></div>

The {} will tell TS to keep it around when organizing imports, but also strip it from the final build. It's not necessary to import the tw symbol itself if you're only using the prop

That makes it work on the TS side of things, but based on https://github.com/ben-rogerson/twin.macro/issues/51#issuecomment-619289930 I'm not sure if twin actually respects this usage

[ben-rogerson]

Yeah, using empty curly brackets isn't going to work at this stage.
Perhaps twin should support that usage too?

[FredyC]

My solution is to get rid of noUnusedLocals and use ESLint instead for tracking unused variables which can be configured for exceptions.

rules:
  '@typescript-eslint/no-unused-vars': ['warn', { varsIgnorePattern: 'tw|css' }]

[abhijithvijayan]

It is not recommended to remove noUnusedLocals option in TypeScript as the main usage of it is not to allow building if unused local is found.

Relying on Eslint won't get that done.

The PR #70 seems to implement https://github.com/ben-rogerson/twin.macro/issues/51#issuecomment-619289930

Will this be merged any time soon @ben-rogerson ?

[rbutera]

@abhijithvijayan

It will likely be merged in 1.0.1 - within the next week or so.

You can speed up the process by helping with testing

[FredyC]

It is not recommended to remove noUnusedLocals option in TypeScript as the main usage of it is not to allow building if unused local is found.

Relying on Eslint won't get that done.

It will work if your CI runs tests & lint before building which is the pretty usual pattern.

Nonetheless, an unused variable is not a reason why build should fail. With tree shaking in place, it will be removed anyway from the resulting bundle. Not that it would matter in case of twin.macro at all since it doesn't have any runtime footprint :)

Ultimately, #70 will be a better solution, of course. Just pointing out that my workaround is pretty good for now.