Graham/angular-cli
1
0
Fork 0
mirror of https://github.com/angular/angular-cli.git synced 2025-05-22 23:15:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(@angular-devkit/build-angular): use new inlineStyleFileExtension option for inline component styles

Browse Source 
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.
This commit is contained in:
Charles Lyding 2021-05-24 15:51:17 -04:00 committed by Charles
parent 7a6a4ecb59
commit 459aa2bc6a
2 changed files with 66 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

132
packages/angular_devkit/build_angular/src/browser/tests/options/inline-style-language_spec.ts
View File

@ -32,10 +32,7 @@ describeBuilder(buildWebpackBrowser, BROWSER_BUILDER_INFO, (harness) => {
});
await harness.modifyFile('src/app/app.component.ts', (content) =>
content.replace(
'__STYLE_MARKER__',
'$primary-color: green;\\nh1 { color: $primary-color; }',
),
content.replace('__STYLE_MARKER__', '$primary: green;\\nh1 { color: $primary; }'),
);
const { result } = await harness.executeOnce();
@ -52,10 +49,7 @@ describeBuilder(buildWebpackBrowser, BROWSER_BUILDER_INFO, (harness) => {
});
await harness.modifyFile('src/app/app.component.ts', (content) =>
content.replace(
'__STYLE_MARKER__',
'$primary-color: green\\nh1\\n\\tcolor: $primary-color',
),
content.replace('__STYLE_MARKER__', '$primary: green\\nh1\\n\\tcolor: $primary'),
);
const { result } = await harness.executeOnce();
@ -77,7 +71,7 @@ describeBuilder(buildWebpackBrowser, BROWSER_BUILDER_INFO, (harness) => {
// await harness.modifyFile('src/app/app.component.ts', (content) =>
// content.replace(
// '__STYLE_MARKER__',
// '$primary-color = green;\\nh1 { color: $primary-color; }',
// '$primary = green;\\nh1 { color: $primary; }',
// ),
// );
@ -95,10 +89,7 @@ describeBuilder(buildWebpackBrowser, BROWSER_BUILDER_INFO, (harness) => {
});
await harness.modifyFile('src/app/app.component.ts', (content) =>
content.replace(
'__STYLE_MARKER__',
'@primary-color: green;\\nh1 { color: @primary-color; }',
),
content.replace('__STYLE_MARKER__', '@primary: green;\\nh1 { color: @primary; }'),
);
const { result } = await harness.executeOnce();
@ -106,67 +97,64 @@ describeBuilder(buildWebpackBrowser, BROWSER_BUILDER_INFO, (harness) => {
expect(result?.success).toBe(true);
harness.expectFile('dist/main.js').content.toContain('color: green');
});
});
it('updates produced stylesheet in watch mode', async () => {
harness.useTarget('build', {
...BASE_OPTIONS,
main: 'src/main.ts',
inlineStyleLanguage: InlineStyleLanguage.Scss,
aot,
watch: true,
it('updates produced stylesheet in watch mode', async () => {
harness.useTarget('build', {
...BASE_OPTIONS,
main: 'src/main.ts',
inlineStyleLanguage: InlineStyleLanguage.Scss,
aot,
watch: true,
});
await harness.modifyFile('src/app/app.component.ts', (content) =>
content.replace('__STYLE_MARKER__', '$primary: green;\\nh1 { color: $primary; }'),
);
const buildCount = await harness
.execute()
.pipe(
timeout(30000),
concatMap(async ({ result }, index) => {
expect(result?.success).toBe(true);
switch (index) {
case 0:
harness.expectFile('dist/main.js').content.toContain('color: green');
harness.expectFile('dist/main.js').content.not.toContain('color: aqua');
await harness.modifyFile('src/app/app.component.ts', (content) =>
content.replace(
'$primary: green;\\nh1 { color: $primary; }',
'$primary: aqua;\\nh1 { color: $primary; }',
),
);
break;
case 1:
harness.expectFile('dist/main.js').content.not.toContain('color: green');
harness.expectFile('dist/main.js').content.toContain('color: aqua');
await harness.modifyFile('src/app/app.component.ts', (content) =>
content.replace(
'$primary: aqua;\\nh1 { color: $primary; }',
'$primary: blue;\\nh1 { color: $primary; }',
),
);
break;
case 2:
harness.expectFile('dist/main.js').content.not.toContain('color: green');
harness.expectFile('dist/main.js').content.not.toContain('color: aqua');
harness.expectFile('dist/main.js').content.toContain('color: blue');
break;
}
}),
take(3),
count(),
)
.toPromise();
expect(buildCount).toBe(3);
});
await harness.modifyFile('src/app/app.component.ts', (content) =>
content.replace(
'__STYLE_MARKER__',
'$primary-color: green;\\nh1 { color: $primary-color; }',
),
);
const buildCount = await harness
.execute()
.pipe(
timeout(30000),
concatMap(async ({ result }, index) => {
expect(result?.success).toBe(true);
switch (index) {
case 0:
harness.expectFile('dist/main.js').content.toContain('color: green');
harness.expectFile('dist/main.js').content.not.toContain('color: aqua');
await harness.modifyFile('src/app/app.component.ts', (content) =>
content.replace(
'$primary-color: green;\\nh1 { color: $primary-color; }',
'$primary-color: aqua;\\nh1 { color: $primary-color; }',
),
);
break;
case 1:
harness.expectFile('dist/main.js').content.not.toContain('color: green');
harness.expectFile('dist/main.js').content.toContain('color: aqua');
await harness.modifyFile('src/app/app.component.ts', (content) =>
content.replace(
'$primary-color: aqua;\\nh1 { color: $primary-color; }',
'$primary-color: blue;\\nh1 { color: $primary-color; }',
),
);
break;
case 2:
harness.expectFile('dist/main.js').content.not.toContain('color: green');
harness.expectFile('dist/main.js').content.not.toContain('color: aqua');
harness.expectFile('dist/main.js').content.toContain('color: blue');
break;
}
}),
take(3),
count(),
)
.toPromise();
expect(buildCount).toBe(3);
});
}
});

12
packages/angular_devkit/build_angular/src/webpack/configs/typescript.ts
View File

@ -51,20 +51,20 @@ function createIvyPlugin(
}
}
let inlineStyleMimeType;
let inlineStyleFileExtension;
switch (buildOptions.inlineStyleLanguage) {
case 'less':
inlineStyleMimeType = 'text/x-less';
inlineStyleFileExtension = 'less';
break;
case 'sass':
inlineStyleMimeType = 'text/x-sass';
inlineStyleFileExtension = 'sass';
break;
case 'scss':
inlineStyleMimeType = 'text/x-scss';
inlineStyleFileExtension = 'scss';
break;
case 'css':
default:
inlineStyleMimeType = 'text/css';
inlineStyleFileExtension = 'css';
break;
}
@ -74,7 +74,7 @@ function createIvyPlugin(
fileReplacements,
jitMode: !aot,
emitNgModuleScope: !optimize,
inlineStyleMimeType,
inlineStyleFileExtension,
});
}