refactor(schematics): css name rules interfere with element selectors (#12805)

* Currently the `cssName` rules interfere with the element selector rules. This is not desired because it causes unexpected behavior because both rules try to update specific code parts.
* Renames the `cssNames` data to `cssSelectors` because technically this rule should **only** update CSS selectors inside of string literals, stylesheets and also partly templates (inline styles).
* Fixes that TypeScript sometimes doesn't report syntax failures (credits to @jelbourn)

Author: devversion

src/lib/schematics/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "lib": ["es2017", "dom"],
+    "lib": ["es2017"],
     "module": "commonjs",
     "moduleResolution": "node",
     "outDir": "../../../dist/schematics",

src/lib/schematics/update/material/data/css-names.ts

@@ -0,0 +1,107 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {transformChanges} from '../transform-change-data';
+
+export interface MaterialCssSelectorData {
+  /** The CSS selector to replace. */
+  replace: string;
+  /** The new CSS selector. */
+  replaceWith: string;
+  /** Whitelist where this replacement is made. If omitted it is made in all files. */
+  whitelist?: {
+    /** Replace this name in stylesheet files. */
+    stylesheet?: boolean,
+    /** Replace this name in HTML files. */
+    html?: boolean,
+    /** Replace this name in TypeScript strings. */
+    strings?: boolean
+  };
+}
+
+export const cssSelectors = transformChanges<MaterialCssSelectorData>([
+  {
+    pr: 'https://github.com/angular/material2/pull/10296',
+    changes: [
+      {
+        replace: '.mat-form-field-placeholder',
+        replaceWith: '.mat-form-field-label'
+      },
+      {
+        replace: '.mat-input-container',
+        replaceWith: '.mat-form-field'
+      },
+      {
+        replace: '.mat-input-flex',
+        replaceWith: '.mat-form-field-flex'
+      },
+      {
+        replace: '.mat-input-hint-spacer',
+        replaceWith: '.mat-form-field-hint-spacer'
+      },
+      {
+        replace: '.mat-input-hint-wrapper',
+        replaceWith: '.mat-form-field-hint-wrapper'
+      },
+      {
+        replace: '.mat-input-infix',
+        replaceWith: '.mat-form-field-infix'
+      },
+      {
+        replace: '.mat-input-invalid',
+        replaceWith: '.mat-form-field-invalid'
+      },
+      {
+        replace: '.mat-input-placeholder',
+        replaceWith: '.mat-form-field-label'
+      },
+      {
+        replace: '.mat-input-placeholder-wrapper',
+        replaceWith: '.mat-form-field-label-wrapper'
+      },
+      {
+        replace: '.mat-input-prefix',
+        replaceWith: '.mat-form-field-prefix'
+      },
+      {
+        replace: '.mat-input-ripple',
+        replaceWith: '.mat-form-field-ripple'
+      },
+      {
+        replace: '.mat-input-subscript-wrapper',
+        replaceWith: '.mat-form-field-subscript-wrapper'
+      },
+      {
+        replace: '.mat-input-suffix',
+        replaceWith: '.mat-form-field-suffix'
+      },
+      {
+        replace: '.mat-input-underline',
+        replaceWith: '.mat-form-field-underline'
+      },
+      {
+        replace: '.mat-input-wrapper',
+        replaceWith: '.mat-form-field-wrapper'
+      }
+    ]
+  },
+
+  // TODO(devversion): this shouldn't be here because it's not a CSS selector. Move into misc rule.
+  {
+    pr: 'https://github.com/angular/material2/pull/10430',
+    changes: [
+      {
+        replace: '$mat-font-family',
+        replaceWith: "Roboto, 'Helvetica Neue', sans-serif",
+        whitelist: {
+          stylesheet: true
+        }
+      }
+    ]
+  }
+]);

src/lib/schematics/update/material/data/css-selectors.ts

@@ -9,12 +9,12 @@
 import {green, red} from 'chalk';
 import {Replacement, RuleFailure, Rules, RuleWalker} from 'tslint';
 import * as ts from 'typescript';
-import {cssNames, MaterialCssNameData} from '../../material/data/css-names';
+import {cssSelectors, MaterialCssSelectorData} from '../../material/data/css-selectors';
 import {findAllSubstringIndices} from '../../typescript/literal';
 
 /**
  * Rule that walks through every string literal that is wrapped inside of a call expression.
- * All string literals which include an outdated CSS class name will be migrated.
+ * All string literals which include an outdated CSS selector will be migrated.
  */
 export class Rule extends Rules.AbstractRule {
   apply(sourceFile: ts.SourceFile): RuleFailure[] {
@@ -31,22 +31,22 @@ export class Walker extends RuleWalker {
 
     const textContent = node.getFullText();
 
-    cssNames.forEach(name => {
-      if (name.whitelist && !name.whitelist.strings) {
+    cssSelectors.forEach(data => {
+      if (data.whitelist && !data.whitelist.strings) {
         return;
       }
 
-      findAllSubstringIndices(textContent, name.replace)
+      findAllSubstringIndices(textContent, data.replace)
         .map(offset => node.getStart() + offset)
-        .map(start => new Replacement(start, name.replace.length, name.replaceWith))
-        .forEach(replacement => this._addFailureWithReplacement(node, replacement, name));
+        .map(start => new Replacement(start, data.replace.length, data.replaceWith))
+        .forEach(replacement => this._addFailureWithReplacement(node, replacement, data));
     });
   }
 
-  /** Adds a css name failure with the given replacement at the specified node. */
+  /** Adds a css selector failure with the given replacement at the specified node. */
   private _addFailureWithReplacement(node: ts.Node, replacement: Replacement,
-                                     name: MaterialCssNameData) {
-    this.addFailureAtNode(node, `Found deprecated CSS class "${red(name.replace)}" which has ` +
-      `been renamed to "${green(name.replaceWith)}"`, replacement);
+                                     data: MaterialCssSelectorData) {
+    this.addFailureAtNode(node, `Found deprecated CSS selector "${red(data.replace)}" which has ` +
+      `been renamed to "${green(data.replaceWith)}"`, replacement);
   }
 }

src/lib/schematics/update/rules/css-names/cssNamesStringLiteralRule.ts renamed to src/lib/schematics/update/rules/css-selectors/cssSelectorsStringLiteralRule.ts

@@ -10,7 +10,7 @@ import {green, red} from 'chalk';
 import {sync as globSync} from 'glob';
 import {IOptions, Replacement, RuleFailure, Rules} from 'tslint';
 import * as ts from 'typescript';
-import {cssNames} from '../../material/data/css-names';
+import {cssSelectors} from '../../material/data/css-selectors';
 import {ExternalResource} from '../../tslint/component-file';
 import {ComponentWalker} from '../../tslint/component-walker';
 import {
@@ -21,7 +21,7 @@ import {findAllSubstringIndices} from '../../typescript/literal';
 
 /**
  * Rule that walks through every inline or external CSs stylesheet and updates outdated
- * CSS classes.
+ * CSS selectors.
  */
 export class Rule extends Rules.AbstractRule {
   apply(sourceFile: ts.SourceFile): RuleFailure[] {
@@ -54,23 +54,23 @@ export class Walker extends ComponentWalker {
   }
 
   /**
-   * Searches for outdated CSs classes in the specified content and creates replacements
+   * Searches for outdated CSS selectors in the specified content and creates replacements
    * with the according messages that can be added to a rule failure.
    */
   private _createReplacementsForContent(node: ts.Node, stylesheetContent: string) {
     const replacements: {failureMessage: string, replacement: Replacement}[] = [];
 
-    cssNames.forEach(name => {
-      if (name.whitelist && !name.whitelist.stylesheet) {
+    cssSelectors.forEach(data => {
+      if (data.whitelist && !data.whitelist.stylesheet) {
         return;
       }
 
-      const failureMessage = `Found deprecated CSS class "${red(name.replace)}" ` +
-          `which has been renamed to "${green(name.replaceWith)}"`;
+      const failureMessage = `Found deprecated CSS selector "${red(data.replace)}" ` +
+          `which has been renamed to "${green(data.replaceWith)}"`;
 
-      findAllSubstringIndices(stylesheetContent, name.replace)
+      findAllSubstringIndices(stylesheetContent, data.replace)
         .map(offset => node.getStart() + offset)
-        .map(start => new Replacement(start, name.replace.length, name.replaceWith))
+        .map(start => new Replacement(start, data.replace.length, data.replaceWith))
         .forEach(replacement => replacements.push({replacement, failureMessage}));
     });
 

src/lib/schematics/update/rules/css-names/cssNamesStylesheetRule.ts renamed to src/lib/schematics/update/rules/css-selectors/cssSelectorsStylesheetRule.ts

@@ -9,7 +9,7 @@
 import {green, red} from 'chalk';
 import {Replacement, RuleFailure, Rules} from 'tslint';
 import * as ts from 'typescript';
-import {cssNames} from '../../material/data/css-names';
+import {cssSelectors} from '../../material/data/css-selectors';
 import {ExternalResource} from '../../tslint/component-file';
 import {ComponentWalker} from '../../tslint/component-walker';
 import {
@@ -20,7 +20,7 @@ import {findAllSubstringIndices} from '../../typescript/literal';
 
 /**
  * Rule that walks through every inline or external HTML template and updates outdated
- * CSS classes.
+ * CSS selectors.
  */
 export class Rule extends Rules.AbstractRule {
   apply(sourceFile: ts.SourceFile): RuleFailure[] {
@@ -43,23 +43,23 @@ export class Walker extends ComponentWalker {
   }
 
   /**
-   * Searches for outdated css names in the specified content and creates replacements
+   * Searches for outdated css selectors in the specified content and creates replacements
    * with the according messages that can be added to a rule failure.
    */
   private _createReplacementsForContent(node: ts.Node, templateContent: string) {
     const replacements: {failureMessage: string, replacement: Replacement}[] = [];
 
-    cssNames.forEach(name => {
-      if (name.whitelist && !name.whitelist.html) {
+    cssSelectors.forEach(data => {
+      if (data.whitelist && !data.whitelist.html) {
         return;
       }
 
-      const failureMessage = `Found deprecated CSS class "${red(name.replace)}"` +
-        ` which has been renamed to "${green(name.replaceWith)}"`;
+      const failureMessage = `Found deprecated CSS selector "${red(data.replace)}"` +
+        ` which has been renamed to "${green(data.replaceWith)}"`;
 
-      findAllSubstringIndices(templateContent, name.replace)
+      findAllSubstringIndices(templateContent, data.replace)
         .map(offset => node.getStart() + offset)
-        .map(start => new Replacement(start, name.replace.length, name.replaceWith))
+        .map(start => new Replacement(start, data.replace.length, data.replaceWith))
         .forEach(replacement => replacements.push({replacement, failureMessage}));
     });
 

src/lib/schematics/update/rules/css-names/cssNamesTemplateRule.ts renamed to src/lib/schematics/update/rules/css-selectors/cssSelectorsTemplateRule.ts

@@ -35,7 +35,7 @@ export class Walker extends RuleWalker {
       findAllSubstringIndices(textContent, selector.replace)
         .map(offset => node.getStart() + offset)
         .map(start => new Replacement(start, selector.replace.length, selector.replaceWith))
-        .forEach(replacement => this._addFailureWithReplacement(node, replacement, name));
+        .forEach(replacement => this._addFailureWithReplacement(node, replacement, selector));
     });
   }
 

src/lib/schematics/update/rules/element-selectors/elementSelectorsStringLiteralRule.ts

@@ -10,7 +10,6 @@ const e = By.css('.mat-form-field-hint-spacer');
 @Component({
   template: `
     <ng-content select=".mat-form-field-suffix"></ng-content>
-    <div [panelClass]="mat-form-field-underline">Content</div>
 
     <style>
       .mat-form-field-suffix {

src/lib/schematics/update/test-cases/v5/css-names_expected_output.ts

@@ -10,7 +10,6 @@ const e = By.css('.mat-input-hint-spacer');
 @Component({
   template: `
     <ng-content select=".mat-input-suffix"></ng-content>
-    <div [panelClass]="mat-input-underline">Content</div>
 
     <style>
       .mat-input-suffix {