Skip to content

Commit dd26018

Browse files
alan-agius4filipesilva
alan-agius4
authored and
filipesilva
committed
refactor(@angular-devkit/build-angular): deprecate extractCss browser builder option
BREAKING CHANGE: Browser builder `extractCss` option default value has been changed from `false` to `true`. This is to reflect the default behaviour when this deprecated option is removed.
1 parent dee4bfb commit dd26018

File tree

12 files changed

+45
-56
lines changed

12 files changed

+45
-56
lines changed

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -831,8 +831,8 @@
831831
},
832832
"extractCss": {
833833
"type": "boolean",
834-
"description": "Extract css from global styles onto css files instead of js ones.",
835-
"default": false
834+
"description": "Extract CSS from global styles into '.css' files instead of '.js'.",
835+
"default": true
836836
},
837837
"watch": {
838838
"type": "boolean",

‎packages/angular_devkit/build_angular/src/angular-cli-files/models/build-options.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ export interface BuildOptions {
4343
i18nLocale?: string;
4444
localize?: Localize;
4545
i18nMissingTranslation?: I18NMissingTranslation;
46+
/** @deprecated since version 11.0. No longer required to disable CSS extraction for HMR.*/
4647
extractCss?: boolean;
4748
bundleDependencies?: boolean;
4849
externalDependencies?: string[];

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -206,8 +206,9 @@
206206
},
207207
"extractCss": {
208208
"type": "boolean",
209-
"description": "Extract css from global styles into css files instead of js ones.",
210-
"default": false
209+
"description": "Extract CSS from global styles into '.css' files instead of '.js'.",
210+
"default": true,
211+
"x-deprecated": "Deprecated since version 11.0. No longer required to disable CSS extraction for HMR."
211212
},
212213
"watch": {
213214
"type": "boolean",

‎packages/angular_devkit/build_angular/src/browser/specs/base-href_spec.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ describe('Browser Builder base href', () => {
5454
expect(output.success).toBe(true);
5555
const fileName = join(normalize(output.outputPath), 'index.html');
5656
const content = virtualFs.fileBufferToString(await host.read(normalize(fileName)).toPromise());
57-
expect(content).toContain('<head><base href="/myUrl"><meta charset="UTF-8"></head>');
57+
expect(content).toContain('<head><base href="/myUrl"><meta charset="UTF-8">');
5858
await run.stop();
5959
});
6060
});

