Better autosuggest when using the styled jsx factory

[SlexAxton]

Description

If I use css or styled as a function in my code, I get a suggestion to import the correct module.

If I use <styled to start a block in jsx, I don't get any suggestion.

I'd love if we could somehow hint to typescript/vscode/something that this is a valid non-intrinsic component or something so it suggests the import?

Problem Statement/Justification

This would improve DX a good bit for my team!

Proposed Solution or API

Add some hint or different export to allow the suggestion in jsx.

Alternatives

No response

Additional Information

css auto-suggests the wrong import first, but the right one is at least there.

styled works if I use it in a code block:

But styled does not work if I use it in jsx (in fact, if I type <styled. (with the dot) then it changes the entire thing to a totally different suggested keyword)

[segunadebayo]

That's a good point. I'd love such tooling as well.

I don't know how to get this natively in the editor. There might be some config in VSCode to configure the JSX autosuggest triggers.

[SlexAxton]

Unfortunately vscode has very little by way of letting you tweak autosuggestions. I think the ultimate solution is probably a typescript one. I'm curious if other namespaced jsx factory type libraries succeeds here. I'll check some out sometime.

[cgatian]

JSX treats lowercased values as intrinsic elements (div, span, svg). Auto-complete and code hinting will only work when the element starts with a capital letter.

I tried extending the JSX IntrinsicElements, which kinda works for auto complete but still isnt what we really desire. It would be nice if we could specify the name of the export so we could use Styled

import { Styled } from 'styled-system/jsx';

declare module 'react/jsx-runtime' {
  namespace JSX {
    interface IntrinsicElements {
      styled: Styled;
    }
  }
}

microsoft/TypeScript#4648 (comment)

[cgatian]

Maybe the right way to fix this is to provide more hints through snippets? Going to look into what's possible on that front.

[cgatian]

I completely missed the jsxFactory property. If you change this to Styled autosuggest works properly!