build: update postcss-loader to version 4.0

Author: alan-agius4

package.json

@@ -188,7 +188,7 @@
     "popper.js": "^1.14.1",
     "postcss": "7.0.32",
     "postcss-import": "12.0.1",
-    "postcss-loader": "3.0.0",
+    "postcss-loader": "4.0.1",
     "prettier": "^2.0.0",
     "protractor": "~7.0.0",
     "puppeteer": "5.2.1",

packages/angular_devkit/build_angular/package.json

@@ -47,7 +47,7 @@
     "pnp-webpack-plugin": "1.6.4",
     "postcss": "7.0.32",
     "postcss-import": "12.0.1",
-    "postcss-loader": "3.0.0",
+    "postcss-loader": "4.0.1",
     "raw-loader": "4.0.1",
     "regenerator-runtime": "0.13.7",
     "resolve-url-loader": "3.1.1",

packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/styles.ts

@@ -35,38 +35,6 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
   // Determine hashing format.
   const hashFormat = getOutputHashFormat(buildOptions.outputHashing as string);
 
-  const postcssPluginCreator = function(loader: webpack.loader.LoaderContext) {
-    return [
-      postcssImports({
-        resolve: (url: string) => (url.startsWith('~') ? url.substr(1) : url),
-        load: (filename: string) => {
-          return new Promise<string>((resolve, reject) => {
-            loader.fs.readFile(filename, (err: Error, data: Buffer) => {
-              if (err) {
-                reject(err);
-
-                return;
-              }
-
-              const content = data.toString();
-              resolve(content);
-            });
-          });
-        },
-      }),
-      PostcssCliResources({
-        baseHref: buildOptions.baseHref,
-        deployUrl: buildOptions.deployUrl,
-        resourcesOutputPath: buildOptions.resourcesOutputPath,
-        loader,
-        rebaseRootRelative: buildOptions.rebaseRootRelativeCssUrls,
-        filename: `[name]${hashFormat.file}.[ext]`,
-        emitFile: buildOptions.platform !== 'server',
-      }),
-      autoprefixer(),
-    ];
-  };
-
   // use includePaths from appConfig
   const includePaths: string[] = [];
   let lessPathOptions: { paths?: string[] } = {};
@@ -186,7 +154,56 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
     },
   ];
 
+  const postcssOptionsCreator = (sourceMap: boolean, extracted: boolean | undefined) => {
+    return (loader: webpack.loader.LoaderContext) => ({
+      map: sourceMap && {
+        inline: true,
+        annotation: false,
+      },
+      plugins: [
+        postcssImports({
+          resolve: (url: string) => url.startsWith('~') ? url.substr(1) : url,
+          load: (filename: string) => {
+            return new Promise<string>((resolve, reject) => {
+              loader.fs.readFile(filename, (err: Error, data: Buffer) => {
+                if (err) {
+                  reject(err);
+
+                  return;
+                }
+
+                const content = data.toString();
+                resolve(content);
+              });
+            });
+          },
+        }),
+        PostcssCliResources({
+          baseHref: buildOptions.baseHref,
+          deployUrl: buildOptions.deployUrl,
+          resourcesOutputPath: buildOptions.resourcesOutputPath,
+          loader,
+          rebaseRootRelative: buildOptions.rebaseRootRelativeCssUrls,
+          filename: `[name]${hashFormat.file}.[ext]`,
+          emitFile: buildOptions.platform !== 'server',
+          extracted,
+        }),
+        autoprefixer(),
+      ],
+    });
+  };
+
   // load component css as raw strings
