build: update to latest postcss and resolve issues (#21437)

Updates us to the latest versions of PostCSS and Stylelint. The bot tried to do it in #21279,
but it caused some compilation errors.

These changes resolve the errors which are due to the fact that the Stylelint typing are
stuck on an older version of the PostCSS types.

Author: crisbeto

package.json

@@ -149,7 +149,7 @@
     "moment": "^2.18.1",
     "node-fetch": "^2.6.0",
     "parse5": "^6.0.1",
-    "postcss": "^7.0.27",
+    "postcss": "^8.2.1",
     "protractor": "^7.0.0",
     "requirejs": "^2.3.6",
     "rollup": "~1.25.0",
@@ -164,7 +164,7 @@
     "semver": "^6.3.0",
     "send": "^0.17.1",
     "shelljs": "^0.8.3",
-    "stylelint": "^13.7.2",
+    "stylelint": "^13.8.0",
     "terser": "^4.8.0",
     "ts-api-guardian": "^0.5.0",
     "ts-node": "^9.0.0",

tools/postcss/compare-nodes.ts

@@ -6,28 +6,28 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import * as postcss from 'postcss';
+import {Node, Declaration, Rule} from 'postcss';
 
 /**
  * Compares two Postcss AST nodes and returns whether a boolean indicating
  * whether they represent the same styles or not. The function does not handle
  * `AtRule` nodes or nested rules as it is only concerned with CSS stylesheets
  * and the comparison of declarations and rule selectors.
  */
-export function compareNodes(a: postcss.Node, b: postcss.Node): boolean {
+export function compareNodes(a: Node, b: Node): boolean {
   if (a.type !== b.type) {
     return false;
   }
 
   // Types of A and B are always equal, but for type inferring we
   // check both nodes again.
-  if (a.type === 'decl' && b.type === 'decl') {
+  if (isDeclaration(a) && isDeclaration(b)) {
     return a.prop === b.prop && a.value === b.value;
   }
 
   // We only check either rules or declarations. Since we check CSS,
   // there cannot be any nested `atrule` or `rule` nodes.
-  if (a.type !== 'rule' || b.type !== 'rule') {
+  if (!isRule(a) || !isRule(b)) {
     return false;
   }
 
@@ -44,3 +44,13 @@ export function compareNodes(a: postcss.Node, b: postcss.Node): boolean {
   }
   return equal;
 }
+
+/** Asserts that a node is a `Declaration`. */
+function isDeclaration(node: Node): node is Declaration {
+  return node.type === 'decl';
+}
+
+/** Asserts that a node is a `Rule`. */
+function isRule(node: Node): node is Rule {
+  return node.type === 'rule';
+}

tools/stylelint/no-ampersand-beyond-selector-start.ts

@@ -1,6 +1,6 @@
 import {createPlugin, utils} from 'stylelint';
 import {basename} from 'path';
-import {Node} from 'postcss';
+import {Node} from './stylelint-postcss-types';
 
 const isStandardSyntaxRule = require('stylelint/lib/utils/isStandardSyntaxRule');
 const isStandardSyntaxSelector = require('stylelint/lib/utils/isStandardSyntaxSelector');

tools/stylelint/stylelint-postcss-types.ts

@@ -0,0 +1,14 @@
+// `@types/postcss` is locked into an older version of `postcss` whose types no longer align with
+// the latest ones on npm. This file re-exports the versions that are compatible with Stylelint so
+// that we can use them in our custom rules.
+// This file can be removed when `@types/postcss` has been updated or when `stylelint` starts to
+// publish their type declarations. See https://github.com/stylelint/stylelint/issues/4399.
+export {
+  AtRule,
+  atRule,
+  decl,
+  Declaration,
+  Node,
+  Result,
+  Root
+} from 'stylelint/node_modules/postcss';

tools/stylelint/theme-mixin-api.ts

@@ -1,5 +1,13 @@
-import {AtRule, atRule, decl, Declaration, Node, Result, Root} from 'postcss';
 import {createPlugin, Plugin, utils} from 'stylelint';
+import {
+  AtRule,
+  atRule,
+  decl,
+  Declaration,
+  Node,
+  Result,
+  Root
+} from './stylelint-postcss-types';
 
 /** Name of this stylelint rule. */
 const ruleName = 'material/theme-mixin-api';

yarn.lock

@@ -7714,16 +7714,11 @@ join-path@^1.1.1:
     url-join "0.0.1"
     valid-url "^1"
 
-js-base64@^2.1.8:
+js-base64@^2.1.8, js-base64@^2.1.9:
   version "2.6.4"
   resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.6.4.tgz#f4e686c5de1ea1f867dbcad3d46d969428df98c4"
   integrity sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ==
 
-js-base64@^2.1.9:
-  version "2.4.9"
-  resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.4.9.tgz#748911fb04f48a60c4771b375cac45a80df11c03"
-  integrity sha512-xcinL3AuDJk7VSzsHgb9DvvIXayBbadtMZ4HFPx8rUszbW1MuNMlwYVC4zzCZ6e1sqZpnNS5ZFYOhXqA39T7LQ==
-
 js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
@@ -9309,6 +9304,11 @@ nan@^2.14.2:
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.2.tgz#f5376400695168f4cc694ac9393d0c9585eeea19"
   integrity sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ==
 
+nanoid@^3.1.20:
+  version "3.1.20"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.20.tgz#badc263c6b1dcf14b71efaa85f6ab4c1d6cfc788"
+  integrity sha512-a1cQNyczgKbLX9jwbS/+d7W8fX/RfgYR7lVWwWOGIPNgK2m0MWvrGF6/m4kk6U3QcFMnZf3RIhL0v2Jgh/0Uxw==
+
 nanomatch@^1.2.9:
   version "1.2.13"
   resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"
@@ -10387,7 +10387,7 @@ postcss-values-parser@^1.5.0:
     indexes-of "^1.0.1"
     uniq "^1.0.1"
 
-[email protected], postcss@^7.0.14, postcss@^7.0.2, postcss@^7.0.21, postcss@^7.0.26, postcss@^7.0.27, postcss@^7.0.32, postcss@^7.0.35, postcss@^7.0.6:
+[email protected], postcss@^7.0.14, postcss@^7.0.2, postcss@^7.0.21, postcss@^7.0.26, postcss@^7.0.32, postcss@^7.0.35, postcss@^7.0.6:
   version "7.0.35"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.35.tgz#d2be00b998f7f211d8a276974079f2e92b970e24"
   integrity sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==
@@ -10406,6 +10406,15 @@ postcss@^5.2.16:
     source-map "^0.5.6"
     supports-color "^3.2.3"
 
+postcss@^8.2.1:
+  version "8.2.1"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.2.1.tgz#eabc5557c4558059b9d9e5b15bce7ffa9089c2a8"
+  integrity sha512-RhsqOOAQzTgh1UB/IZdca7F9WDb7SUCR2Vnv1x7DbvuuggQIpoDwjK+q0rzoPffhYvWNKX5JSwS4so4K3UC6vA==
+  dependencies:
+    colorette "^1.2.1"
+    nanoid "^3.1.20"
+    source-map "^0.6.1"
+
 postinstall-build@^5.0.1:
   version "5.0.3"
   resolved "https://registry.yarnpkg.com/postinstall-build/-/postinstall-build-5.0.3.tgz#238692f712a481d8f5bc8960e94786036241efc7"
@@ -12314,7 +12323,7 @@ style-search@^0.1.0:
   resolved "https://registry.yarnpkg.com/style-search/-/style-search-0.1.0.tgz#7958c793e47e32e07d2b5cafe5c0bf8e12e77902"
   integrity sha1-eVjHk+R+MuB9K1yv5cC/jhLneQI=
 
-stylelint@^13.7.2:
+stylelint@^13.8.0:
   version "13.8.0"
   resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-13.8.0.tgz#446765dbe25e3617f819a0165956faf2563ddc23"
   integrity sha512-iHH3dv3UI23SLDrH4zMQDjLT9/dDIz/IpoFeuNxZmEx86KtfpjDOscxLTFioQyv+2vQjPlRZnK0UoJtfxLICXQ==