Do we have an option to opt out of randomized classnames in production?

[Zenahr]

When building the site, the classnames for native Docusaurus components receive randomized postfixes e.g.:

In build:

In dev:

Is there an option we can use to opt out of this optimization step? I'm aware of potential performance drawbacks.

Motivation: This would simplify adding custom CSS on native components that are not targetable via the exposed classnames found here

[slorber]

This "hash" is there for a reason, to automatically avoid conflicts between similar class names we (+ third party) theme authors might use. For example .container is a quite common class name that could be used by multiple persons, but .container_abc and .container_def are not. We don't provide that option on purpose, but you could use configureWebpack and find a way to do so (not sure it's a great idea though)

In the document linked, we mention you can create CSS selectors that ignore the hash suffix:

CSS module class names. These class names have a hash in production (codeBlockContainer_RIuc) and are appended with a long file path in development. They are considered implementation details and you should almost always avoid targeting them in your custom CSS. If you must, you can use an attribute selector ([class*='codeBlockContainer']) that ignores the hash.

Note that you can also swizzle wrap components and add your own stable class names if we don't provide any.

And if you detail the CSS targeting use case you have, we could consider adding new stable classes to help you target things more reliably.

[Zenahr]

Our use-case was the Details element. We went with this targeting method which works fine in both contexts:

/* STYLING FOR COLLAPSIBLES (<details> element) */
details.alert--info {
.......................................
    > div > div {
.......................................    
    }
}