From f45236ce8488b9710678e941b3740c049cdaa3d8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Wojciech=20Oko=C5=84ski?= Date: Wed, 26 Feb 2020 20:46:50 +0100 Subject: [PATCH] fix(@angular-devkit/build-angular): add missing styles extensions in anyComponentStyle budget Make anyComponentStyle budged work with all style extensions. Previously it was working only with css styles. Files with other extensions were ignored. --- .../any-component-style-budget-checker.ts | 11 +- .../test/browser/bundle-budgets_spec_large.ts | 127 ++++++++++-------- 2 files changed, 83 insertions(+), 55 deletions(-) diff --git a/packages/angular_devkit/build_angular/src/angular-cli-files/plugins/any-component-style-budget-checker.ts b/packages/angular_devkit/build_angular/src/angular-cli-files/plugins/any-component-style-budget-checker.ts index 7ee1a5cc1e81..fb311e45d49a 100644 --- a/packages/angular_devkit/build_angular/src/angular-cli-files/plugins/any-component-style-budget-checker.ts +++ b/packages/angular_devkit/build_angular/src/angular-cli-files/plugins/any-component-style-budget-checker.ts @@ -6,6 +6,7 @@ * found in the LICENSE file at https://angular.io/license */ +import * as path from 'path'; import { Compiler, Plugin } from 'webpack'; import { Budget, Type } from '../../../src/browser/schema'; import { ThresholdSeverity, calculateThresholds, checkThresholds } from '../utilities/bundle-calculator'; @@ -32,8 +33,16 @@ export class AnyComponentStyleBudgetChecker implements Plugin { return; } + const cssExtensions = [ + '.css', + '.scss', + '.less', + '.styl', + '.sass', + ]; + const componentStyles = Object.keys(compilation.assets) - .filter((name) => name.endsWith('.css')) + .filter((name) => cssExtensions.includes(path.extname(name))) .map((name) => ({ size: compilation.assets[name].size(), label: name, diff --git a/packages/angular_devkit/build_angular/test/browser/bundle-budgets_spec_large.ts b/packages/angular_devkit/build_angular/test/browser/bundle-budgets_spec_large.ts index 61a723c93ba7..eab3b2ebfb27 100644 --- a/packages/angular_devkit/build_angular/test/browser/bundle-budgets_spec_large.ts +++ b/packages/angular_devkit/build_angular/test/browser/bundle-budgets_spec_large.ts @@ -11,6 +11,7 @@ import { createArchitect, host } from '../utils'; describe('Browser Builder bundle budgets', () => { + const cssExtensions = ['css', 'scss', 'less', 'styl']; const targetSpec = { project: 'app', target: 'build' }; let architect: Architect; @@ -64,66 +65,84 @@ 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; } - `; + cssExtensions.forEach(ext => { + it(`shows warnings for large component ${ext} when using 'anyComponentStyle' when AOT`, async () => { + const overrides = { + aot: true, + optimization: true, + budgets: [{ type: 'anyComponentStyle', maximumWarning: '1b' }], + styles: [`src/styles.${ext}`], + }; - host.writeMultipleFiles({ - 'src/app/app.component.css': cssContent, - 'src/assets/foo.css': cssContent, - 'src/styles.css': cssContent, + const cssContent = ` + .foo { color: white; padding: 1px; } + .buz { color: white; padding: 2px; } + .bar { color: white; padding: 3px; } + `; + + host.writeMultipleFiles({ + [`src/app/app.component.${ext}`]: cssContent, + [`src/assets/foo.${ext}`]: cssContent, + [`src/styles.${ext}`]: cssContent, + }); + + host.replaceInFile( + 'src/app/app.component.ts', + './app.component.css', + `./app.component.${ext}`, + ); + + 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\.${ext}`); + await run.stop(); }); - - 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; } - `; + cssExtensions.forEach(ext => { + it(`shows error for large component ${ext} when using 'anyComponentStyle' when AOT`, async () => { + const overrides = { + aot: true, + optimization: true, + budgets: [{ type: 'anyComponentStyle', maximumError: '1b' }], + styles: [`src/styles.${ext}`], + }; - host.writeMultipleFiles({ - 'src/app/app.component.css': cssContent, - 'src/assets/foo.css': cssContent, - 'src/styles.css': cssContent, + const cssContent = ` + .foo { color: white; padding: 1px; } + .buz { color: white; padding: 2px; } + .bar { color: white; padding: 3px; } + `; + + host.writeMultipleFiles({ + [`src/app/app.component.${ext}`]: cssContent, + [`src/assets/foo.${ext}`]: cssContent, + [`src/styles.${ext}`]: cssContent, + }); + + host.replaceInFile( + 'src/app/app.component.ts', + './app.component.css', + `./app.component.${ext}`, + ); + + 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\.${ext}`); + await run.stop(); }); - - 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`, () => {