Class name customize API

[oliviertassinari]

Summary

Today, the class names look something like this:

It's far from great DX, especially in dev-mode. It's actually a DX regression compared to emotion/sc. Also to note that emotion/sc were are DX regression compared to JSS.

Instead, I believe that we should get:

• 1. Start the class name prefix from -2 or something like -va1 not -1 for variants. There is already a first one, the main one, it's confusing.
• 2. In dev mode, use the names, like sc/emotion

How do we get the name? Either from the JavaScript variable name, or using some kind of a configurator. For example, sc uses withConfig({ displayName }), emotion uses styled(, { label }.

• 3. In prod mode, allow to reproduce https://v4.mui.com/ global class names with no class name hash like f1bxvs2e

This should only be done for labels that developers provide and guarantee to be unique in the namespace. So it's important to distinguish two types of labels: a. the ones developers can add without thinking about unicity and b. the ones that are guaranteed to be unique.

[brijeshb42]

This is already in the works and will be part of v1. Default will always be random class though.

[oliviertassinari]

This is already in the works and will be part of v1.

@brijeshb42 Great

Default will always be random class though.

Do you have more details on the behavior that we plan to implement? I'm not sure to understand this point.

[brijeshb42]

It'll be similar to what we do with emotion right now except it'll be configuratble by users as well -

const Component = styled('div', metadata)(cssObject)

The structure of metadata will be upto the user/library and in case of @mui/material, it'll be same as interface {name: string; slot: string}.

From Pigment config, users can have an option like

const pigmentConfig = {
  generateClassName(metadata: Metadata, randomClassSlug: string, variantObject?: Record<string,) {
    // in case of @mui/material
    return `${metadata.name}-${metadata.slot}${variantObject ? variantObject.className : ''}`;
  },
};

This is the rough API