Restrict props types

[jgoux]

Hello,

When using styled I noticed that all the possible html props types are available on the component created which hid the variant in a very long list.

I think the whole point of styled is to restrict the set of the possible native props + providing our variants.

Is there a way to restrict the component's props to its variants + a specific subset (or no subset at all) of the possible other native props for the specific component used as the first argument?

For example I defined a Text component using styled("span", { /* some variants */ }) and here is what I have as possible props (a very long list ^^) :

[sastan]

That kind of autocompletion is not helpful. I noticed that too. Do you know how emotion/styled-components handle that?

I see 2 ways to solve this:

1. remove all additional attributes and use Record<string, unknown> – that would remove all type checking for these props
2. Extend the Twind VS Code Extension to show the variants first in the list

Did I miss something?
Are there other ways?

[jgoux]

This doesn't seem to be an issue with stitches :

Codesandbox here : https://codesandbox.io/s/competent-almeida-oxf56?file=/src/App.tsx

They are doing a lot of heavy lifting at the type level : https://github.com/modulz/stitches/blob/canary/packages/react/types/index.d.ts#L42

[sastan]

I see the same problem with stitches in the codesandbox: https://codesandbox.io/s/busy-matsumoto-tp3ik?file=/src/App.tsx

[sastan]

But that doesn't mean it can not be improved

Maybe we go with solution 2: Extend the Twind VS Code Extension to show the variants first in the list

What do you think?

[jgoux]

Yes it would be a great improvement to start with, then maybe in the future we will find TS tricks to have a more native solution. 👍

[sastan]

I believe the problem is that the default typescript IntelliSense shows all possible properties. But if you remove them you either allow any properties or no additional properties.

I'll try to take a look at the weekend.

Would be ok with if I move this to the typescript-plugin repo?

[jgoux]

Of course @sastan, let's move this and have a great week-end!

[andreypopp]

Maybe we go with solution 2: Extend the Twind VS Code Extension to show the variants first in the list

I'm using tsserver with this plugin but with vim, not VS Code so it would be really nice to have this fixed on the plugin side rather than on an editor extension side.

Does the plugin has access to AST? In this case the plugin could only provide additional autocompletion if the cursor is within the tw(...) call, what do you think of this solution?

[sastan]

Once solved the fix would be within the typescript-plugin.

Does the plugin has access to AST?

Yes. Autocompletion should only be provided within specific methods (tw, style, apply).

[igorbrasileiro]

I'm using tsserver with this plugin but with vim, not VS Code so it would be really nice to have this fixed on the plugin side rather than on an editor extension side.

Can you share your setup to use this plugin with vim?