feat(@schematics/angular): change browserslist file name to .browserslistrc

Closes: #15961

Author: alan-agius4

packages/angular_devkit/build_angular/test/browser/scripts-array_spec_large.ts

@@ -95,7 +95,7 @@ describe('Browser Builder scripts array', () => {
     host.appendToFile('src/main.ts', '\nimport \'./input-script.js\';');
 
     // Enable differential loading
-    host.appendToFile('browserslist', '\nIE 10');
+    host.appendToFile('.browserslistrc', '\nIE 10');
 
     // Remove styles so we don't have to account for them in the index.html order check.
     const { files } = await browserBuild(architect, host, target, {

packages/schematics/angular/application/files/browserslist.template

@@ -59,6 +59,11 @@
       "version": "10.0.0-beta.0",
       "factory": "./update-10/update-tslint",
       "description": "Update tslint to version 6."
+    },
+    "rename-browserslist-config": {
+      "version": "10.0.0-beta.0",
+      "factory": "./update-10/rename-browserslist-config",
+      "description": "Renaming Browserslist configurations to '.browserslistrc'."
     }
   }
 }

packages/schematics/angular/migrations/migration-collection.json

@@ -0,0 +1,39 @@
+/**
+ * @license
+ * Copyright Google Inc. 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 { Path, join } from '@angular-devkit/core';
+import { DirEntry, Rule } from '@angular-devkit/schematics';
+
+function visit(directory: DirEntry): Path[] {
+  const files: Path[] = [];
+
+  for (const path of directory.subfiles) {
+    if (path !== 'browserslist') {
+      continue;
+    }
+
+    files.push(join(directory.path, path));
+  }
+
+  for (const path of directory.subdirs) {
+    if (path === 'node_modules') {
+      continue;
+    }
+
+    files.push(...visit(directory.dir(path)));
+  }
+
+  return files;
+}
+
+export default function (): Rule {
+  return tree => {
+    for (const path of visit(tree.root)) {
+      tree.rename(path, path.replace(/browserslist$/, '.browserslistrc'));
+    }
+  };
+}

packages/schematics/angular/migrations/update-10/rename-browserslist-config.ts

@@ -0,0 +1,50 @@
+/**
+ * @license
+ * Copyright Google Inc. 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 { EmptyTree } from '@angular-devkit/schematics';
+import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing';
+
+describe('Migration to rename Browserslist configurations', () => {
+  const schematicName = 'rename-browserslist-config';
+
+  const schematicRunner = new SchematicTestRunner(
+    'migrations',
+    require.resolve('../migration-collection.json'),
+  );
+
+  let tree: UnitTestTree;
+  beforeEach(() => {
+    tree = new UnitTestTree(new EmptyTree());
+  });
+
+  it(`should rename file 'browserslist' to 'browserslistrc'`, async () => {
+    tree.create('/browserslist', 'IE9');
+    tree.create('/src/app/home/browserslist', 'IE9');
+
+    const newTree = await schematicRunner.runSchematicAsync(schematicName, {}, tree).toPromise();
+    expect(newTree.exists('/.browserslistrc')).toBeTruthy();
+    expect(newTree.exists('/browserslist')).toBeFalsy();
+
+    expect(newTree.exists('/src/app/home/.browserslistrc')).toBeTruthy();
+    expect(newTree.exists('/src/app/home/browserslist')).toBeFalsy();
+  });
+
+  it(`should not rename "browserslist" file in 'node_modules'`, async () => {
+    tree.create('/node_modules/browserslist', 'IE9');
+
+    const newTree = await schematicRunner.runSchematicAsync(schematicName, {}, tree).toPromise();
+    expect(newTree.exists('/node_modules/browserslist')).toBeTruthy();
+    expect(newTree.exists('/node_modules/.browserslistrc')).toBeFalsy();
+  });
+
+  it(`should not rename a folder which is named 'browserslist'`, async () => {
+    tree.create('/app/browserslist/file.txt', 'content');
+
+    const newTree = await schematicRunner.runSchematicAsync(schematicName, {}, tree).toPromise();
+    expect(newTree.exists('/app/browserslist/file.txt')).toBeTruthy();
+  });
+});

packages/schematics/angular/migrations/update-10/rename-browserslist-config_spec.ts

@@ -105,14 +105,12 @@ describe('Migration to version 8', () => {
     });
 
     it(`should create browserslist file if it doesn't exist`, async () => {
-      tree.delete('/browserslist');
       const tree2 = await schematicRunner.runSchematicAsync('migration-07', {}, tree.branch()).toPromise();
       expect(tree2.exists('/browserslist')).toBe(true);
     });
 
     it('should move browserslist file if it exists in the sourceRoot', async () => {
       tree.create('/src/browserslist', 'last 2 Chrome versions');
-      tree.delete('/browserslist');
       const tree2 = await schematicRunner.runSchematicAsync('migration-07', {}, tree.branch()).toPromise();
       expect(tree2.exists('/browserslist')).toBe(true);
     });
@@ -191,7 +189,6 @@ describe('Migration to version 8', () => {
     });
 
     it(`should not update projects which browser builder is not 'build-angular:browser'`, async () => {
-      tree.delete('/browserslist');
       const config = JSON.parse(tree.readContent('angular.json'));
       config.projects['migration-test'].architect.build.builder = '@dummy/builders:browser';
 
@@ -201,8 +198,7 @@ describe('Migration to version 8', () => {
     });
 
     it(`should move 'browserslist' to root when 'sourceRoot' is not defined`, async () => {
-      tree.rename('/browserslist', '/src/browserslist');
-      expect(tree.exists('/src/browserslist')).toBe(true);
+      tree.create('/src/browserslist', 'content');
 
       const config = JSON.parse(tree.readContent('angular.json'));
       config.projects['migration-test'].sourceRoot = undefined;