build: add linting for classList usage (#17388)

Once in a while we hit an issue because we use some of the `classList` methods in a way that isn't supported in all browsers (e.g. passing multiple parameters to `add` in #17378). These changes add a simple lint rule to catch these cases earlier.

Author: crisbeto

src/material-experimental/mdc-button/button-base.ts

@@ -103,11 +103,15 @@ export class MatButtonBase extends _MatButtonBaseMixin implements CanDisable, Ca
       @Optional() @Inject(ANIMATION_MODULE_TYPE) public _animationMode?: string) {
     super(elementRef);
 
+    const classList = (elementRef.nativeElement as HTMLElement).classList;
+
     // For each of the variant selectors that is present in the button's host
     // attributes, add the correct corresponding MDC classes.
     for (const pair of HOST_SELECTOR_MDC_CLASS_PAIR) {
       if (this._hasHostAttributes(pair.selector)) {
-        (elementRef.nativeElement as HTMLElement).classList.add(...pair.mdcClasses);
+        pair.mdcClasses.forEach(className => {
+          classList.add(className);
+        });
       }
     }
   }

tools/tslint-rules/classListSignaturesRule.ts

@@ -0,0 +1,46 @@
+import * as ts from 'typescript';
+import * as Lint from 'tslint';
+
+/**
+ * Rule that catches cases where `classList` is used in a way
+ * that won't work in all browsers that we support.
+ */
+export class Rule extends Lint.Rules.TypedRule {
+  applyWithProgram(sourceFile: ts.SourceFile, program: ts.Program): Lint.RuleFailure[] {
+    return this.applyWithWalker(new Walker(sourceFile, this.getOptions(), program));
+  }
+}
+
+class Walker extends Lint.ProgramAwareRuleWalker {
+  visitPropertyAccessExpression(propertyAccess: ts.PropertyAccessExpression) {
+    const parent = propertyAccess.parent;
+
+    // We only care about property accesses inside of calls.
+    if (!ts.isCallExpression(parent)) {
+      return;
+    }
+
+    // We only care about these method names.
+    const name = propertyAccess.name.text;
+    if (name !== 'add' && name !== 'remove' && name !== 'toggle' && name !== 'replace') {
+      return;
+    }
+
+    const symbol = this.getTypeChecker().getTypeAtLocation(propertyAccess.expression).symbol;
+
+    if (symbol && symbol.name === 'DOMTokenList') {
+      const args = parent.arguments;
+
+      if (name === 'replace') {
+        this.addFailureAtNode(propertyAccess,
+            'This method is not supported in iOS Safari. Use `add` and `remove` instead.');
+      } else if (args.length > 1 || (args.length === 1 && ts.isSpreadElement(args[0]))) {
+        this.addFailureAtNode(propertyAccess,
+            'Passing in multiple arguments into this method is not supported in some browsers. ' +
+            'Use the single argument signature instead.');
+      }
+    }
+
+    super.visitPropertyAccessExpression(propertyAccess);
+  }
+}

tslint.json

@@ -107,6 +107,7 @@
     "rxjs-imports": true,
     "require-breaking-change-version": true,
     "static-query": true,
+    "class-list-signatures": true,
     "no-host-decorator-in-concrete": [
       true,
       "HostBinding",