Problem with CSS pseudo-element with "-" (first-child, last-child etc.)

[KacperKozak]

Pseudo-element with - don't work properly.

eg.:

Label:first-child {
    border-left: none;
}

In transpiled file looks like this:

// ...
var className = styles.Label + (variant.first-child ? ' ' + styles.Label__first-child : '');
// ...

And selector will be: .Label__first-child---36X92.

[KacperKozak]

@andreypopp Do you know how to fix it?

[andreypopp]

@Dexted yep, we need to transform variant names to camel case on both sides, probably here:

• https://github.com/andreypopp/react-css-components/blob/master/src/index.js#L186
• https://github.com/andreypopp/react-css-components/blob/master/src/index.js#L328

[andreypopp]

Would be happy if you can submit a PR with a failing test and a fix! Feel free to ask me questions if any!

[KacperKozak]

@andreypopp Ok I'll try to fix it.