Unobfuscate output class names

[stevebeauge]

Hello,

I'm migrating some code from scss modules to griffel.

Using scss modules, a class .myClass is output as .myClass_xyz123 or similar. The original class name is preserved and a unique suffix is added to ensure uniqueness. That was great and easy to debug, especially on large html markup code.

Using griffel, the actual class names are obscure strings

Event thought the griffel dev tools help to identify the originating code:

It's still hard to navigate since I have to click on every node until I found the one I'm looking for.

Is there anything that can help, at least in dev mode, to simplify the generated class names?

I guess because of the mergeClasses helper, it can be hard to match exactlty 1:1, but maybe some empty classes may be emitted, just to "tag" the element ?

For example:

const useStyles = makeStyles({
  root : {
  },
  sub : {
  }
});

may add "__root" and "__sub" to the class names ? Even if the rules are actually in the merged style

Does it make sense ?