[Feature]: add displayName option to custom CSS classes (using makeStyles)

Library

React Components / v9 (@fluentui/react-components)

Describe the feature that you would like added

Allow makeStyles to use displayName for user defined classes like in FUI V8 with mergeStyleSets

makeStyles now generates a whole bunch of classes with ciphered names that is hard to understand. Would be nice to have old readable class names as in FUI V8 (e.g. my-class-15478)

P.S.

I'm aware that there is the Griffel devtools chrome extension for that purpose, but I'm not sure why to force to use this extension instead of making class names readable. Moreover, what about other browsers (e.g. Firefox)?

Have you discussed this feature with our team

No response

Additional context

No response

Validations

[X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Hey, we don't plan to implement this feature. Please see comments on why below ⬇️

Allow makeStyles to use displayName for user defined classes like in FUI V8 with mergeStyleSets

mergeStyleSets generates monolithic classes while Griffel does Atomic CSS:

/* output from merge-classes */
.foo {
  background-color: red;
  display: flex; 
}

/* output from Griffel */
.f3xbvq9 {
  background-color: red;
}

.f22iagw {
  display: flex;
}

With monolithic it's obvious from where classes coming and they can be one off classes.
With Atomic CSS we don't distinguish styles coming from a component and style overrides: they are just classes.

Having separate code for development environment to generate completely different classes is not suitable for us. It will lead to bugs that will be hard to discovered 🥲

I'm aware that there is the Griffel devtools chrome extension for that purpose, but I'm not sure why to force to use this extension instead of making class names readable. Moreover, what about other browsers (e.g. Firefox)?

To clear, we are not forcing anyone to use it 🐱

It's just a tool that simplifies debugging and was inspired by styletron that has a similar issues with Atomic CSS. If you have any feedback on how we can improve devtools, please provide it in Griffel's discussions 🙏

P.S. Firefox support was not raised ever before, so please create an issue and we will prioritize it. AFAIK it should not be too hard to get the support as Firefox supports APIs that we used.

microsoft / fluentui