chore(deps): update dependency postcss to v8 (#1578)

* chore(deps): update dependency postcss to v8

* refactor: custom property replacer to migrate to postcss-8

https://evilmartians.com/chronicles/postcss-8-plugin-migration

Co-authored-by: Renovate Bot <[email protected]>
Co-authored-by: jonnybel <[email protected]>

codemods/custom-property-replacer/custom-property-replacer.js

@@ -1,8 +1,7 @@
 const fs = require('fs');
-const postcss = require('postcss');
 const parser = require('postcss-value-parser');
 
-module.exports = postcss.plugin('postcss-var-replacer', (opts) => {
+module.exports = (opts = {}) => {
   let variables;
 
   if (opts && opts.file) {
@@ -15,21 +14,25 @@ module.exports = postcss.plugin('postcss-var-replacer', (opts) => {
     );
   }
 
-  return (css) => {
-    css.walkDecls((decl) => {
-      let variableFound = false;
+  return {
+    postcssPlugin: 'postcss-var-replacer',
+    Root(css) {
+      css.walkDecls((decl) => {
+        let variableFound = false;
 
-      const parsedValue = parser(decl.value);
-      parsedValue.walk((node) => {
-        if (node.type === 'word' && variables[node.value]) {
-          variableFound = true;
-          // eslint-disable-next-line no-param-reassign
-          node.value = variables[node.value];
+        const parsedValue = parser(decl.value);
+        parsedValue.walk((node) => {
+          if (node.type === 'word' && variables[node.value]) {
+            variableFound = true;
+            // eslint-disable-next-line no-param-reassign
+            node.value = variables[node.value];
+          }
+        });
+        if (variableFound) {
+          decl.replaceWith(decl.clone({ value: parsedValue.toString() }));
         }
       });
-      if (variableFound) {
-        decl.replaceWith(decl.clone({ value: parsedValue.toString() }));
-      }
-    });
+    },
   };
-});
+};
+module.exports.postcss = true;

package.json

@@ -151,7 +151,7 @@
     "moment-timezone": "0.5.31",
     "mri": "1.1.6",
     "omit-empty": "1.0.0",
-    "postcss": "7.0.34",
+    "postcss": "8.0.6",
     "postcss-value-parser": "4.1.0",
     "pptr-testing-library": "0.6.4",
     "prettier": "2.1.2",

yarn.lock

@@ -11785,6 +11785,14 @@ levn@~0.3.0:
     prelude-ls "~1.1.2"
     type-check "~0.3.2"
 
+line-column@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/line-column/-/line-column-1.0.2.tgz#d25af2936b6f4849172b312e4792d1d987bc34a2"
+  integrity sha1-0lryk2tvSEkXKzEuR5LR2Ye8NKI=
+  dependencies:
+    isarray "^1.0.0"
+    isobject "^2.0.0"
+
 lines-and-columns@^1.1.6:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00"
@@ -12792,6 +12800,11 @@ nan@^2.12.1, nan@^2.14.0:
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.1.tgz#d7be34dfa3105b91494c3147089315eff8874b01"
   integrity sha512-isWHgVjnFjh2x2yuJ/tj3JbwoHu3UC2dX5G/88Cm24yB6YopVgxvBObDY7n5xW6ExmFhJpSEQqFPvq9zaXc8Jw==
 
+nanoid@^3.1.12:
+  version "3.1.12"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.12.tgz#6f7736c62e8d39421601e4a0c77623a97ea69654"
+  integrity sha512-1qstj9z5+x491jfiC4Nelk+f8XBad7LN20PmyWINJEMRSf3wcAjAWysw1qaA8z6NSKe2sjq1hRSDpBH5paCb6A==
+
 nanomatch@^1.2.9:
   version "1.2.13"
   resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"
@@ -14027,14 +14040,15 @@ [email protected], postcss-value-parser@^4.1.0:
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz#443f6a20ced6481a2bda4fa8532a6e55d789a2cb"
   integrity sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==
 
-postcss@7.0.34:
-  version "7.0.34"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.34.tgz#f2baf57c36010df7de4009940f21532c16d65c20"
-  integrity sha512-H/7V2VeNScX9KE83GDrDZNiGT1m2H+UTnlinIzhjlLX9hfMUn1mHNnGeX81a1c8JSBdBvqk7c2ZOG6ZPn5itGw==
+postcss@8.0.6:
+  version "8.0.6"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.0.6.tgz#1507160d7df320c77f8f4819cf52491f4748b672"
+  integrity sha512-P4lvqkhoiba/w0JE1t432xlQyeJnnf1elrviZOX0GybserV79IN4skB2nQg+NoOmkq30MNqVv9ggdqVmYjaolA==
   dependencies:
-    chalk "^2.4.2"
+    colorette "^1.2.1"
+    line-column "^1.0.2"
+    nanoid "^3.1.12"
     source-map "^0.6.1"
-    supports-color "^6.1.0"
 
 postcss@^7.0.0, postcss@^7.0.14, postcss@^7.0.17, postcss@^7.0.2, postcss@^7.0.21, postcss@^7.0.26, postcss@^7.0.31, postcss@^7.0.32, postcss@^7.0.5, postcss@^7.0.6:
   version "7.0.32"