build: update to stylelint 14 (#23861)

Author: crisbeto

.stylelintrc.json

@@ -1,4 +1,5 @@
 {
+  "customSyntax": "postcss-scss",
   "defaultSeverity": "error",
   "reportNeedlessDisables": true,
   "reportInvalidScopeDisables": true,

package.json

@@ -32,7 +32,7 @@
     "cherry-pick-patch": "ts-node --project tools/cherry-pick-patch/tsconfig.json tools/cherry-pick-patch/cherry-pick-patch.ts",
     "ownerslint": "ts-node --project scripts/tsconfig.json scripts/ownerslint.ts",
     "tslint": "tslint -c tslint.json --project ./tsconfig.json",
-    "stylelint": "stylelint \"src/**/*.+(css|scss)\" --config .stylelintrc.json --syntax scss",
+    "stylelint": "stylelint \"src/**/*.+(css|scss)\" --config .stylelintrc.json",
     "resync-caretaker-app": "ts-node --project scripts/tsconfig.json scripts/caretaking/resync-caretaker-app-prs.ts",
     "ts-circular-deps:check": "yarn -s ng-dev ts-circular-deps check --config ./src/circular-deps-test.conf.js",
     "ts-circular-deps:approve": "yarn -s ng-dev ts-circular-deps approve --config ./src/circular-deps-test.conf.js",
@@ -159,7 +159,6 @@
     "@types/semver": "^7.3.4",
     "@types/send": "^0.14.5",
     "@types/shelljs": "^0.8.9",
-    "@types/stylelint": "^13.13.2",
     "@types/yaml": "^1.9.7",
     "autoprefixer": "^10.2.5",
     "browser-sync": "2.26.13",
@@ -197,6 +196,7 @@
     "node-fetch": "^2.6.0",
     "parse5": "^6.0.1",
     "postcss": "^8.2.1",
+    "postcss-scss": "^4.0.2",
     "protractor": "^7.0.0",
     "reflect-metadata": "^0.1.3",
     "requirejs": "^2.3.6",
@@ -207,7 +207,7 @@
     "semver": "^7.3.4",
     "send": "^0.17.1",
     "shelljs": "^0.8.3",
-    "stylelint": "^13.13.1",
+    "stylelint": "^14.0.1",
     "terser": "^5.9.0",
     "ts-node": "^10.2.1",
     "tsickle": "0.39.1",

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

@@ -21,15 +21,14 @@ interface RuleOptions {
  * 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?) => {
+const plugin = createPlugin(ruleName, (isEnabled: boolean, options: RuleOptions) => {
   return (root, result) => {
     if (!isEnabled) {
       return;
     }
 
-    const options = _options as RuleOptions;
     const filePattern = new RegExp(options.filePattern);
-    const fileName = basename(root.source!.input.file!);
+    const fileName = basename(root.source.input.file);
 
     if (!filePattern.test(fileName)) {
       return;
@@ -57,6 +56,4 @@ function hasInvalidAmpersandUsage(selector: string): boolean {
   return selector.split(',').some(part => part.trim().indexOf('&', 1) > -1);
 }
 
-plugin.ruleName = ruleName;
-plugin.messages = messages;
 export default plugin;

tools/stylelint/no-concrete-rules.ts

@@ -15,15 +15,14 @@ interface RuleOptions {
  * 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) => {
+const plugin = createPlugin(ruleName, (isEnabled: boolean, options: RuleOptions) => {
   return (root, result) => {
     if (!isEnabled) {
       return;
     }
 
-    const options = _options as RuleOptions;
     const filePattern = new RegExp(options.filePattern);
-    const fileName = basename(root.source!.input.file!);
+    const fileName = basename(root.source.input.file);
 
     if (!filePattern.test(fileName) || !root.nodes) {
       return;
@@ -45,6 +44,4 @@ const plugin = createPlugin(ruleName, (isEnabled: boolean, _options) => {
   };
 });
 
-plugin.ruleName = ruleName;
-plugin.messages = messages;
 export default plugin;

tools/stylelint/no-import.ts

@@ -15,7 +15,7 @@ const plugin = createPlugin(ruleName, (isEnabled: boolean, options?: {exclude?:
 
     const excludePattern = options?.exclude ? new RegExp(options.exclude) : null;
 
-    if (excludePattern?.test(basename(root.source!.input.file!))) {
+    if (excludePattern?.test(basename(root.source.input.file))) {
       return;
     }
 
@@ -32,6 +32,4 @@ const plugin = createPlugin(ruleName, (isEnabled: boolean, options?: {exclude?:
   };
 });
 
-plugin.ruleName = ruleName;
-plugin.messages = messages;
 export default plugin;

tools/stylelint/no-nested-mixin.ts

@@ -35,6 +35,4 @@ const plugin = createPlugin(ruleName, (isEnabled: boolean) => {
   };
 });
 
-plugin.ruleName = ruleName;
-plugin.messages = messages;
 export default plugin;

tools/stylelint/no-prefixes/index.ts

@@ -15,24 +15,17 @@ const messages = utils.ruleMessages(ruleName, {
 });
 
 /** Config options for the rule. */
-interface RuleOptions {
+interface Options {
   browsers: string[];
   filePattern: string;
 }
 
 /**
  * Stylelint plugin that warns for unprefixed CSS.
  */
-const plugin = createPlugin(ruleName, (isEnabled: boolean, _options?) => {
+const plugin = createPlugin(ruleName, (isEnabled: boolean, {filePattern, browsers}: Options) => {
   return (root, result) => {
-    if (!isEnabled) {
-      return;
-    }
-
-    const options = _options as RuleOptions;
-    const {browsers, filePattern} = options;
-
-    if (filePattern && !minimatch(root.source!.input.file!, filePattern)) {
+    if (!isEnabled || (filePattern && !minimatch(root.source.input.file, filePattern))) {
       return;
     }
 
@@ -101,6 +94,4 @@ const plugin = createPlugin(ruleName, (isEnabled: boolean, _options?) => {
   };
 });
 
-plugin.ruleName = ruleName;
-plugin.messages = messages;
 export default plugin;

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

@@ -24,7 +24,7 @@ const plugin = createPlugin(ruleName, (isEnabled: boolean, _options?) => {
 
     const options = _options as RuleOptions;
     const filePattern = new RegExp(options.filePattern);
-    const fileName = basename(root.source!.input.file!);
+    const fileName = basename(root.source.input.file);
 
     if (!filePattern.test(fileName)) {
       return;
@@ -55,6 +55,4 @@ const plugin = createPlugin(ruleName, (isEnabled: boolean, _options?) => {
   };
 });
 
-plugin.ruleName = ruleName;
-plugin.messages = messages;
 export default plugin;

tools/stylelint/no-unused-import.ts

@@ -1,6 +1,5 @@
-import {createPlugin, Plugin, utils} from 'stylelint';
+import {createPlugin, utils} from 'stylelint';
 import {basename, join} from 'path';
-import {Result, Root} from 'postcss';
 
 const ruleName = 'material/no-unused-import';
 const messages = utils.ruleMessages(ruleName, {
@@ -11,8 +10,8 @@ const messages = utils.ruleMessages(ruleName, {
 });
 
 /** Stylelint plugin that flags unused `@use` statements. */
-const factory = (isEnabled: boolean, _options: never, context: {fix: boolean}) => {
-  return (root: Root, result: Result) => {
+const plugin = createPlugin(ruleName, (isEnabled: boolean, _options, context) => {
+  return (root, result) => {
     if (!isEnabled) {
       return;
     }
@@ -26,29 +25,27 @@ const factory = (isEnabled: boolean, _options: never, context: {fix: boolean}) =
         // Flag namespaces we didn't manage to parse so that we can fix the parsing logic.
         if (!namespace) {
           utils.report({
-            // We need these `as any` casts, because Stylelint uses an older version
-            // of the postcss typings that don't match up with our anymore.
-            result: result as any,
+            result,
             ruleName,
             message: messages.invalid(rule.params),
-            node: rule as any,
+            node: rule,
           });
         } else if (!fileContent.includes(namespace + '.')) {
           if (context.fix) {
             rule.remove();
           } else {
             utils.report({
-              result: result as any,
+              result,
               ruleName,
               message: messages.expected(namespace),
-              node: rule as any,
+              node: rule,
             });
           }
         }
       }
     });
   };
-};
+});
 
 /** Extracts the namespace of an `@use` rule from its parameters.  */
 function extractNamespaceFromUseStatement(params: string): string | null {
@@ -88,9 +85,4 @@ function extractNamespaceFromUseStatement(params: string): string | null {
   return null;
 }
 
-// Note: We need to cast the value explicitly to `Plugin` because the stylelint types
-// do not type the context parameter. https://stylelint.io/developer-guide/rules#add-autofix
-const plugin = createPlugin(ruleName, factory as unknown as Plugin);
-plugin.ruleName = ruleName;
-plugin.messages = messages;
-module.exports = plugin;
+export default plugin;

tools/stylelint/selector-no-deep.ts

@@ -35,6 +35,4 @@ const plugin = createPlugin(ruleName, (isEnabled: boolean) => {
   };
 });
 
-plugin.ruleName = ruleName;
-plugin.messages = messages;
 export default plugin;

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

@@ -19,7 +19,7 @@ const plugin = createPlugin(ruleName, (isEnabled: boolean, options?: {filePatter
 
     const filePattern = options?.filePattern ? new RegExp(options.filePattern) : null;
 
-    if (filePattern && !filePattern?.test(basename(root.source!.input.file!))) {
+    if (filePattern && !filePattern?.test(basename(root.source.input.file))) {
       return;
     }
 
@@ -38,6 +38,4 @@ const plugin = createPlugin(ruleName, (isEnabled: boolean, options?: {filePatter
   };
 });
 
-plugin.ruleName = ruleName;
-plugin.messages = messages;
 export default plugin;

tools/stylelint/theme-mixin-api.ts

@@ -1,6 +1,6 @@
-import {createPlugin, Plugin, utils} from 'stylelint';
+import {createPlugin, utils} from 'stylelint';
 import {basename} from 'path';
-import {AtRule, atRule, decl, Declaration, Node, Result, Root} from 'postcss';
+import {AtRule, atRule, decl, Declaration, Node} from 'postcss';
 
 /** Name of this stylelint rule. */
 const ruleName = 'material/theme-mixin-api';
@@ -21,9 +21,9 @@ 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 = (isEnabled: boolean, _options: never, context: {fix: boolean}) => {
-  return (root: Root, result: Result) => {
-    const componentName = getComponentNameFromPath(root.source!.input.file!);
+const plugin = createPlugin(ruleName, (isEnabled: boolean, _options, context) => {
+  return (root, result) => {
+    const componentName = getComponentNameFromPath(root.source.input.file);
 
     if (!componentName || !isEnabled) {
       return;
@@ -209,7 +209,7 @@ const plugin = (isEnabled: boolean, _options: never, context: {fix: boolean}) =>
       utils.report({result: result as any, ruleName, node: node as any, message});
     }
   };
-};
+});
 
 /** Figures out the name of the component from a file path. */
 function getComponentNameFromPath(filePath: string): string | null {
@@ -235,6 +235,4 @@ function stripNewlinesAndIndentation(value: string): string {
   return value.replace(/(\r|\n)\s+/g, '');
 }
 
-// Note: We need to cast the value explicitly to `Plugin` because the stylelint types
-// do not type the context parameter. https://stylelint.io/developer-guide/rules#add-autofix
-module.exports = createPlugin(ruleName, plugin as unknown as Plugin);
+export default plugin;