fix(@angular/cli): remove postcss-custom-properties

We currently use a fallback for CSS custom properties on older browsers. This approach has a few problems:
- does not work if the custom property declaration is not part of the same of the same file that uses it (multiple global stylesheets, component css).
- does not work at all for component CSS in AOT.

@clydin suggested a browserlist based approach for enabling this functionality, but that requires a new feature that we don't have.

Since currently taking advantage of the custom property fallback is flaky even in the best case scenario, and potentially broken in prod (AOT), I think it's better to remove it altogether until we can actually do it right.

Fix angular#8289

Author: filipesilva

package-lock.json

@@ -75,7 +75,6 @@
     "nopt": "^4.0.1",
     "opn": "~5.1.0",
     "portfinder": "~1.0.12",
-    "postcss-custom-properties": "^6.1.0",
     "postcss-loader": "^2.0.8",
     "postcss-url": "^7.1.2",
     "raw-loader": "^0.5.1",

package.json

@@ -11,7 +11,6 @@ const cssnano = require('cssnano');
 const postcssUrl = require('postcss-url');
 const autoprefixer = require('autoprefixer');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
-const customProperties = require('postcss-custom-properties');
 
 /**
  * Enumerate loaders and their dependencies from this file to let the dependency validator
@@ -67,7 +66,7 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
               // If deployUrl contains a scheme, ignore baseHref use deployUrl as is.
               return `${deployUrl.replace(/\/$/, '')}${url}`;
             } else if (baseHref.match(/:\/\//)) {
-              // If baseHref contains a scheme, include it as is.
+              // If baseHref contains a scheme, include it as is.git
               return baseHref.replace(/\/$/, '') +
                   `/${deployUrl}/${url}`.replace(/\/\/+/g, '/');
             } else {
@@ -86,7 +85,6 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
         }
       ]),
       autoprefixer(),
-      customProperties({ preserve: true })
     ].concat(
         minimizeCss ? [cssnano(minimizeOptions)] : []
     );
@@ -96,7 +94,6 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
       'autoprefixer': 'autoprefixer',
       'postcss-url': 'postcssUrl',
       'cssnano': 'cssnano',
-      'postcss-custom-properties': 'customProperties'
     },
     variables: { minimizeCss, baseHref, deployUrl }
   };

packages/@angular/cli/models/webpack-configs/styles.ts

@@ -59,7 +59,6 @@
     "nopt": "^4.0.1",
     "opn": "~5.1.0",
     "portfinder": "~1.0.12",
-    "postcss-custom-properties": "^6.1.0",
     "postcss-loader": "^2.0.8",
     "postcss-url": "^7.1.2",
     "raw-loader": "^0.5.1",