JSX Prop Pollution — More control over jsxStyleProps?

[manspaniel]

Hi there,

First of all — thank you for creating this beautiful library! 🐼

I really like JSX style props in some cases:

• <Flex gap={3} /> — Fab
• <styled.div gap={3} /> — Nifty

But if I manually create a styled component — I've already defined the styles, and the resulting prop types pollute the prop list when using Intellisense. I can't get a sense of the functional props, or even see the variants I've defined. Especially since the CSS props are showing up first.

This is particularly painful when styling something like Ark — where there are a lot of props. I end up having to constantly refer to the documentation to remember a prop name, rather than just referring to Intellisense.

I know that I can set jsxStyleProps to minimal, however this ruins <Flex gap={3} /> which I really like! I'd love some more control.

A more comprehensive fix could be to allow jsxStyleProps to be an object, when the developer would like more control? The keys would be for each scenario in which JSX props are generated. Something like:

"jsxStyleProps": {
  "factory": "minimal",  // eg. styled("div")
  "patterns": "all",     // eg. <Flex />
  "shorthand": "all"     // eg. styled.div
}

An "easy" fix could be to ensure that CSS props are shown last in the prop type list (not discounting the effort it takes to get typings right in the first place — I know how hard it can be to get this stuff working in the first place). But I think there's also something to be said for strictness in a design-system — when building a design system to be used in a team or by other consumers, the "all" option weakens the ideas behind the design system, and I think more control over usage would be a great addition.

— Dan