build: update to stylelint 14

Updates the repo to Stylelint version 14 and resolves the breaking changes. Also cleans up some of the custom rule typings now that Stylelint provides its own types.

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;