From 459aa2bc6a26dbf8e615531b84ca70aa19b1c7a8 Mon Sep 17 00:00:00 2001 From: Charles Lyding <19598772+clydin@users.noreply.github.com> Date: Mon, 24 May 2021 15:51:17 -0400 Subject: [PATCH] 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. --- .../options/inline-style-language_spec.ts | 132 ++++++++---------- .../src/webpack/configs/typescript.ts | 12 +- 2 files changed, 66 insertions(+), 78 deletions(-) diff --git a/packages/angular_devkit/build_angular/src/browser/tests/options/inline-style-language_spec.ts b/packages/angular_devkit/build_angular/src/browser/tests/options/inline-style-language_spec.ts index 83ae153a53..f1ad0e8f10 100644 --- a/packages/angular_devkit/build_angular/src/browser/tests/options/inline-style-language_spec.ts +++ b/packages/angular_devkit/build_angular/src/browser/tests/options/inline-style-language_spec.ts @@ -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); }); } }); diff --git a/packages/angular_devkit/build_angular/src/webpack/configs/typescript.ts b/packages/angular_devkit/build_angular/src/webpack/configs/typescript.ts index cb3b63313f..04c0d69295 100644 --- a/packages/angular_devkit/build_angular/src/webpack/configs/typescript.ts +++ b/packages/angular_devkit/build_angular/src/webpack/configs/typescript.ts @@ -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, }); }