Customization of generated CSS classname

[jiri-matejka]

What is the feature you are proposing?

Currently, when using css template literal helper, the generated CSS class looks cryptic, such as css-2458908649.

My proposal is an option to customize it because of readability and debugging (especially for development phase).

For example, Linaria zero-runtime CSS in JS offers classNameSlug in its configuration.

It can even be a function:

module.exports = {
  classNameSlug: (hash, title, args) => sha1(`${args.name}-${title}`)
};

For me, option to get some kind of css template literal "title" in the class name would be the best one. Be it the variable name, or component name.

[parisaghm]

enable @emotion/babel-plugin

Babel config (.babelrc / babel.config.js):

{
"plugins": [
["@emotion", {
"sourceMap": true,
"autoLabel": "dev-only",
"labelFormat": "[filename]--[local]"
}]
]
}

If you’re using SWC (Next.js / Vite SWC)

Use the Emotion SWC plugin/config instead of Babel (same idea: “auto label” + label format), e.g. @swc/plugin-emotion or framework-native Emotion config.