feat(@angular-devkit/build-angular): add bundle budget for component styles

packages/angular/cli/lib/config/schema.json

@@ -1024,6 +1024,7 @@
                     "allScript",
                     "any",
                     "anyScript",
+                    "anyComponentStyle",
                     "bundle",
                     "initial"
                   ]

packages/angular_devkit/build_angular/src/angular-cli-files/plugins/bundle-budget.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import { Compiler, compilation } from 'webpack';
-import { Budget } from '../../browser/schema';
+import { Budget, Type } from '../../browser/schema';
 import { Size, calculateBytes, calculateSizes } from '../utilities/bundle-calculator';
 import { formatSize } from '../utilities/stats';
 
@@ -30,33 +30,28 @@ export class BundleBudgetPlugin {
 
   apply(compiler: Compiler): void {
     const { budgets } = this.options;
-    compiler.hooks.afterEmit.tap('BundleBudgetPlugin', (compilation: compilation.Compilation) => {
-      if (!budgets || budgets.length === 0) {
-        return;
-      }
 
-      budgets.map(budget => {
-        const thresholds = this.calculate(budget);
-
-        return {
-          budget,
-          thresholds,
-          sizes: calculateSizes(budget, compilation),
-        };
-      })
-        .forEach(budgetCheck => {
-          budgetCheck.sizes.forEach(size => {
-            this.checkMaximum(budgetCheck.thresholds.maximumWarning, size, compilation.warnings);
-            this.checkMaximum(budgetCheck.thresholds.maximumError, size, compilation.errors);
-            this.checkMinimum(budgetCheck.thresholds.minimumWarning, size, compilation.warnings);
-            this.checkMinimum(budgetCheck.thresholds.minimumError, size, compilation.errors);
-            this.checkMinimum(budgetCheck.thresholds.warningLow, size, compilation.warnings);
-            this.checkMaximum(budgetCheck.thresholds.warningHigh, size, compilation.warnings);
-            this.checkMinimum(budgetCheck.thresholds.errorLow, size, compilation.errors);
-            this.checkMaximum(budgetCheck.thresholds.errorHigh, size, compilation.errors);
-          });
+    if (!budgets || budgets.length === 0) {
+      return;
+    }
 
-        });
+    compiler.hooks.compilation.tap('BundleBudgetPlugin', (compilation: compilation.Compilation) => {
+      compilation.hooks.afterOptimizeChunkAssets.tap('BundleBudgetPlugin', () => {
+        // In AOT compilations component styles get processed in child compilations.
+        // tslint:disable-next-line: no-any
+        const parentCompilation = (compilation.compiler as any).parentCompilation;
+        if (!parentCompilation) {
+          return;
+        }
+
+        const filteredBudgets = budgets.filter(budget => budget.type === Type.AnyComponentStyle);
+        this.runChecks(filteredBudgets, compilation);
+      });
+    });
+
+    compiler.hooks.afterEmit.tap('BundleBudgetPlugin', (compilation: compilation.Compilation) => {
+      const filteredBudgets = budgets.filter(budget => budget.type !== Type.AnyComponentStyle);
+      this.runChecks(filteredBudgets, compilation);
     });
   }
 
@@ -116,4 +111,25 @@ export class BundleBudgetPlugin {
 
     return thresholds;
   }
+
+  private runChecks(budgets: Budget[], compilation: compilation.Compilation) {
+    budgets
+      .map(budget => ({
+        budget,
+        thresholds: this.calculate(budget),
+        sizes: calculateSizes(budget, compilation),
+      }))
+      .forEach(budgetCheck => {
+        budgetCheck.sizes.forEach(size => {
+          this.checkMaximum(budgetCheck.thresholds.maximumWarning, size, compilation.warnings);
+          this.checkMaximum(budgetCheck.thresholds.maximumError, size, compilation.errors);
+          this.checkMinimum(budgetCheck.thresholds.minimumWarning, size, compilation.warnings);
+          this.checkMinimum(budgetCheck.thresholds.minimumError, size, compilation.errors);
+          this.checkMinimum(budgetCheck.thresholds.warningLow, size, compilation.warnings);
+          this.checkMaximum(budgetCheck.thresholds.warningHigh, size, compilation.warnings);
+          this.checkMinimum(budgetCheck.thresholds.errorLow, size, compilation.errors);
+          this.checkMaximum(budgetCheck.thresholds.errorHigh, size, compilation.errors);
+        });
+      });
+  }
 }

packages/angular_devkit/build_angular/src/angular-cli-files/utilities/bundle-calculator.ts

@@ -25,9 +25,11 @@ export function calculateSizes(budget: Budget, compilation: Compilation): Size[]
     allScript: AllScriptCalculator,
     any: AnyCalculator,
     anyScript: AnyScriptCalculator,
+    anyComponentStyle: AnyComponentStyleCalculator,
     bundle: BundleCalculator,
     initial: InitialCalculator,
   };
+
   const ctor = calculatorMap[budget.type];
   const calculator = new ctor(budget, compilation);
 
@@ -101,6 +103,20 @@ class AllCalculator extends Calculator {
   }
 }
 
