Angular-cli: 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.

[Morente5]

A lot of warnings are being shown to me since these changes:

./path/to/component/some-component.component.scss
(Emitted value instead of an instance of Error) postcss-custom-properties: path\to\component\some-component.component.scss: Custom property ignored: not scoped to the top-level :root element (some-css-selector { ... --custom-property: ... })

when I set:

:root {
  --custom-property: 200; 
}

on styles.scss,
and I override it in a component, some-component.scss

some-css-selector {
  --custom-property: 100; 
}

It's working perfectly fine but it's very annoying seeing a warning for each css variable I override.

May that be related to a postcss-custom-properties limitation?

Edit: Just saw the warnings can be disabled using the warnings option but I don't know if that's a good idea or not.

[filipesilva]

@Morente5 that's definitely a problem. Can you open a new issue and reference this one there please? We may have to revert the PR that introduced this problem.

[jimblue]

After long time searching I just found the solution:

webpack-config

{
  loader: 'postcss-loader',
  options: {
    plugins: (loader) => [
      cssnext({
        features: {
          customProperties: {
            warnings: false
          }
        }
      })
    ]
  }
}             

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}