Skip to content

Commit 459aa2b

Browse files
clydinclydin
committedMay 26, 2021
refactor(@angular-devkit/build-angular): use new inlineStyleFileExtension option for inline component styles
The new `ngtools/webpack` option leverages the inline resource matching syntax combined with a custom loader instead of data URIs. This provides better resource path in loaders that do not yet fully support scheme-based resource requests.
1 parent 7a6a4ec commit 459aa2b

File tree

2 files changed

+66
-78
lines changed

2 files changed

+66
-78
lines changed
 

‎packages/angular_devkit/build_angular/src/browser/tests/options/inline-style-language_spec.ts

Lines changed: 60 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -32,10 +32,7 @@ describeBuilder(buildWebpackBrowser, BROWSER_BUILDER_INFO, (harness) => {
3232
});
3333

3434
await harness.modifyFile('src/app/app.component.ts', (content) =>
35-
content.replace(
36-
'__STYLE_MARKER__',
37-
'$primary-color: green;\\nh1 { color: $primary-color; }',
38-
),
35+
content.replace('__STYLE_MARKER__', '$primary: green;\\nh1 { color: $primary; }'),
3936
);
4037

4138
const { result } = await harness.executeOnce();
@@ -52,10 +49,7 @@ describeBuilder(buildWebpackBrowser, BROWSER_BUILDER_INFO, (harness) => {
5249
});
5350

5451
await harness.modifyFile('src/app/app.component.ts', (content) =>
55-
content.replace(
56-
'__STYLE_MARKER__',
57-
'$primary-color: green\\nh1\\n\\tcolor: $primary-color',
58-
),
52+
content.replace('__STYLE_MARKER__', '$primary: green\\nh1\\n\\tcolor: $primary'),
5953
);
6054

6155
const { result } = await harness.executeOnce();
@@ -77,7 +71,7 @@ describeBuilder(buildWebpackBrowser, BROWSER_BUILDER_INFO, (harness) => {
7771
// await harness.modifyFile('src/app/app.component.ts', (content) =>
7872
// content.replace(
7973
// '__STYLE_MARKER__',
80-
// '$primary-color = green;\\nh1 { color: $primary-color; }',
74+
// '$primary = green;\\nh1 { color: $primary; }',
8175
// ),
8276
// );
8377

@@ -95,78 +89,72 @@ describeBuilder(buildWebpackBrowser, BROWSER_BUILDER_INFO, (harness) => {
9589
});
9690

9791
await harness.modifyFile('src/app/app.component.ts', (content) =>
98-
content.replace(
99-
'__STYLE_MARKER__',
100-
'@primary-color: green;\\nh1 { color: @primary-color; }',
101-
),
92+
content.replace('__STYLE_MARKER__', '@primary: green;\\nh1 { color: @primary; }'),
10293
);
10394

10495
const { result } = await harness.executeOnce();
10596

10697
expect(result?.success).toBe(true);
10798
harness.expectFile('dist/main.js').content.toContain('color: green');
10899
});
109-
});
110100