+/**
+ * Any components styles
+ */
+class AnyComponentStyleCalculator extends Calculator {
+  calculate() {
+    return Object.keys(this.compilation.assets)
+      .filter(key => key.endsWith('.css'))
+      .map(key => ({
+        size: this.compilation.assets[key].size(),
+        label: key,
+      }));
+  }
+}
+
 /**
  * Any script, individually.
  */

packages/angular_devkit/build_angular/src/browser/schema.json

@@ -482,6 +482,7 @@
             "allScript",
             "any",
             "anyScript",
+            "anyComponentStyle",
             "bundle",
             "initial"
           ]

packages/angular_devkit/build_angular/test/browser/aot_spec_large.ts

@@ -7,7 +7,7 @@
  */
 
 import { Architect } from '@angular-devkit/architect';
-import { join, normalize, virtualFs } from '@angular-devkit/core';
+import { join, logging, normalize, virtualFs } from '@angular-devkit/core';
 import { BrowserBuilderOutput } from '../../src/browser';
 import { createArchitect, host, ivyEnabled } from '../utils';
 
@@ -39,4 +39,28 @@ describe('Browser Builder AOT', () => {
 
     await run.stop();
   });
+
+  it('shows warnings for component styles', async () => {
+    const overrides = {
+      aot: true,
+      optimization: true,
+    };
+
+    host.writeMultipleFiles({
+      'src/app/app.component.css': `
+        .foo { color: white; padding: 1px; };
+        .buz { color: white; padding: 2px; };
+      `,
+    });
+
+    const logger = new logging.Logger('');
+    const logs: string[] = [];
+    logger.subscribe(e => logs.push(e.message));
+
+    const run = await architect.scheduleTarget(targetSpec, overrides, { logger });
+    const output = await run.result;
+    expect(output.success).toBe(true);
+    expect(logs.join()).toContain('WARNING in Invalid selector');
+    await run.stop();
+  });
 });

packages/angular_devkit/build_angular/test/browser/bundle-budgets_spec_large.ts

@@ -64,6 +64,68 @@ describe('Browser Builder bundle budgets', () => {
     await run.stop();
   });
 
