add fallback for css variables

[cedvdb]

- [ X ] feature request

Desired functionality.

Css variables should degrade gracefully on older browsers by having a fallback. This post css plugin does exactly that when started with the option preserve: true. More generally I believe the cli should support the css cutting edge with fallback thanks to cssnext. However variables is what this request is about.

Why ?

If css variable is not supported by a browser it will simply be ignored, meaning that a bunch of css statements won't be applied.

Example

This

:root {
  --color: red;
}

div {
  color: var(--color);
}

should compile to this:

:root {
  --color: red;
}

div {
  color: red;
  color: var(--color);
}

Here is an example that would do just that:

// dependencies
var fs = require("fs")
var postcss = require("postcss")
var customProperties = require("postcss-custom-properties")

// css to be processed
var css = fs.readFileSync("s.css", "utf8")

// process css using postcss-custom-properties
var output = postcss()
  .use(customProperties({ preserve: true }))
  .process(css)
	.css
	
console.log(output)

[dominikg]

There is an option for a separate postcss.config.js and postcss-loader supports it. You can also pass a ctx object, so things like 'only minify production builds' work.

Currently the postcss-config is hardwired the webpack config, extracting it into a project-level file would allow users of angular-cli to change the postcss configuration to fit their needs.

[garoyeri]

I'm working on PR #7712 to add this feature. I verified that using postcss-cssnext will help fix the CSS rules so that IE11 is satisfied and accepts them.

[garoyeri]

But the tests are not being nice to me... Can someone please take a look at my PR and see if I'm doing something dumb?

[garoyeri]

I tried out cssnext, but there are some licenses (Public Domain) that are incompatible with the policies of the Angular CLI project. Instead, I have submitted a new PR #7770 using the postcss-custom-properties module which is much less invasive and much more license-friendly. Let's see how it goes.