Should split out shorthand properties in CSS.

[adjenks]

Some properties have a lot of trouble being handled in shorthand form with functions inside of them. For example: "calc() does not work when used in the flex property"
(I realise that link is broken but it exists in the bug list and can be found if you search for it: https://www.bing.com/search?q=calc%28%29+does+not+work+when+used+in+the+flex+property)

And example is that this doesn't work:

flex: calc(1) 1 150px;

but this does:

flex-grow: calc(1);
flex-shrink: 1;
flex-basis: auto;

So splitting them out for compatibility with Edge and other struggling browsers should be useful.

Also... Does babel even transform CSS? If not, then where should I put this?

[babel-bot]

Hey @adjenks! We really appreciate you taking the time to report an issue. The collaborators
on this project attempt to help as many people as possible, but we're a limited number of volunteers,
so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack
community that typically always has someone willing to help. You can sign-up here
for an invite.

[nicolo-ribaudo]

Nope, Babel is only for JavaScript. You can take a look at PostCSS (https://github.com/postcss/postcss), which is similar to Babel but for CSS.

[adjenks]

@nicolo-ribaudo Thank you good sir!