Object interpolation of custom properties should not be hyphenated

[noratarano]

Describe the enhancement

Object interpolation should not hyphenate user-specified CSS custom property definitions.

Motivation

For instance, in my current setup using Linaria (2.0.2), the following simple example:

const cssVars = {
  '--color-primaryText': '#222',
};

const className = css`
  ${cssVars};
`;

produces the following CSS:

.className {
  --color-primary-text: #222;
}

I would not have expected custom properties to receive this treatment, though I understand that regular CSS identifiers like fontSize and borderRadius would. I would have expected .className styles to look like this:

.className {
  --color-primaryText: #222;
}

The current implementation makes it so that if I generate cssVars I have to either mirror the transformation in my code or work around it by converting the object to a string myself and interpolating that.

Possible implementations

I'm thinking that perhaps the toCSS function should check for the -- prefix before hyphenating the key. The following diff could be sufficient, or something to this effect:

-      return `${hyphenate(key)}: ${
+      return `${key.startsWith('--') ? key : hyphenate(key)}: ${

Related Issues

N/A

[Anber]

Hi @noratarano!

Since it's can be a breaking change for someone, it won't be fixed in 2.0 branch, but it will be released today with 3.0.0-beta.1.

Thank you!

[noratarano]

Thank you!