(Feature request): good name of components generated by stitches inside react dev tools

[Aarbel]

Hi stiches team,

is there a way that generated stitches components get the right component name inside react developper tools ? It's quite hard to read inside the react chrome inspector. In the examples bellow i would like to see ScrollableContent instead of Styled.div inside the react chrome inspector

[shawnbot]

Though I could see Stitches supporting a displayName like this...

const ScrollableContent = styled('div', {
  displayName: 'ScrollableContent',
  ...styles
})

It's probably simpler to just assign it yourself:

ScrollableContent.displayName = 'ScrollableContent'

Or, in a single expression (less readable, IMO):

const ScrollableContent = Object.assign(style('div', {
  ...styles
}), {
  displayName: 'ScrollableContent'
})

[shawnbot]

Related: #1104 is an open issue to document the styled.withConfig() API, which supports a displayName and (if I'm reading the code correctly) assigns it here:

https://github.com/stitchesjs/stitches/blob/02ba2070fe561c0ff57a81c20a8591f8e091b853/packages/react/src/features/styled.js#L41

So, in your case, I think this will work:

const ScrollableContent = styled.withConfig({ displayName: 'ScrollableContent' })('div', { ...styles })

which—again, if I'm reading this correctly—will also inject ScrollableContent into the generated CSS class:

https://github.com/stitchesjs/stitches/blob/02ba2070fe561c0ff57a81c20a8591f8e091b853/packages/core/src/features/css.js#L66-L67

[Aarbel]

Thanks a lot @shawnbot, i implement it and give you a feedback of the efficiency of the api