stitchesjs / stitches

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

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'
})

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:

stitches/packages/react/src/features/styled.js

Line 41 in 02ba207

    
           styledComponent.displayName = displayName || `Styled.${DefaultType.displayName || DefaultType.name || DefaultType}`

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:

stitches/packages/core/src/features/css.js

Lines 66 to 67 in 02ba207

    
           const componentNamePrefix =  displayName ? ('c-' + displayName +'') : 'c' 
        
           const className = `${toTailDashed(config.prefix)}${componentNamePrefix}-${hash}`

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

	const componentNamePrefix = displayName ? ('c-' + displayName +'') : 'c'
	const className = `${toTailDashed(config.prefix)}${componentNamePrefix}-${hash}`

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