+  const componentsSourceMap = !!(
+    cssSourceMap
+    // Never use component css sourcemap when style optimizations are on.
+    // It will just increase bundle size without offering good debug experience.
+    && !buildOptions.optimization.styles
+    // Inline all sourcemap types except hidden ones, which are the same as no sourcemaps
+    // for component css.
+    && !buildOptions.sourceMap.hidden
+  );
+
   const rules: webpack.RuleSetRule[] = baseRules.map(({ test, use }) => ({
     exclude: globalStylePaths,
     test,
@@ -195,15 +212,7 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
       {
         loader: require.resolve('postcss-loader'),
         options: {
-          ident: 'embedded',
-          plugins: postcssPluginCreator,
-          sourceMap: cssSourceMap
-            // Never use component css sourcemap when style optimizations are on.
-            // It will just increase bundle size without offering good debug experience.
-            && !buildOptions.optimization.styles
-            // Inline all sourcemap types except hidden ones, which are the same as no sourcemaps
-            // for component css.
-            && !buildOptions.sourceMap.hidden ? 'inline' : false,
+          postcssOptions: postcssOptionsCreator(componentsSourceMap, false),
         },
       },
       ...use,
@@ -212,6 +221,10 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
 
   // load global css as css files
   if (globalStylePaths.length > 0) {
+    const globalSourceMap = !!(
+      cssSourceMap && !buildOptions.extractCss && !buildOptions.sourceMap.hidden
+    );
+
     rules.push(
       ...baseRules.map(({ test, use }) => {
         return {
@@ -230,18 +243,13 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
               loader: require.resolve('css-loader'),
               options: {
                 url: false,
-                sourceMap: cssSourceMap,
+                sourceMap: globalSourceMap,
               },
             },
             {
               loader: require.resolve('postcss-loader'),
               options: {
-                ident: buildOptions.extractCss ? 'extracted' : 'embedded',
-                plugins: postcssPluginCreator,
-                sourceMap:
-                  cssSourceMap && !buildOptions.extractCss && !buildOptions.sourceMap.hidden
-                    ? 'inline'
-                    : cssSourceMap,
+                postcssOptions: postcssOptionsCreator(globalSourceMap, buildOptions.extractCss),
               },
             },
             ...use,

packages/angular_devkit/build_angular/src/angular-cli-files/plugins/postcss-cli-resources.ts

@@ -29,6 +29,8 @@ export interface PostcssCliResourcesOptions {
   deployUrl?: string;
   resourcesOutputPath?: string;
   rebaseRootRelative?: boolean;
+  /** CSS is extracted to a `.css` or is embedded in a `.js` file. */
+  extracted?: boolean;
   filename: string;
   loader: webpack.loader.LoaderContext;
   emitFile: boolean;
@@ -59,6 +61,7 @@ export default postcss.plugin('postcss-cli-resources', (options: PostcssCliResou
     filename,
     loader,
     emitFile,
+    extracted,
   } = options;
 
   const dedupeSlashes = (url: string) => url.replace(/\/\/+/g, '/');
@@ -149,7 +152,7 @@ export default postcss.plugin('postcss-cli-resources', (options: PostcssCliResou
           outputUrl = url.format({ pathname: outputUrl, hash, search });
         }
 
-        if (deployUrl && loader.loaders[loader.loaderIndex].options.ident !== 'extracted') {
+        if (deployUrl && !extracted) {
           outputUrl = url.resolve(deployUrl, outputUrl);
         }
 

yarn.lock

@@ -6022,13 +6022,6 @@ immutable@^3.8.2:
   resolved "https://registry.yarnpkg.com/immutable/-/immutable-3.8.2.tgz#c2439951455bb39913daf281376f1530e104adf3"
   integrity sha1-wkOZUUVbs5kT2vKBN28VMOEErfM=
 
-import-cwd@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/import-cwd/-/import-cwd-2.1.0.tgz#aa6cf36e722761285cb371ec6519f53e2435b0a9"
-  integrity sha1-qmzzbnInYShcs3HsZRn1PiQ1sKk=
-  dependencies:
-    import-from "^2.1.0"
-
 import-fresh@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-2.0.0.tgz#d81355c15612d386c61f9ddd3922d4304822a546"
@@ -6045,13 +6038,6 @@ import-fresh@^3.2.1:
     parent-module "^1.0.0"
     resolve-from "^4.0.0"
 
-import-from@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/import-from/-/import-from-2.1.0.tgz#335db7f2a7affd53aaa471d4b8021dee36b7f3b1"
-  integrity sha1-M1238qev/VOqpHHUuAId7ja387E=
-  dependencies:
-    resolve-from "^3.0.0"
-
 import-local@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/import-local/-/import-local-2.0.0.tgz#55070be38a5993cf18ef6db7e961f5bee5c5a09d"
@@ -9143,23 +9129,16 @@ postcss-import@12.0.1:
     read-cache "^1.0.0"
     resolve "^1.1.7"
 
-postcss-load-config@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-2.1.0.tgz#c84d692b7bb7b41ddced94ee62e8ab31b417b003"
-  integrity sha512-4pV3JJVPLd5+RueiVVB+gFOAa7GWc25XQcMp86Zexzke69mKf6Nx9LRcQywdz7yZI9n1udOxmLuAwTBypypF8Q==
-  dependencies:
-    cosmiconfig "^5.0.0"
-    import-cwd "^2.0.0"
-
-postcss-loader@3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-3.0.0.tgz#6b97943e47c72d845fa9e03f273773d4e8dd6c2d"
-  integrity sha512-cLWoDEY5OwHcAjDnkyRQzAXfs2jrKjXpO/HQFcc5b5u/r7aa471wdmChmwfnv7x2u840iat/wi0lQ5nbRgSkUA==
+postcss-loader@4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-4.0.1.tgz#d1a2cf443005bcd65e856d3881204886646398d4"
+  integrity sha512-m+2fe21cs/1Oz4Yds90al5uqVSc0yJRhYSfCRnsnVLt3z0QoNPpqLdgW7CGVWmlUlKEGL9vmq+P4hHS6Orb5DA==
   dependencies:
-    loader-utils "^1.1.0"
-    postcss "^7.0.0"
-    postcss-load-config "^2.0.0"
-    schema-utils "^1.0.0"
+    cosmiconfig "^7.0.0"
+    klona "^2.0.3"
+    loader-utils "^2.0.0"
+    schema-utils "^2.7.1"
+    semver "^7.3.2"
 
 postcss-merge-longhand@^4.0.11:
   version "4.0.11"