Option to customize injected className

The problem

I’m working with @cdonohue on benefit.

It’s a similar solution to TailwindCSS in that it’s a utility CSS library, but powered by emotion.

<div class='bg-blue-500 text-white p-8 rounded'>...</div>

becomes (via our own jsx wrapper):

<div class='css-p8ywv3 css-1u78gm9 css-1rhef98 css-yrxnuw'>...</div>

Because we convert bg-blue-500 to css(declarations), emotion returns css-p8ywv3.

Proposed solution

When working in development, I’d like to keep the utility classes the same.

I’m having a hard time proposing a how, but my best guess would be introducing a prefix options to babel-plugin-emotion, similar to:

https://emotion.sh/docs/babel-plugin-emotion#labelformat

The default value of prefix would be css-[hash] for backwards compatibility:

{
  "plugins": [
    [
      "emotion",
      {
        // sourceMap is on by default but source maps are dead code eliminated in production
        "sourceMap": true,
        "autoLabel": process.env.NODE_ENV !== 'production',
        "labelFormat": "[local]",
        "prefix": "css-[hash]",
        "cssPropOptimization": true
      }
    ]
  ]
}

Users would be able to specify "prefix": false, which would ignore the prefix entirely and only output label.

Now, I fully understand the need for hashes for preventing conflicting rules under the same name.

In development, I’d propose that the computed className from a label would maintain it’s hash association so that, should that same className be generated with a different hash, a warning/error is thrown.

Alternative solutions

Because the declarations are generated dynamically, even local doesn’t work:

https://emotion.sh/docs/babel-plugin-emotion#labelformat

label comes close, but ends up being very verbose:

https://emotion.sh/docs/labels#___gatsby

Additional context

[Andarist]

You should be able to do this:

css({
  padding: 10,
  margin: 2,
}, {
 label: 'myCustomString',
})

[a-tonchev]

I am also interested in this matter. Now we have css-[hash], it would be just fine if we have css-[hash]_myCustomString

Thus you don’t really need huge maintenance, since you can just parse the hash out of the custom string.

and maybe while creating the css:

css({
  padding: 10,
  margin: 2,
}, {
 customClassName: 'myCustomString',
})