111-
it('updates produced stylesheet in watch mode', async () => {
112-
harness.useTarget('build', {
113-
...BASE_OPTIONS,
114-
main: 'src/main.ts',
115-
inlineStyleLanguage: InlineStyleLanguage.Scss,
116-
aot,
117-
watch: true,
118-
});
101+
it('updates produced stylesheet in watch mode', async () => {
102+
harness.useTarget('build', {
103+
...BASE_OPTIONS,
104+
main: 'src/main.ts',
105+
inlineStyleLanguage: InlineStyleLanguage.Scss,
106+
aot,
107+
watch: true,
108+
});
119109

120-
await harness.modifyFile('src/app/app.component.ts', (content) =>
121-
content.replace(
122-
'__STYLE_MARKER__',
123-
'$primary-color: green;\\nh1 { color: $primary-color; }',
124-
),
125-
);
126-
127-
const buildCount = await harness
128-
.execute()
129-
.pipe(
130-
timeout(30000),
131-
concatMap(async ({ result }, index) => {
132-
expect(result?.success).toBe(true);
133-
134-
switch (index) {
135-
case 0:
136-
harness.expectFile('dist/main.js').content.toContain('color: green');
137-
harness.expectFile('dist/main.js').content.not.toContain('color: aqua');
138-
139-
await harness.modifyFile('src/app/app.component.ts', (content) =>
140-
content.replace(
141-
'$primary-color: green;\\nh1 { color: $primary-color; }',
142-
'$primary-color: aqua;\\nh1 { color: $primary-color; }',
143-
),
144-
);
145-
break;
146-
case 1:
147-
harness.expectFile('dist/main.js').content.not.toContain('color: green');
148-
harness.expectFile('dist/main.js').content.toContain('color: aqua');
149-
150-
await harness.modifyFile('src/app/app.component.ts', (content) =>
151-
content.replace(
152-
'$primary-color: aqua;\\nh1 { color: $primary-color; }',
153-
'$primary-color: blue;\\nh1 { color: $primary-color; }',
154-
),
155-
);
156-
break;
157-
case 2:
158-
harness.expectFile('dist/main.js').content.not.toContain('color: green');
159-
harness.expectFile('dist/main.js').content.not.toContain('color: aqua');
160-
harness.expectFile('dist/main.js').content.toContain('color: blue');
161-
break;
162-
}
163-
}),
164-
take(3),
165-
count(),
166-
)
167-
.toPromise();
168-
169-
expect(buildCount).toBe(3);
110+
await harness.modifyFile('src/app/app.component.ts', (content) =>
111+
content.replace('__STYLE_MARKER__', '$primary: green;\\nh1 { color: $primary; }'),
112+
);
113+
114+
const buildCount = await harness
115+
.execute()
116+
.pipe(
117+
timeout(30000),
118+
concatMap(async ({ result }, index) => {
119+
expect(result?.success).toBe(true);
120+
121+
switch (index) {
122+
case 0:
123+
harness.expectFile('dist/main.js').content.toContain('color: green');
124+
harness.expectFile('dist/main.js').content.not.toContain('color: aqua');
125+
126+
await harness.modifyFile('src/app/app.component.ts', (content) =>
127+
content.replace(
128+
'$primary: green;\\nh1 { color: $primary; }',
129+
'$primary: aqua;\\nh1 { color: $primary; }',
130+
),
131+
);
132+
break;
133+
case 1:
134+
harness.expectFile('dist/main.js').content.not.toContain('color: green');
135+
harness.expectFile('dist/main.js').content.toContain('color: aqua');
136+
137+
await harness.modifyFile('src/app/app.component.ts', (content) =>
138+
content.replace(
139+
'$primary: aqua;\\nh1 { color: $primary; }',
140+
'$primary: blue;\\nh1 { color: $primary; }',
141+
),
142+
);
143+
break;
144+
case 2:
145+
harness.expectFile('dist/main.js').content.not.toContain('color: green');
146+
harness.expectFile('dist/main.js').content.not.toContain('color: aqua');
147+
harness.expectFile('dist/main.js').content.toContain('color: blue');
148+
break;
149+
}
150+
}),
151+
take(3),
152+
count(),
153+
)
154+
.toPromise();
155+
156+
expect(buildCount).toBe(3);
157+
});
170158
});
171159
}
172160
});

‎packages/angular_devkit/build_angular/src/webpack/configs/typescript.ts

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -51,20 +51,20 @@ function createIvyPlugin(
5151
}
5252
}
5353

54-
let inlineStyleMimeType;
54+
let inlineStyleFileExtension;
5555
switch (buildOptions.inlineStyleLanguage) {
5656
case 'less':
57-
inlineStyleMimeType = 'text/x-less';
57+
inlineStyleFileExtension = 'less';
5858
break;
5959
case 'sass':
60-
inlineStyleMimeType = 'text/x-sass';
60+
inlineStyleFileExtension = 'sass';
6161
break;
6262
case 'scss':
63-
inlineStyleMimeType = 'text/x-scss';
63+
inlineStyleFileExtension = 'scss';
6464
break;
6565
case 'css':
6666
default:
67-
inlineStyleMimeType = 'text/css';
67+
inlineStyleFileExtension = 'css';
6868
break;
6969
}
7070

@@ -74,7 +74,7 @@ function createIvyPlugin(
7474
fileReplacements,
7575
jitMode: !aot,
7676
emitNgModuleScope: !optimize,
77-
inlineStyleMimeType,
77+
inlineStyleFileExtension,
7878
});
7979
}
8080

0 commit comments

Comments
 (0)