From 8635d006dc707efffbf35bb0c3aad2e07e4c9361 Mon Sep 17 00:00:00 2001
From: Filipe Silva <filipematossilva@gmail.com>
Date: Thu, 14 Dec 2017 14:25:05 +0000
Subject: [PATCH] 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 #8289
---
 package-lock.json                             | 34 -------------------
 package.json                                  |  1 -
 .../cli/models/webpack-configs/styles.ts      |  3 --
 packages/@angular/cli/package.json            |  1 -
 4 files changed, 39 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index dafb50f4c935..079c607e9ca7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6550,40 +6550,6 @@
         "postcss-value-parser": "3.3.0"
       }
     },
-    "postcss-custom-properties": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-custom-properties/-/postcss-custom-properties-6.1.0.tgz",
-      "integrity": "sha1-nK8RUaxBsenmTTov+ezplsoYl30=",
-      "requires": {
-        "balanced-match": "1.0.0",
-        "postcss": "6.0.11"
-      },
-      "dependencies": {
-        "has-flag": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-2.0.0.tgz",
-          "integrity": "sha1-6CB68cx7MNRGzHC3NLXovhj4jVE="
-        },
-        "postcss": {
-          "version": "6.0.11",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.11.tgz",
-          "integrity": "sha512-DsnIzznNRQprsGTALpkC0xjDygo+QcOd+qVjP9+RjyzrPiyYOXBGOwoJ4rAiiE4lu6JggQ/jW4niY24WLxuncg==",
-          "requires": {
-            "chalk": "2.2.0",
-            "source-map": "0.5.7",
-            "supports-color": "4.4.0"
-          }
-        },
-        "supports-color": {
-          "version": "4.4.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-4.4.0.tgz",
-          "integrity": "sha512-rKC3+DyXWgK0ZLKwmRsrkyHVZAjNkfzeehuFWdGGcqGDTZFH73+RH6S/RDAAxl9GusSjZSUWYLmT9N5pzXFOXQ==",
-          "requires": {
-            "has-flag": "2.0.0"
-          }
-        }
-      }
-    },
     "postcss-discard-comments": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-2.0.4.tgz",
diff --git a/package.json b/package.json
index f7afb60a709a..b204efbb7f3b 100644
--- a/package.json
+++ b/package.json
@@ -75,7 +75,6 @@
     "nopt": "^4.0.1",
     "opn": "~5.1.0",
     "portfinder": "~1.0.12",
-    "postcss-custom-properties": "^6.1.0",
     "postcss-import": "^11.0.0",
     "postcss-loader": "^2.0.10",
     "postcss-url": "^7.1.2",
diff --git a/packages/@angular/cli/models/webpack-configs/styles.ts b/packages/@angular/cli/models/webpack-configs/styles.ts
index b1547bdcf500..b5ac8df8be10 100644
--- a/packages/@angular/cli/models/webpack-configs/styles.ts
+++ b/packages/@angular/cli/models/webpack-configs/styles.ts
@@ -11,7 +11,6 @@ import { CleanCssWebpackPlugin } from '../../plugins/cleancss-webpack-plugin';
 const postcssUrl = require('postcss-url');
 const autoprefixer = require('autoprefixer');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
-const customProperties = require('postcss-custom-properties');
 const postcssImports = require('postcss-import');
 
 /**
@@ -115,14 +114,12 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
         }
       ]),
       autoprefixer(),
-      customProperties({ preserve: true })
     ];
   };
   (postcssPluginCreator as any)[postcssArgs] = {
     variableImports: {
       'autoprefixer': 'autoprefixer',
       'postcss-url': 'postcssUrl',
-      'postcss-custom-properties': 'customProperties',
       'postcss-import': 'postcssImports',
     },
     variables: { minimizeCss, baseHref, deployUrl, projectRoot }
diff --git a/packages/@angular/cli/package.json b/packages/@angular/cli/package.json
index 26cc5eb3e5ef..54a80814b417 100644
--- a/packages/@angular/cli/package.json
+++ b/packages/@angular/cli/package.json
@@ -60,7 +60,6 @@
     "nopt": "^4.0.1",
     "opn": "~5.1.0",
     "portfinder": "~1.0.12",
-    "postcss-custom-properties": "^6.1.0",
     "postcss-import": "^11.0.0",
     "postcss-loader": "^2.0.10",
     "postcss-url": "^7.1.2",