Add custom props postcss plugin

[siimonevans]

Polyfill for custom properties on older browsers (in our case IE11). Tied to build:prod.

Input:

:root {
    --color: hotpink;
}

body {
    background-color: var(--color);
}

Output:

:root {
    --color: hotpink;
}

body {
    background-color: hotpink;
    background-color: var(--color);
}

Simples.

[helenb]

Hiya, this looks ok to me on the face of it. If I've understood correctly, this plugin simply adds fallbacks for browsers that don't support custom properties? Which is why we only need to run it in prod not dev? Also, I haven't tested on a local build (can do if you think it would be beneficial), but have you double checked it works OK running straight after autoprefixer? I couldn't think what problems there might be off the top of my head but I guess it's as well to test to make sure.

[siimonevans]

@helenb thanks for checking this out :)

Hiya, this looks ok to me on the face of it. If I've understood correctly, this plugin simply adds fallbacks for browsers that don't support custom properties? Which is why we only need to run it in prod not dev?

Correct.

Also, I haven't tested on a local build (can do if you think it would be beneficial)

I'd appreciate local testing in case node version/local config doesn't play nicely.

have you double checked it works OK running straight after autoprefixer?

Yeah. I think running it last is the safest, although running it before autoprefixer shouldn't change anything.

[helenb]

Sure will run a local test, probably tomorrow.

[nicklee]

Looks great

[nicklee]

We should add an ignore to the sass lint SpaceAroundOperator rule, otherwise it complains every time you use a custom property. Unfortunately I can't find the property to disable in the documentation, looks like it might be a WIP:

sasstools/sass-lint#877

[helenb]

Ran a test locally and it worked fine.

Re the space-around-operator issue the docs for that are here: https://github.com/sasstools/sass-lint/blob/master/docs/rules/space-around-operator.md. Could be worth updating sass-lint to see if that has been solved, as the issue @nicklee linked to is about a different linting error for custom properties.