customize the classname outputs

[liajoy]

Hi guys. stitches is a great library and I love it. But I found it's hard to debug. There's no way for developer to customize the classname and I can't refer the hased classname in code. In emotion, developer can use label prop to the css API. Then classname will be with the suffix label.

const clsFooter = css({
  // ...some styles
 label: 'footer'
})()

clsFooter // outputs .xxx-footer

It's more readable and useful for debug. With the support of babel plugin, the label can be generated automatically. If there's any posibility for the feature?

[peduarte]

Thanks for this. This is definitely something we're open to discuss.

I'm curious about the general preference between increasing the API layer vs using babel.

[liajoy]

For me, I prefer babel, because I just want this for debug, I don't want to think how to name the class. But I'm curious how to do this without adding a new API?

[Livven]

There's a related discussion at #677. I don't think this is either API or Babel, since any robust Babel solution would need to make use of an API to inject the friendly class name, no?

[coreybruyere]

Hi @peduarte - Any thoughts on this since this discussion was opened. I'm pushing for Stitches at work and other engineers are worried about debugging since they've come reliant on reading markup through inspect element.

[b2rsp]

Yap i also would love to know if there is way to work around this problem.

[om-orshee]

This is the workaround i came up with. I would prefer tho there is a simpler way, like adding a name attribute for example directly in css function. Hope this helps.

import { css } from 'stitches.config';

const sidebarStyles = css({
});

const SidebarStyles = () => {
const className = 'SideBar';
return ${className} ${sidebarStyles()}; // quotes are missing here due to editor using them as code markup
};

export default SidebarStyles;