refactor(@angular-devkit/build-angular): remove unused mime-types from style configuration

Author: alan-agius4

packages/angular_devkit/build_angular/src/webpack/configs/styles.ts

@@ -238,12 +238,15 @@ export function getStylesConfig(wco: WebpackConfigOptions): webpack.Configuratio
     }
   }
 
+  const postCss = require('postcss');
+  const postCssLoaderPath = require.resolve('postcss-loader');
+
   const componentStyleLoaders: webpack.RuleSetUseItem[] = [
     { loader: require.resolve('raw-loader') },
     {
-      loader: require.resolve('postcss-loader'),
+      loader: postCssLoaderPath,
       options: {
-        implementation: require('postcss'),
+        implementation: postCss,
         postcssOptions: postcssOptionsCreator(componentsSourceMap, false),
       },
     },
@@ -263,28 +266,65 @@ export function getStylesConfig(wco: WebpackConfigOptions): webpack.Configuratio
       },
     },
     {
-      loader: require.resolve('postcss-loader'),
+      loader: postCssLoaderPath,
       options: {
-        implementation: require('postcss'),
+        implementation: postCss,
         postcssOptions: postcssOptionsCreator(false, buildOptions.extractCss),
         sourceMap: !!cssSourceMap,
       },
     },
   ];
 
