Skip to content

Commit

Permalink
fix(@angular-devkit/build-angular): add missing styles extensions in …
Browse files Browse the repository at this point in the history
…anyComponentStyle budget

Make anyComponentStyle budged work with all style extensions. Previously it was working only with css styles. Files with other extensions were ignored.
  • Loading branch information
wojteko22 authored and mgechev committed Mar 17, 2020
1 parent 1a9cbd3 commit f45236c
Show file tree
Hide file tree
Showing 2 changed files with 83 additions and 55 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down Expand Up @@ -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`, () => {
Expand Down

0 comments on commit f45236c

Please sign in to comment.