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.

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(
+            content.replace('__STYLE_MARKER__', '$primary: green;\\nh1 { color: $primary; }'),
-              '__STYLE_MARKER__',
-              '$primary-color: green;\\nh1 { color: $primary-color; }',
-            ),
           );
 
           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(
+            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();
@@ -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(
+            content.replace('__STYLE_MARKER__', '@primary: green;\\nh1 { color: @primary; }'),
-              '__STYLE_MARKER__',
-              '@primary-color: green;\\nh1 { color: @primary-color; }',
-            ),
           );
 
           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 () => {
+        it('updates produced stylesheet in watch mode', async () => {
-        harness.useTarget('build', {
+          harness.useTarget('build', {
-          ...BASE_OPTIONS,
+            ...BASE_OPTIONS,
-          main: 'src/main.ts',
+            main: 'src/main.ts',
-          inlineStyleLanguage: InlineStyleLanguage.Scss,
+            inlineStyleLanguage: InlineStyleLanguage.Scss,
-          aot,
+            aot,
-          watch: true,
+            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);
       });
     }
   });

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,
   });
 }