+  const extraMinimizers = [];
+  if (buildOptions.optimization.styles.minify) {
+    const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
+    const minimizerOptions = {
+      preset: [
+        'default',
+        {
+          // Disable SVG optimizations, as this can cause optimizations which are not compatible in all browsers.
+          svgo: false,
+          // Disable `calc` optimizations, due to several issues. #16910, #16875, #17890
+          calc: false,
+          // Disable CSS rules sorted due to several issues #20693, https://github.com/ionic-team/ionic-framework/issues/23266 and https://github.com/cssnano/cssnano/issues/1054
+          cssDeclarationSorter: false,
+        },
+      ],
+    };
+
+    const globalBundlesRegExp = new RegExp(
+      `^(${Object.keys(entryPoints).join('|')})(\.[0-9a-f]{20})?.css$`,
+    );
+
+    extraMinimizers.push(
+      new CssMinimizerPlugin({
+        // Component styles retain their original file name
+        test: /\.(?:css|scss|sass|less|styl)$/,
+        parallel: false,
+        exclude: globalBundlesRegExp,
+        minify: [CssMinimizerPlugin.cssnanoMinify],
+        minimizerOptions,
+      }),
+      new CssMinimizerPlugin({
+        test: /\.css$/,
+        include: globalBundlesRegExp,
+        parallel: maxWorkers,
+        minify: [CssMinimizerPlugin.cssnanoMinify],
+        minimizerOptions,
+      }),
+    );
+  }
+
   const styleLanguages: {
     extensions: string[];
-    mimetype?: string;
     use: webpack.RuleSetUseItem[];
   }[] = [
     {
       extensions: ['css'],
-      mimetype: 'text/css',
       use: [],
     },
     {
       extensions: ['scss'],
-      mimetype: 'text/x-scss',
       use: [
         {
           loader: require.resolve('resolve-url-loader'),
@@ -314,7 +354,6 @@ export function getStylesConfig(wco: WebpackConfigOptions): webpack.Configuratio
     },
     {
       extensions: ['sass'],
-      mimetype: 'text/x-sass',
       use: [
         {
           loader: require.resolve('resolve-url-loader'),
@@ -328,6 +367,8 @@ export function getStylesConfig(wco: WebpackConfigOptions): webpack.Configuratio
             implementation: sassImplementation,
             sourceMap: true,
             sassOptions: {
+              // Prevent use of `fibers` package as it no longer works in newer Node.js versions
+              fiber: false,
               indentedSyntax: true,
               // bootstrap-sass requires a minimum precision of 8
               precision: 8,
@@ -343,7 +384,6 @@ export function getStylesConfig(wco: WebpackConfigOptions): webpack.Configuratio
     },
     {
       extensions: ['less'],
-      mimetype: 'text/x-less',
       use: [
         {
           loader: require.resolve('less-loader'),
@@ -360,7 +400,6 @@ export function getStylesConfig(wco: WebpackConfigOptions): webpack.Configuratio
     },
     {
       extensions: ['styl'],
-      mimetype: 'text/x-stylus',
       use: [
         {
           loader: require.resolve('stylus-loader'),
@@ -377,84 +416,30 @@ export function getStylesConfig(wco: WebpackConfigOptions): webpack.Configuratio
     },
   ];
 
-  const inlineLanguageRules: webpack.RuleSetRule[] = [];
-  const fileLanguageRules: webpack.RuleSetRule[] = [];
-  for (const language of styleLanguages) {
-    if (language.mimetype) {
-      // inline component styles use data URIs and processing is selected by mimetype
-      inlineLanguageRules.push({
-        mimetype: language.mimetype,
-        use: [...componentStyleLoaders, ...language.use],
-      });
-    }
-
-    fileLanguageRules.push({
-      test: new RegExp(`\\.(?:${language.extensions.join('|')})$`, 'i'),
-      rules: [
-        // Setup processing rules for global and component styles
-        {
-          oneOf: [
-            // Component styles are all styles except defined global styles
-            {
-              exclude: globalStylePaths,
-              use: componentStyleLoaders,
-            },
-            // Global styles are only defined global styles
-            {
-              include: globalStylePaths,
-              use: globalStyleLoaders,
-            },
-          ],
-        },
-        { use: language.use },
-      ],
-    });
-  }
-
-  const extraMinimizers = [];
-  if (buildOptions.optimization.styles.minify) {
-    const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
-    const minimizerOptions = {
-      preset: [
-        'default',
-        {
-          // Disable SVG optimizations, as this can cause optimizations which are not compatible in all browsers.
-          svgo: false,
-          // Disable `calc` optimizations, due to several issues. #16910, #16875, #17890
-          calc: false,
-          // Disable CSS rules sorted due to several issues #20693, https://github.com/ionic-team/ionic-framework/issues/23266 and https://github.com/cssnano/cssnano/issues/1054
-          cssDeclarationSorter: false,
-        },
-      ],
-    };
-
-    const globalBundlesRegExp = new RegExp(
-      `^(${Object.keys(entryPoints).join('|')})(\.[0-9a-f]{20})?.css$`,
-    );
-
-    extraMinimizers.push(
-      new CssMinimizerPlugin({
-        // Component styles retain their original file name
-        test: /\.(?:css|scss|sass|less|styl)$/,
-        parallel: false,
-        exclude: globalBundlesRegExp,
-        minify: [CssMinimizerPlugin.cssnanoMinify],
-        minimizerOptions,
-      }),
-      new CssMinimizerPlugin({
-        test: /\.css$/,
-        include: globalBundlesRegExp,
-        parallel: maxWorkers,
-        minify: [CssMinimizerPlugin.cssnanoMinify],
-        minimizerOptions,
-      }),
-    );
-  }
-
   return {
     entry: entryPoints,
     module: {
-      rules: [...fileLanguageRules, ...inlineLanguageRules],
+      rules: styleLanguages.map(({ extensions, use }) => ({
+        test: new RegExp(`\\.(?:${extensions.join('|')})$`, 'i'),
+        rules: [
+          // Setup processing rules for global and component styles
+          {
+            oneOf: [
+              // Component styles are all styles except defined global styles
+              {
+                exclude: globalStylePaths,
+                use: componentStyleLoaders,
+              },
+              // Global styles are only defined global styles
+              {
+                include: globalStylePaths,
+                use: globalStyleLoaders,
+              },
+            ],
+          },
+          { use },
+        ],
+      })),
     },
     optimization: {
       minimizer: extraMinimizers,