+  it(`shows warnings for large component css when using 'anyComponentStyle' when AOT`, async () => {
+    const overrides = {
+      aot: true,
+      optimization: true,
+      budgets: [{ type: 'anyComponentStyle', maximumWarning: '1b' }],
+    };
+
+    const cssContent = `
+      .foo { color: white; padding: 1px; }
+      .buz { color: white; padding: 2px; }
+      .bar { color: white; padding: 3px; }
+    `;
+
+    host.writeMultipleFiles({
+      'src/app/app.component.css': cssContent,
+      'src/assets/foo.css': cssContent,
+      'src/styles.css': cssContent,
+    });
+
+    const logger = new logging.Logger('');
+    const logs: string[] = [];
+    logger.subscribe(e => logs.push(e.message));
+
+    const run = await architect.scheduleTarget(targetSpec, overrides, { logger });
+    const output = await run.result;
+    expect(output.success).toBe(true);
+    expect(logs.length).toBe(2);
+    expect(logs.join()).toMatch(/WARNING.+app\.component\.css/);
+    await run.stop();
+  });
+
+  it(`shows error for large component css when using 'anyComponentStyle' when AOT`, async () => {
+    const overrides = {
+      aot: true,
+      optimization: true,
+      budgets: [{ type: 'anyComponentStyle', maximumError: '1b' }],
+    };
+
+    const cssContent = `
+      .foo { color: white; padding: 1px; }
+      .buz { color: white; padding: 2px; }
+      .bar { color: white; padding: 3px; }
+    `;
+
+    host.writeMultipleFiles({
+      'src/app/app.component.css': cssContent,
+      'src/assets/foo.css': cssContent,
+      'src/styles.css': cssContent,
+    });
+
+    const logger = new logging.Logger('');
+    const logs: string[] = [];
+    logger.subscribe(e => logs.push(e.message));
+
+    const run = await architect.scheduleTarget(targetSpec, overrides, { logger });
+    const output = await run.result;
+    expect(output.success).toBe(false);
+    expect(logs.length).toBe(2);
+    expect(logs.join()).toMatch(/ERROR.+app\.component\.css/);
+    await run.stop();
+  });
+
   describe(`should ignore '.map' files`, () => {
     it(`when 'bundle' budget`, async () => {
       const overrides = {

packages/ngtools/webpack/src/resource_loader.ts

@@ -100,10 +100,19 @@ export class WebpackResourceLoader {
     return new Promise((resolve, reject) => {
       childCompiler.compile((err: Error, childCompilation: any) => {
         // Resolve / reject the promise
-        if (childCompilation && childCompilation.errors && childCompilation.errors.length) {
-          const errorDetails = childCompilation.errors.map(function (error: any) {
-            return error.message + (error.error ? ':\n' + error.error : '');
-          }).join('\n');
+        const { warnings, errors } = childCompilation;
+
+        if (warnings && warnings.length) {
+          this._parentCompilation.warnings.push(...warnings);
+        }
+
+        if (errors && errors.length) {
+          this._parentCompilation.errors.push(...errors);
+
+          const errorDetails = errors
+            .map((error: any) => error.message + (error.error ? ':\n' + error.error : ''))
+            .join('\n');
+
           reject(new Error('Child compilation failed:\n' + errorDetails));
         } else if (err) {
           reject(err);

packages/schematics/angular/application/index.ts

@@ -223,6 +223,11 @@ function addAppToWorkspaceFile(options: ApplicationOptions, appDir: string): Rul
               type: 'initial',
               maximumWarning: '2mb',
               maximumError: '5mb',
+            },
+            {
+              type: 'anyComponentStyle',
+              maximumWarning: '6kb',
+              maximumError: '10kb',
             }],
           },
         },

packages/schematics/angular/migrations/update-9/update-workspace-config.ts

@@ -12,11 +12,17 @@ import {
 } from '@angular-devkit/core';
 import { Rule, Tree, UpdateRecorder } from '@angular-devkit/schematics';
 import {
+  appendValueInAstArray,
   findPropertyInAstObject,
   insertPropertyInAstObjectInOrder,
   removePropertyInAstObject,
 } from '../../utility/json-utils';
 
+export const ANY_COMPONENT_STYLE_BUDGET = {
+  type: 'anyComponentStyle',
+  maximumWarning: '6kb',
+};
+
 export function UpdateWorkspaceConfig(): Rule {
   return (tree: Tree) => {
     let workspaceConfigPath = 'angular.json';
@@ -59,8 +65,9 @@ export function UpdateWorkspaceConfig(): Rule {
         const builder = findPropertyInAstObject(buildTarget, 'builder');
         // Projects who's build builder is not build-angular:browser
         if (builder && builder.kind === 'string' && builder.value === '@angular-devkit/build-angular:browser') {
-          updateOption('styles', recorder, buildTarget);
-          updateOption('scripts', recorder, buildTarget);
+          updateStyleOrScriptOption('styles', recorder, buildTarget);
+          updateStyleOrScriptOption('scripts', recorder, buildTarget);
+          addAnyComponentStyleBudget(recorder, buildTarget);
         }
       }
 
@@ -69,8 +76,8 @@ export function UpdateWorkspaceConfig(): Rule {
         const builder = findPropertyInAstObject(testTarget, 'builder');
         // Projects who's build builder is not build-angular:browser
         if (builder && builder.kind === 'string' && builder.value === '@angular-devkit/build-angular:karma') {
-          updateOption('styles', recorder, testTarget);
-          updateOption('scripts', recorder, testTarget);
+          updateStyleOrScriptOption('styles', recorder, testTarget);
+          updateStyleOrScriptOption('scripts', recorder, testTarget);
         }
       }
     }
@@ -84,19 +91,21 @@ export function UpdateWorkspaceConfig(): Rule {
 /**
  * Helper to retreive all the options in various configurations
  */
-function getAllOptions(builderConfig: JsonAstObject): JsonAstObject[] {
+function getAllOptions(builderConfig: JsonAstObject, configurationsOnly = false): JsonAstObject[] {
   const options = [];
   const configurations = findPropertyInAstObject(builderConfig, 'configurations');
   if (configurations && configurations.kind === 'object') {
     options.push(...configurations.properties.map(x => x.value));
   }
 
-  options.push(findPropertyInAstObject(builderConfig, 'options'));
+  if (!configurationsOnly) {
+    options.push(findPropertyInAstObject(builderConfig, 'options'));
+  }
 
   return options.filter(o => o && o.kind === 'object') as JsonAstObject[];
 }
 
-function updateOption(property: 'scripts' | 'styles', recorder: UpdateRecorder, builderConfig: JsonAstObject) {
+function updateStyleOrScriptOption(property: 'scripts' | 'styles', recorder: UpdateRecorder, builderConfig: JsonAstObject) {
   const options = getAllOptions(builderConfig);
 
   for (const option of options) {
@@ -121,3 +130,42 @@ function updateOption(property: 'scripts' | 'styles', recorder: UpdateRecorder,
     }
   }
 }
+
+function addAnyComponentStyleBudget(recorder: UpdateRecorder, builderConfig: JsonAstObject) {
+  const options = getAllOptions(builderConfig, true);
+
+  for (const option of options) {
+    const aotOption = findPropertyInAstObject(option, 'aot');
+    if (!aotOption || aotOption.kind !== 'true') {
+      // AnyComponentStyle only works for AOT
+      continue;
+    }
+
+    const budgetOption = findPropertyInAstObject(option, 'budgets');
+    if (!budgetOption) {
+      // add
+      insertPropertyInAstObjectInOrder(recorder, option, 'budgets', [ANY_COMPONENT_STYLE_BUDGET], 14);
+      continue;
+    }
+
+    if (budgetOption.kind !== 'array') {
+      continue;
+    }
+
+    // if 'anyComponentStyle' budget already exists don't add.
+    const hasAnyComponentStyle = budgetOption.elements.some(node => {
+      if (!node || node.kind !== 'object') {
+        // skip non complex objects
+        return false;
+      }
+
+      const budget = findPropertyInAstObject(node, 'type');
+
+      return !!budget && budget.kind === 'string' && budget.value === 'anyComponentStyle';
+    });
+
+    if (!hasAnyComponentStyle) {
+      appendValueInAstArray(recorder, budgetOption, ANY_COMPONENT_STYLE_BUDGET, 16);
+    }
+  }
+}