‎packages/angular_devkit/build_angular/src/browser/specs/cross-origin_spec.ts

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -37,11 +37,10 @@ describe('Browser Builder crossOrigin', () => {
3737
const fileName = join(normalize(output.outputPath), 'index.html');
3838
const content = virtualFs.fileBufferToString(await host.read(normalize(fileName)).toPromise());
3939
expect(content).toBe(
40-
`<html><head><base href="/"></head>` +
40+
`<html><head><base href="/"><link rel="stylesheet" href="styles.css" crossorigin="use-credentials"></head>` +
4141
`<body><app-root></app-root>` +
4242
`<script src="runtime.js" crossorigin="use-credentials" defer></script>` +
4343
`<script src="polyfills.js" crossorigin="use-credentials" defer></script>` +
44-
`<script src="styles.js" crossorigin="use-credentials" defer></script>` +
4544
`<script src="vendor.js" crossorigin="use-credentials" defer></script>` +
4645
`<script src="main.js" crossorigin="use-credentials" defer></script></body></html>`,
4746
);
@@ -56,11 +55,11 @@ describe('Browser Builder crossOrigin', () => {
5655
const fileName = join(normalize(output.outputPath), 'index.html');
5756
const content = virtualFs.fileBufferToString(await host.read(normalize(fileName)).toPromise());
5857
expect(content).toBe(
59-
`<html><head><base href="/"></head>` +
58+
`<html><head><base href="/">` +
59+
`<link rel="stylesheet" href="styles.css" crossorigin="anonymous"></head>` +
6060
`<body><app-root></app-root>` +
6161
`<script src="runtime.js" crossorigin="anonymous" defer></script>` +
6262
`<script src="polyfills.js" crossorigin="anonymous" defer></script>` +
63-
`<script src="styles.js" crossorigin="anonymous" defer></script>` +
6463
`<script src="vendor.js" crossorigin="anonymous" defer></script>` +
6564
`<script src="main.js" crossorigin="anonymous" defer></script></body></html>`,
6665
);
@@ -75,11 +74,11 @@ describe('Browser Builder crossOrigin', () => {
7574
const fileName = join(normalize(output.outputPath), 'index.html');
7675
const content = virtualFs.fileBufferToString(await host.read(normalize(fileName)).toPromise());
7776
expect(content).toBe(
78-
`<html><head><base href="/"></head>` +
77+
`<html><head><base href="/">` +
78+
`<link rel="stylesheet" href="styles.css"></head>` +
7979
`<body><app-root></app-root>` +
8080
`<script src="runtime.js" defer></script>` +
8181
`<script src="polyfills.js" defer></script>` +
82-
`<script src="styles.js" defer></script>` +
8382
`<script src="vendor.js" defer></script>` +
8483
`<script src="main.js" defer></script></body></html>`,
8584
);

‎packages/angular_devkit/build_angular/src/browser/specs/differential_loading_spec.ts

Lines changed: 15 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -49,15 +49,13 @@ describe('Browser Builder with differential loading', () => {
4949
'runtime-es5.js',
5050
'runtime-es5.js.map',
5151

52-
'styles-es2015.js',
53-
'styles-es2015.js.map',
54-
'styles-es5.js',
55-
'styles-es5.js.map',
56-
5752
'vendor-es2015.js',
5853
'vendor-es2015.js.map',
5954
'vendor-es5.js',
6055
'vendor-es5.js.map',
56+
57+
'styles.css',
58+
'styles.css.map',
6159
] as PathFragment[];
6260

6361
expect(Object.keys(files)).toEqual(jasmine.arrayWithExactContents(expectedOutputs));
@@ -91,15 +89,13 @@ describe('Browser Builder with differential loading', () => {
9189
'runtime-es5.js',
9290
'runtime-es5.js.map',
9391

94-
'styles-es2016.js',
95-
'styles-es2016.js.map',
96-
'styles-es5.js',
97-
'styles-es5.js.map',
98-
9992
'vendor-es2016.js',
10093
'vendor-es2016.js.map',
10194
'vendor-es5.js',
10295
'vendor-es5.js.map',
96+
97+
'styles.css',
98+
'styles.css.map',
10399
] as PathFragment[];
104100

105101
expect(Object.keys(files)).toEqual(jasmine.arrayWithExactContents(expectedOutputs));
@@ -133,15 +129,13 @@ describe('Browser Builder with differential loading', () => {
133129
'runtime-es5.js',
134130
'runtime-es5.js.map',
135131

136-
'styles-esnext.js',
137-
'styles-esnext.js.map',
138-
'styles-es5.js',
139-
'styles-es5.js.map',
140-
141132
'vendor-esnext.js',
142133
'vendor-esnext.js.map',
143134
'vendor-es5.js',
144135
'vendor-es5.js.map',
136+
137+
'styles.css',
138+
'styles.css.map',
145139
] as PathFragment[];
146140

147141
expect(Object.keys(files)).toEqual(jasmine.arrayWithExactContents(expectedOutputs));
@@ -163,11 +157,11 @@ describe('Browser Builder with differential loading', () => {
163157
'runtime.js',
164158
'runtime.js.map',
165159

166-
'styles.js',
167-
'styles.js.map',
168-
169160
'vendor.js',
170161
'vendor.js.map',
162+
163+
'styles.css',
164+
'styles.css.map',
171165
] as PathFragment[];
172166

173167
expect(Object.keys(files)).toEqual(jasmine.arrayWithExactContents(expectedOutputs));
@@ -209,10 +203,9 @@ describe('Browser Builder with differential loading', () => {
209203
const { files } = await browserBuild(architect, host, target, { watch: true });
210204
expect(await files['index.html']).toContain(
211205
'<script src="runtime.js" type="module"></script>' +
212-
'<script src="polyfills.js" type="module"></script>' +
213-
'<script src="styles.js" type="module"></script>' +
214-
'<script src="vendor.js" type="module"></script>' +
215-
'<script src="main.js" type="module"></script>',
206+
'<script src="polyfills.js" type="module"></script>' +
207+
'<script src="vendor.js" type="module"></script>' +
208+
'<script src="main.js" type="module"></script>',
216209
);
217210
});
218211
});

‎packages/angular_devkit/build_angular/src/browser/specs/index_spec.ts

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -34,9 +34,9 @@ describe('Browser Builder index HTML processing', () => {
3434
const fileName = join(normalize(output.outputPath), 'index.html');
3535
const content = virtualFs.fileBufferToString(await host.read(normalize(fileName)).toPromise());
3636
expect(content).toBe(
37-
`<html><head><base href="/"></head>`
37+
`<html><head><base href="/"><link rel="stylesheet" href="styles.css"></head>`
3838
+ `<body><app-root></app-root><script src="runtime.js" defer></script>`
39-
+ `<script src="polyfills.js" defer></script><script src="styles.js" defer></script>`
39+
+ `<script src="polyfills.js" defer></script>`
4040
+ `<script src="vendor.js" defer></script><script src="main.js" defer></script></body></html>`,
4141
);
4242
await run.stop();
@@ -56,9 +56,10 @@ describe('Browser Builder index HTML processing', () => {
5656
const fileName = join(normalize(output.outputPath), 'index.html');
5757
const content = virtualFs.fileBufferToString(await host.read(normalize(fileName)).toPromise());
5858
expect(content).toBe(
59-
`<html><head><base href="/"></head><body><app-root></app-root>`
59+
`<html><head><base href="/"><link rel="stylesheet" href="styles.css"></head>`
60+
+ `<body><app-root></app-root>`
6061
+ `<script src="runtime.js" defer></script><script src="polyfills.js" defer></script>`
61-
+ `<script src="styles.js" defer></script><script src="vendor.js" defer></script>`
62+
+ `<script src="vendor.js" defer></script>`
6263
+ `<script src="main.js" defer></script></body></html>`,
6364
);
6465
await run.stop();
@@ -78,9 +79,9 @@ describe('Browser Builder index HTML processing', () => {
7879
const fileName = join(normalize(output.outputPath), 'index.html');
7980
const content = virtualFs.fileBufferToString(await host.read(normalize(fileName)).toPromise());
8081
expect(content).toBe(
81-
`<html><head><title>&iacute;</title><base href="/"></head> `
82+
`<html><head><title>&iacute;</title><base href="/"><link rel="stylesheet" href="styles.css"></head> `
8283
+ `<body><app-root></app-root><script src="runtime.js" defer></script>`
83-
+ `<script src="polyfills.js" defer></script><script src="styles.js" defer></script>`
84+
+ `<script src="polyfills.js" defer></script>`
8485
+ `<script src="vendor.js" defer></script><script src="main.js" defer></script></body></html>`,
8586
);
8687
await run.stop();
@@ -100,9 +101,9 @@ describe('Browser Builder index HTML processing', () => {
100101
const fileName = join(normalize(output.outputPath), 'index.html');
101102
const content = virtualFs.fileBufferToString(await host.read(normalize(fileName)).toPromise());
102103
expect(content).toBe(
103-
`<html><head><base href="/"><%= csrf_meta_tags %></head> `
104+
`<html><head><base href="/"><%= csrf_meta_tags %><link rel="stylesheet" href="styles.css"></head> `
104105
+ `<body><app-root></app-root><script src="runtime.js" defer></script>`
105-
+ `<script src="polyfills.js" defer></script><script src="styles.js" defer></script>`
106+
+ `<script src="polyfills.js" defer></script>`
106107
+ `<script src="vendor.js" defer></script><script src="main.js" defer></script></body></html>`,
107108
);
108109
await run.stop();
@@ -145,9 +146,9 @@ describe('Browser Builder index HTML processing', () => {
145146
const outputIndexPath = join(host.root(), 'dist', 'index.html');
146147
const content = await host.read(normalize(outputIndexPath)).toPromise();
147148
expect(virtualFs.fileBufferToString(content)).toBe(
148-
`<html><head><base href="/"><%= csrf_meta_tags %></head> `
149+
`<html><head><base href="/"><%= csrf_meta_tags %><link rel="stylesheet" href="styles.css"></head> `
149150
+ `<body><app-root></app-root><script src="runtime.js" defer></script>`
150-
+ `<script src="polyfills.js" defer></script><script src="styles.js" defer></script>`
151+
+ `<script src="polyfills.js" defer></script>`
151152
+ `<script src="vendor.js" defer></script><script src="main.js" defer></script></body></html>`,
152153
);
153154
});
@@ -188,9 +189,9 @@ describe('Browser Builder index HTML processing', () => {
188189
const outputIndexPath = join(host.root(), 'dist', 'main.html');
189190
const content = await host.read(normalize(outputIndexPath)).toPromise();
190191
expect(virtualFs.fileBufferToString(content)).toBe(
191-
`<html><head><base href="/"></head> `
192+
`<html><head><base href="/"><link rel="stylesheet" href="styles.css"></head> `
192193
+ `<body><app-root></app-root><script src="runtime.js" defer></script>`
193-
+ `<script src="polyfills.js" defer></script><script src="styles.js" defer></script>`
194+
+ `<script src="polyfills.js" defer></script>`
194195
+ `<script src="vendor.js" defer></script><script src="main.js" defer></script></body></html>`,
195196
);
196197
});
@@ -231,9 +232,9 @@ describe('Browser Builder index HTML processing', () => {
231232
const outputIndexPath = join(host.root(), 'dist', 'extra', 'main.html');
232233
const content = await host.read(normalize(outputIndexPath)).toPromise();
233234
expect(virtualFs.fileBufferToString(content)).toBe(
234-
`<html><head><base href="/"></head> `
235+
`<html><head><base href="/"><link rel="stylesheet" href="styles.css"></head> `
235236
+ `<body><app-root></app-root><script src="runtime.js" defer></script>`
236-
+ `<script src="polyfills.js" defer></script><script src="styles.js" defer></script>`
237+
+ `<script src="polyfills.js" defer></script>`
237238
+ `<script src="vendor.js" defer></script><script src="main.js" defer></script></body></html>`,
238239
);
239240
});

‎packages/angular_devkit/build_angular/src/browser/specs/service-worker_spec.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,7 @@ describe('Browser Builder service worker', () => {
118118
hashTable: {
119119
'/favicon.ico': '84161b857f5c547e3699ddfbffc6d8d737542e01',
120120
'/assets/folder-asset.txt': '617f202968a6a81050aa617c2e28e1dca11ce8d4',
121-
'/index.html': 'f95e7a84949070c4984069b592be7969bc3187a0',
121+
'/index.html': 'f0bea8ced1dfbeeb771a5f48651fbcff52a625eb',
122122
'/spectrum.png': '8d048ece46c0f3af4b598a95fd8e4709b631c3c0',
123123
},
124124
}));
@@ -235,7 +235,7 @@ describe('Browser Builder service worker', () => {
235235
hashTable: {
236236
'/foo/bar/favicon.ico': '84161b857f5c547e3699ddfbffc6d8d737542e01',
237237
'/foo/bar/assets/folder-asset.txt': '617f202968a6a81050aa617c2e28e1dca11ce8d4',
238-
'/foo/bar/index.html': 'e92a780dba6f6099adafb72d7611f6660a91a70b',
238+
'/foo/bar/index.html': 'f6650ac91428c6933dfe4c24079b3b15400da1ba',
239239
},
240240
}));
241241

‎packages/angular_devkit/build_angular/src/browser/specs/works_spec.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,9 +29,9 @@ describe('Browser Builder basic test', () => {
2929
expect(await host.scopedSync().exists(normalize('dist/runtime.js'))).toBe(true);
3030
expect(await host.scopedSync().exists(normalize('dist/main.js'))).toBe(true);
3131
expect(await host.scopedSync().exists(normalize('dist/polyfills.js'))).toBe(true);
32-
expect(await host.scopedSync().exists(normalize('dist/styles.js'))).toBe(true);
3332
expect(await host.scopedSync().exists(normalize('dist/vendor.js'))).toBe(true);
3433
expect(await host.scopedSync().exists(normalize('dist/favicon.ico'))).toBe(true);
34+
expect(await host.scopedSync().exists(normalize('dist/styles.css'))).toBe(true);
3535
expect(await host.scopedSync().exists(normalize('dist/index.html'))).toBe(true);
3636
});
3737
});

‎packages/angular_devkit/build_angular/src/dev-server/index_spec.ts

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,6 @@ describe('Dev Server Builder index', () => {
3232
expect(await response.text()).toContain(
3333
'<script src="runtime.js" type="module"></script>' +
3434
'<script src="polyfills.js" type="module"></script>' +
35-
'<script src="styles.js" type="module"></script>' +
3635
'<script src="vendor.js" type="module"></script>' +
3736
'<script src="main.js" type="module"></script>',
3837
);
@@ -75,7 +74,6 @@ describe('Dev Server Builder index', () => {
7574
expect(await response.text()).toContain(
7675
'<script src="runtime.js" type="module"></script>' +
7776
'<script src="polyfills.js" type="module"></script>' +
78-
'<script src="styles.js" type="module"></script>' +
7977
'<script src="scripts.js" defer></script>' +
8078
'<script src="vendor.js" type="module"></script>' +
8179
'<script src="main.js" type="module"></script>',
@@ -98,7 +96,6 @@ describe('Dev Server Builder index', () => {
9896
expect(await response.text()).toContain(
9997
'<script src="runtime.js" defer></script>' +
10098
'<script src="polyfills.js" defer></script>' +
101-
'<script src="styles.js" defer></script>' +
10299
'<script src="vendor.js" defer></script>' +
103100
'<script src="main.js" defer></script>',
104101
);

‎packages/schematics/angular/application/index.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -197,7 +197,6 @@ function addAppToWorkspaceFile(options: ApplicationOptions, appDir: string): Rul
197197
optimization: true,
198198
outputHashing: 'all',
199199
sourceMap: false,
200-
extractCss: true,
201200
namedChunks: false,
202201
extractLicenses: true,
203202
vendorChunk: false,

‎tests/legacy-cli/e2e/tests/misc/es5-polyfills.ts

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ export default async function () {
1515
await expectFileToMatch('dist/test-project/index.html', oneLineTrim`
1616
<script src="runtime.js" defer></script>
1717
<script src="polyfills.js" defer></script>
18-
<script src="styles.js" defer></script>
1918
<script src="vendor.js" defer></script>
2019
<script src="main.js" defer></script>
2120
`);
@@ -27,7 +26,6 @@ export default async function () {
2726
<script src="runtime.js" defer></script>
2827
<script src="polyfills-es5.js" nomodule defer></script>
2928
<script src="polyfills.js" defer></script>
30-
<script src="styles.js" defer></script>
3129
<script src="vendor.js" defer></script>
3230
<script src="main.js" defer></script>
3331
`);

0 commit comments

Comments
 (0)