build: update Stylelint and fix rule errors (#25820)

Updates to the latest version of Stylelint and fixes a bunch of errors that were the result of us not having set up the rules as it is recommended in https://stylelint.io/developer-guide/plugins/.

Author: crisbeto

package.json

@@ -197,7 +197,7 @@
     "moment": "^2.29.1",
     "node-fetch": "^2.6.0",
     "parse5": "^6.0.1",
-    "postcss": "^8.4.14",
+    "postcss": "^8.4.17",
     "postcss-scss": "^4.0.4",
     "protractor": "^7.0.0",
     "reflect-metadata": "^0.1.13",
@@ -209,7 +209,7 @@
     "semver": "^7.3.5",
     "send": "^0.17.2",
     "shelljs": "^0.8.5",
-    "stylelint": "^14.9.1",
+    "stylelint": "^14.14.0",
     "terser": "^5.10.0",
     "ts-node": "^10.8.1",
     "tsec": "0.2.2",

tools/stylelint/cross-package-import-validation.ts

@@ -1,4 +1,4 @@
-import {createPlugin, utils} from 'stylelint';
+import {createPlugin, Rule, utils} from 'stylelint';
 import {dirname, relative, join} from 'path';
 
 const ruleName = 'material/cross-package-import-validation';
@@ -15,7 +15,7 @@ const packageNameRegex = /^src\/([^/]+)/;
 const projectDir = join(__dirname, '../../');
 
 /** Stylelint plugin that flags forbidden cross-package relative imports. */
-const plugin = createPlugin(ruleName, (isEnabled: boolean) => {
+const ruleFn: Rule<boolean, unknown> = isEnabled => {
   return (root, result) => {
     if (!isEnabled) {
       return;
@@ -71,11 +71,14 @@ const plugin = createPlugin(ruleName, (isEnabled: boolean) => {
       }
     });
   };
-});
+};
+
+ruleFn.ruleName = ruleName;
+ruleFn.messages = messages;
 
 /** Converts the specified absolute path to a project relative POSIX path. */
 function convertToProjectRelativePosixPath(fileName: string): string {
   return relative(projectDir, fileName).replace(/[/\\]/g, '/');
 }
 
-export default plugin;
+export default createPlugin(ruleName, ruleFn);

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

@@ -1,4 +1,4 @@
-import {createPlugin, utils} from 'stylelint';
+import {createPlugin, Rule, utils} from 'stylelint';
 import {basename} from 'path';
 
 const isStandardSyntaxRule = require('stylelint/lib/utils/isStandardSyntaxRule');
@@ -9,19 +9,14 @@ const messages = utils.ruleMessages(ruleName, {
   expected: () => 'Ampersand is only allowed at the beginning of a selector',
 });
 
-/** Config options for the rule. */
-interface RuleOptions {
-  filePattern?: string;
-}
-
 /**
  * Stylelint rule that doesn't allow for an ampersand to be used anywhere
  * except at the start of a selector. Skips private mixins.
  *
  * Based off the `selector-nested-pattern` Stylelint rule.
  * Source: https://github.com/stylelint/stylelint/blob/master/lib/rules/selector-nested-pattern/
  */
-const plugin = createPlugin(ruleName, (isEnabled: boolean, options: RuleOptions) => {
+const ruleFn: Rule<boolean, string> = (isEnabled, options) => {
   return (root, result) => {
     if (!isEnabled) {
       return;
@@ -50,10 +45,13 @@ const plugin = createPlugin(ruleName, (isEnabled: boolean, options: RuleOptions)
       }
     });
   };
-});
+};
+
+ruleFn.ruleName = ruleName;
+ruleFn.messages = messages;
 
 function hasInvalidAmpersandUsage(selector: string): boolean {
   return selector.split(',').some(part => part.trim().indexOf('&', 1) > -1);
 }
 
-export default plugin;
+export default createPlugin(ruleName, ruleFn);

tools/stylelint/no-concrete-rules.ts

@@ -1,4 +1,4 @@
-import {createPlugin, utils} from 'stylelint';
+import {createPlugin, utils, Rule} from 'stylelint';
 import {basename} from 'path';
 
 const ruleName = 'material/no-concrete-rules';
@@ -8,16 +8,11 @@ const messages = utils.ruleMessages(ruleName, {
   expectedAllFiles: () => `CSS rules must be placed inside a mixin for all files.`,
 });
 
-/** Config options for the rule. */
-interface RuleOptions {
-  filePattern?: string;
-}
-
 /**
  * Stylelint plugin that will log a warning for all top-level CSS rules.
  * Can be used in theme files to ensure that everything is inside a mixin.
  */
-const plugin = createPlugin(ruleName, (isEnabled: boolean, options: RuleOptions) => {
+const ruleFn: Rule<boolean, string> = (isEnabled, options) => {
   return (root, result) => {
     if (!isEnabled) {
       return;
@@ -47,6 +42,9 @@ const plugin = createPlugin(ruleName, (isEnabled: boolean, options: RuleOptions)
       }
     });
   };
-});
+};
+
+ruleFn.ruleName = ruleName;
+ruleFn.messages = messages;
 
