Css Variable Custom Resolver Configuration

[jerrywithaz]

Describe the enhancement

It would be great to have the ability to format the css variable names via the linaria.config.js file.

I prefer my css variable names to be the following format: {componentName}-{cssProperty}-{slug}-{index}.

So an example would be: --flexbox-flex-direction-f22br00-0

Motivation

My team prefers descriptive variable id's because it makes the css easier to read and makes it easy to determine what each variable is being used for rather than having to look back and forth between the variables and the css to determine which variable belongs to which css property. I am sure that other teams would like to customize their formats to their needs as well but I don't think linaria should force a format on anyone.

I implemented this by using my own tagResolver and extending StyledProcessor. However, it required a lot of code for this simple functionality.

Possible implementations

Add an idResolver option to the linaria config with the following shape: idResolver: (displayName, source, unit, currentCssText, slug) => string.

• displayName - the displayName of the component
• source - the string source of the css property value
• unit - the unit
• currentCssText - the current value of the cssText as its being processed i.e. flex: 1; flex-direction: . This allows for developers to extract the current css variable via regex (my usecase).
• slug - the component slug

Related Issues

[Anber]

Hi @jerrywithaz!

Thank you for your proposal. It has been implemented in #1079 and will be released soon.

[jerrywithaz]

@Anber this is awesome, thank you!!