fix(migrations): add migration to replace /deep/ with ::ng-deep

packages/core/schematics/BUILD.bazel

@@ -13,6 +13,7 @@ pkg_npm(
         "//packages/core/schematics/migrations/abstract-control-parent",
         "//packages/core/schematics/migrations/activated-route-snapshot-fragment",
         "//packages/core/schematics/migrations/can-activate-with-redirect-to",
+        "//packages/core/schematics/migrations/deep-shadow-piercing-selector",
         "//packages/core/schematics/migrations/dynamic-queries",
         "//packages/core/schematics/migrations/initial-navigation",
         "//packages/core/schematics/migrations/missing-injectable",

packages/core/schematics/migrations.json

@@ -94,6 +94,11 @@
       "version": "12.0.0-next.6",
       "description": "`XhrFactory` has been moved from `@angular/common/http` to `@angular/common`.",
       "factory": "./migrations/xhr-factory/index"
+    },
+    "migration-v12-deep-shadow-piercing-selector": {
+      "version": "12.0.2",
+      "description": "Automatically migrates shadow-piercing selector from `/deep/` to the recommanded alternative `::ng-deep`.",
+      "factory": "./migrations/deep-shadow-piercing-selector/index"
     }
   }
 }

packages/core/schematics/migrations/deep-shadow-piercing-selector/BUILD.bazel

@@ -0,0 +1,16 @@
+load("//tools:defaults.bzl", "ts_library")
+
+ts_library(
+    name = "deep-shadow-piercing-selector",
+    srcs = glob(["**/*.ts"]),
+    tsconfig = "//packages/core/schematics:tsconfig.json",
+    visibility = [
+        "//packages/core/schematics:__pkg__",
+        "//packages/core/schematics/migrations/google3:__pkg__",
+        "//packages/core/schematics/test:__pkg__",
+    ],
+    deps = [
+        "@npm//@angular-devkit/core",
+        "@npm//@angular-devkit/schematics",
+    ],
+)

packages/core/schematics/migrations/deep-shadow-piercing-selector/README.md

@@ -0,0 +1,17 @@
+## shadow-piercing selector `/deep/` to `::ng-deep`
+
+Automatically migrates shadow-piercing selector from `/deep/` to `::ng-deep`.
+
+#### Before
+```css
+:host /deep/ * {
+  cursor: pointer;
+}
+```
+
+#### After
+```css
+:host ::ng-deep * {
+  cursor: pointer;
+}
+```

packages/core/schematics/migrations/deep-shadow-piercing-selector/index.ts

@@ -0,0 +1,41 @@
+/**
+ * @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 {extname, join} from '@angular-devkit/core';
+import {DirEntry, Rule} from '@angular-devkit/schematics';
+
+const VALID_EXTENSIONS = ['.scss', '.sass', '.css', '.styl', '.less', '.ts'];
+
+function* visitFiles(directory: DirEntry): IterableIterator<string> {
+  for (const path of directory.subfiles) {
+    const extension = extname(path);
+    if (VALID_EXTENSIONS.includes(extension)) {
+      yield join(directory.path, path);
+    }
+  }
+
+  for (const path of directory.subdirs) {
+    if (path === 'node_modules' || path.startsWith('.') || path === 'dist') {
+      continue;
+    }
+
+    yield* visitFiles(directory.dir(path));
+  }
+}
+
+export default function(): Rule {
+  return (tree) => {
+    // Visit all files in an Angular workspace monorepo.
+    for (const file of visitFiles(tree.root)) {
+      const content = tree.read(file)?.toString();
+      if (content?.includes('/deep/ ')) {
+        tree.overwrite(file, content.replace(/\/deep\/ /g, '::ng-deep '));
+      }
+    }
+  };
+}

packages/core/schematics/test/BUILD.bazel

@@ -11,6 +11,7 @@ ts_library(
         "//packages/core/schematics/migrations/abstract-control-parent",
         "//packages/core/schematics/migrations/activated-route-snapshot-fragment",
         "//packages/core/schematics/migrations/can-activate-with-redirect-to",
+        "//packages/core/schematics/migrations/deep-shadow-piercing-selector",
         "//packages/core/schematics/migrations/dynamic-queries",
         "//packages/core/schematics/migrations/initial-navigation",
         "//packages/core/schematics/migrations/missing-injectable",

packages/core/schematics/test/deep-shadow-piercing-selector_spec.ts

@@ -0,0 +1,69 @@
+/**
+ * @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 {tags} from '@angular-devkit/core';
+import {EmptyTree} from '@angular-devkit/schematics';
+import {SchematicTestRunner, UnitTestTree} from '@angular-devkit/schematics/testing';
+
+describe('`/deep/` to `::ng-deep` migration', () => {
+  let tree: UnitTestTree;
+  const runner = new SchematicTestRunner('test', require.resolve('../migrations.json'));
+
+  beforeEach(() => {
+    tree = new UnitTestTree(new EmptyTree());
+  });
+
+  it(`should replace '/deep/' with '::ng-deep' in inline component styles`, async () => {
+    const fileName = '/index.ts';
+    const getFileContent = (contentToReplace: string) => tags.stripIndents`
+      import { Component } from '@angular/core';
+
+      @Component({
+        selector: 'app-root',
+        template: '<router-outlet></router-outlet>',
+        styles: ['` +
+        contentToReplace + `'],
+      })
+      export class AppComponent { }
+   `;
+
+    tree.create(fileName, getFileContent(':host /deep/ * { cursor: pointer; }'));
+    await runMigration();
+    expect(tree.readContent(fileName))
+        .toBe(getFileContent(':host ::ng-deep * { cursor: pointer; }'));
+  });
+
+  for (const styleExtension of ['scss', 'sass', 'css', 'styl', 'less']) {
+    it(`should replace '/deep/' with '::ng-deep' in ${styleExtension} file`, async () => {
+      const fileName = `/index.${styleExtension}`;
+      tree.create(fileName, ':host /deep/ * { cursor: pointer; }');
+      await runMigration();
+      expect(tree.readContent(fileName)).toBe(':host ::ng-deep * { cursor: pointer; }');
+    });
+  }
+
+  it(`should replace '/deep/' with '::ng-deep' when used as root selector`, async () => {
+    const fileName = '/index.css';
+    tree.create(fileName, '/deep/ * { cursor: pointer; }');
+    await runMigration();
+    expect(tree.readContent(fileName)).toBe('::ng-deep * { cursor: pointer; }');
+  });
+
+  it(`should not replace '/deep/' with '::ng-deep' in unknown file extension`, async () => {
+    const fileName = '/index.foo';
+    const content = 'this is a not /deep/ selector';
+    tree.create(fileName, content);
+    await runMigration();
+    expect(tree.readContent(fileName)).toBe(content);
+  });
+
+  async function runMigration(): Promise<void> {
+    await runner.runSchematicAsync('migration-v12-deep-shadow-piercing-selector', {}, tree)
+        .toPromise();
+  }
+});