Graham/angular-cli
1
0
Fork 0
mirror of https://github.com/angular/angular-cli.git synced 2025-05-23 07:19:58 +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

32
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) => await harness.modifyFile('src/app/app.component.ts', (content) =>
content.replace( content.replace('__STYLE_MARKER__', '$primary: green;\\nh1 { color: $primary; }'),
'__STYLE_MARKER__',
'$primary-color: green;\\nh1 { color: $primary-color; }',
),
); );
const { result } = await harness.executeOnce(); const { result } = await harness.executeOnce();
@ -52,10 +49,7 @@ describeBuilder(buildWebpackBrowser, BROWSER_BUILDER_INFO, (harness) => {
}); });
await harness.modifyFile('src/app/app.component.ts', (content) => await harness.modifyFile('src/app/app.component.ts', (content) =>
content.replace( content.replace('__STYLE_MARKER__', '$primary: green\\nh1\\n\\tcolor: $primary'),
'__STYLE_MARKER__',
'$primary-color: green\\nh1\\n\\tcolor: $primary-color',
),
); );
const { result } = await harness.executeOnce(); const { result } = await harness.executeOnce();
@ -77,7 +71,7 @@ describeBuilder(buildWebpackBrowser, BROWSER_BUILDER_INFO, (harness) => {
// await harness.modifyFile('src/app/app.component.ts', (content) => // await harness.modifyFile('src/app/app.component.ts', (content) =>
// content.replace( // content.replace(
// '__STYLE_MARKER__', // '__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) => await harness.modifyFile('src/app/app.component.ts', (content) =>
content.replace( content.replace('__STYLE_MARKER__', '@primary: green;\\nh1 { color: @primary; }'),
'__STYLE_MARKER__',
'@primary-color: green;\\nh1 { color: @primary-color; }',
),
); );
const { result } = await harness.executeOnce(); const { result } = await harness.executeOnce();
@ -106,7 +97,6 @@ describeBuilder(buildWebpackBrowser, BROWSER_BUILDER_INFO, (harness) => {
expect(result?.success).toBe(true); expect(result?.success).toBe(true);
harness.expectFile('dist/main.js').content.toContain('color: green'); harness.expectFile('dist/main.js').content.toContain('color: green');
}); });
});
it('updates produced stylesheet in watch mode', async () => { it('updates produced stylesheet in watch mode', async () => {
harness.useTarget('build', { harness.useTarget('build', {
@ -118,10 +108,7 @@ describeBuilder(buildWebpackBrowser, BROWSER_BUILDER_INFO, (harness) => {
}); });
await harness.modifyFile('src/app/app.component.ts', (content) => await harness.modifyFile('src/app/app.component.ts', (content) =>
content.replace( content.replace('__STYLE_MARKER__', '$primary: green;\\nh1 { color: $primary; }'),
'__STYLE_MARKER__',
'$primary-color: green;\\nh1 { color: $primary-color; }',
),
); );
const buildCount = await harness const buildCount = await harness
@ -138,8 +125,8 @@ describeBuilder(buildWebpackBrowser, BROWSER_BUILDER_INFO, (harness) => {
await harness.modifyFile('src/app/app.component.ts', (content) => await harness.modifyFile('src/app/app.component.ts', (content) =>
content.replace( content.replace(
'$primary-color: green;\\nh1 { color: $primary-color; }', '$primary: green;\\nh1 { color: $primary; }',
'$primary-color: aqua;\\nh1 { color: $primary-color; }', '$primary: aqua;\\nh1 { color: $primary; }',
), ),
); );
break; break;
@ -149,8 +136,8 @@ describeBuilder(buildWebpackBrowser, BROWSER_BUILDER_INFO, (harness) => {
await harness.modifyFile('src/app/app.component.ts', (content) => await harness.modifyFile('src/app/app.component.ts', (content) =>
content.replace( content.replace(
'$primary-color: aqua;\\nh1 { color: $primary-color; }', '$primary: aqua;\\nh1 { color: $primary; }',
'$primary-color: blue;\\nh1 { color: $primary-color; }', '$primary: blue;\\nh1 { color: $primary; }',
), ),
); );
break; break;
@ -168,6 +155,7 @@ describeBuilder(buildWebpackBrowser, BROWSER_BUILDER_INFO, (harness) => {
expect(buildCount).toBe(3); 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) { switch (buildOptions.inlineStyleLanguage) {
case 'less': case 'less':
inlineStyleMimeType = 'text/x-less'; inlineStyleFileExtension = 'less';
break; break;
case 'sass': case 'sass':
inlineStyleMimeType = 'text/x-sass'; inlineStyleFileExtension = 'sass';
break; break;
case 'scss': case 'scss':
inlineStyleMimeType = 'text/x-scss'; inlineStyleFileExtension = 'scss';
break; break;
case 'css': case 'css':
default: default:
inlineStyleMimeType = 'text/css'; inlineStyleFileExtension = 'css';
break; break;
} }
@ -74,7 +74,7 @@ function createIvyPlugin(
fileReplacements, fileReplacements,
jitMode: !aot, jitMode: !aot,
emitNgModuleScope: !optimize, emitNgModuleScope: !optimize,
inlineStyleMimeType, inlineStyleFileExtension,
}); });
} }