-export default plugin;
+export default createPlugin(ruleName, ruleFn);

tools/stylelint/no-import.ts

@@ -1,4 +1,4 @@
-import {createPlugin, utils} from 'stylelint';
+import {createPlugin, Rule, utils} from 'stylelint';
 import {basename} from 'path';
 
 const ruleName = 'material/no-import';
@@ -7,7 +7,7 @@ const messages = utils.ruleMessages(ruleName, {
 });
 
 /** Stylelint plugin that doesn't allow `@import` to be used. */
-const plugin = createPlugin(ruleName, (isEnabled: boolean, options?: {exclude?: string}) => {
+const ruleFn: Rule<boolean, string> = (isEnabled, options) => {
   return (root, result) => {
     if (!isEnabled) {
       return;
@@ -30,6 +30,9 @@ const plugin = createPlugin(ruleName, (isEnabled: boolean, options?: {exclude?:
       }
     });
   };
-});
+};
+
+ruleFn.ruleName = ruleName;
+ruleFn.messages = messages;
 
-export default plugin;
+export default createPlugin(ruleName, ruleFn);

tools/stylelint/no-nested-mixin.ts

@@ -1,4 +1,4 @@
-import {createPlugin, utils} from 'stylelint';
+import {createPlugin, Rule, utils} from 'stylelint';
 
 const ruleName = 'material/no-nested-mixin';
 const messages = utils.ruleMessages(ruleName, {
@@ -8,7 +8,7 @@ const messages = utils.ruleMessages(ruleName, {
 /**
  * Stylelint plugin that prevents nesting Sass mixins.
  */
-const plugin = createPlugin(ruleName, (isEnabled: boolean) => {
+const ruleFn: Rule<boolean, unknown> = isEnabled => {
   return (root, result) => {
     if (!isEnabled) {
       return;
@@ -33,6 +33,9 @@ const plugin = createPlugin(ruleName, (isEnabled: boolean) => {
       });
     });
   };
-});
+};
+
+ruleFn.ruleName = ruleName;
+ruleFn.messages = messages;
 
-export default plugin;
+export default createPlugin(ruleName, ruleFn);

tools/stylelint/no-prefixes/index.ts

@@ -1,4 +1,4 @@
-import {createPlugin, utils} from 'stylelint';
+import {createPlugin, Rule, utils} from 'stylelint';
 import minimatch from 'minimatch';
 import {NeedsPrefix} from './needs-prefix';
 
@@ -14,17 +14,14 @@ const messages = utils.ruleMessages(ruleName, {
   selector: selector => `Unprefixed selector "${selector}".`,
 });
 
-/** Config options for the rule. */
-interface Options {
-  browsers?: string[];
-  filePattern?: string;
-}
-
 /**
  * Stylelint plugin that warns for unprefixed CSS.
  */
-const plugin = createPlugin(ruleName, (isEnabled: boolean, {filePattern, browsers}: Options) => {
+const ruleFn: Rule<boolean, string[] | string> = (isEnabled, options) => {
   return (root, result) => {
+    const browsers = options.browsers as string[] | undefined;
+    const filePattern = options.filePattern as string | undefined;
+
     if (
       !isEnabled ||
       !browsers ||
@@ -96,6 +93,9 @@ const plugin = createPlugin(ruleName, (isEnabled: boolean, {filePattern, browser
       });
     });
   };
-});
+};
+
+ruleFn.ruleName = ruleName;
+ruleFn.messages = messages;
 
-export default plugin;
+export default createPlugin(ruleName, ruleFn);

tools/stylelint/no-top-level-ampersand-in-mixin.ts

@@ -1,4 +1,4 @@
-import {createPlugin, utils} from 'stylelint';
+import {createPlugin, Rule, utils} from 'stylelint';
 import {basename} from 'path';
 
 const ruleName = 'material/no-top-level-ampersand-in-mixin';
@@ -7,22 +7,16 @@ const messages = utils.ruleMessages(ruleName, {
     `Selectors starting with an ampersand ` + `are not allowed inside top-level mixin rules`,
 });
 
-/** Config options for the rule. */
-interface RuleOptions {
-  filePattern: string;
-}
-
 /**
  * Stylelint rule that doesn't allow for the top-level rules inside a
  * mixin to start with an ampersand. Does not apply to internal mixins.
  */
-const plugin = createPlugin(ruleName, (isEnabled: boolean, _options?) => {
+const ruleFn: Rule<boolean, string> = (isEnabled, options) => {
   return (root, result) => {
     if (!isEnabled) {
       return;
     }
 
-    const options = _options as RuleOptions;
     const filePattern = new RegExp(options.filePattern);
     const fileName = basename(root.source!.input.file!);
 
@@ -53,6 +47,9 @@ const plugin = createPlugin(ruleName, (isEnabled: boolean, _options?) => {
       });
     });
   };
-});
+};
+
+ruleFn.ruleName = ruleName;
+ruleFn.messages = messages;
 
-export default plugin;
+export default createPlugin(ruleName, ruleFn);

tools/stylelint/no-unused-import.ts

@@ -1,4 +1,4 @@
-import {createPlugin, utils} from 'stylelint';
+import {createPlugin, Rule, utils} from 'stylelint';
 import {basename, join} from 'path';
 
 const ruleName = 'material/no-unused-import';
@@ -10,7 +10,7 @@ const messages = utils.ruleMessages(ruleName, {
 });
 
 /** Stylelint plugin that flags unused `@use` statements. */
-const plugin = createPlugin(ruleName, (isEnabled: boolean, _options, context) => {
+const ruleFn: Rule<boolean, string> = (isEnabled, _options, context) => {
   return (root, result) => {
     if (!isEnabled) {
       return;
@@ -45,7 +45,10 @@ const plugin = createPlugin(ruleName, (isEnabled: boolean, _options, context) =>
       }
     });
   };
-});
+};
+
+ruleFn.ruleName = ruleName;
+ruleFn.messages = messages;
 
 /** Extracts the namespace of an `@use` rule from its parameters.  */
 function extractNamespaceFromUseStatement(params: string): string | null {
@@ -85,4 +88,4 @@ function extractNamespaceFromUseStatement(params: string): string | null {
   return null;
 }
 
-export default plugin;
+export default createPlugin(ruleName, ruleFn);

tools/stylelint/selector-no-deep.ts

@@ -1,4 +1,4 @@
-import {createPlugin, utils} from 'stylelint';
+import {createPlugin, Rule, utils} from 'stylelint';
 
 const isStandardSyntaxRule = require('stylelint/lib/utils/isStandardSyntaxRule');
 const isStandardSyntaxSelector = require('stylelint/lib/utils/isStandardSyntaxSelector');
@@ -11,7 +11,7 @@ const messages = utils.ruleMessages(ruleName, {
 /**
  * Stylelint plugin that prevents uses of /deep/ in selectors.
  */
-const plugin = createPlugin(ruleName, (isEnabled: boolean) => {
+const ruleFn: Rule<boolean, unknown> = isEnabled => {
   return (root, result) => {
     if (!isEnabled) {
       return;
@@ -33,6 +33,9 @@ const plugin = createPlugin(ruleName, (isEnabled: boolean) => {
       }
     });
   };
-});
+};
+
+ruleFn.ruleName = ruleName;
+ruleFn.messages = messages;
 
-export default plugin;
+export default createPlugin(ruleName, ruleFn);

tools/stylelint/single-line-comment-only.ts

@@ -1,4 +1,4 @@
-import {createPlugin, utils} from 'stylelint';
+import {createPlugin, Rule, utils} from 'stylelint';
 import {basename} from 'path';
 
 const ruleName = 'material/single-line-comment-only';
@@ -11,7 +11,7 @@ const messages = utils.ruleMessages(ruleName, {
  * Stylelint plugin that doesn't allow multi-line comments to
  * be used, because they'll show up in the user's output.
  */
-const plugin = createPlugin(ruleName, (isEnabled: boolean, options?: {filePattern?: string}) => {
+const ruleFn: Rule<boolean, string> = (isEnabled, options) => {
   return (root, result) => {
     if (!isEnabled) {
       return;
@@ -35,6 +35,9 @@ const plugin = createPlugin(ruleName, (isEnabled: boolean, options?: {filePatter
       }
     });
   };
-});
+};
+
+ruleFn.ruleName = ruleName;
+ruleFn.messages = messages;
 
-export default plugin;
+export default createPlugin(ruleName, ruleFn);

tools/stylelint/theme-mixin-api.ts

@@ -1,4 +1,4 @@
-import {createPlugin, utils, PostcssResult} from 'stylelint';
+import {createPlugin, utils, PostcssResult, Rule} from 'stylelint';
 import {basename} from 'path';
 import {AtRule, Declaration, Node} from 'postcss';
 
@@ -21,7 +21,7 @@ const themeMixinRegex = /^(density|color|typography|theme)\((.*)\)$/;
  *      consistently check for duplicative theme styles so that we can warn consumers. The
  *      plugin ensures that style-generating statements are nested inside the duplication check.
  */
-const plugin = createPlugin(ruleName, (isEnabled: boolean, _options, context) => {
+const ruleFn: Rule<boolean, unknown> = (isEnabled, _options, context) => {
   return (root, result) => {
     const componentName = getComponentNameFromPath(root.source!.input.file!);
 
@@ -55,7 +55,10 @@ const plugin = createPlugin(ruleName, (isEnabled: boolean, _options, context) =>
       }
     });
   };
-});
+};
+
+ruleFn.ruleName = ruleName;
+ruleFn.messages = utils.ruleMessages(ruleName, {});
 
 /** Validates a `theme` mixin. */
 function validateThemeMixin(
@@ -274,4 +277,4 @@ function sanitizeForRegularExpression(value: string): string {
   return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
 }
 
-export default plugin;
+export default createPlugin(ruleName, ruleFn);