build: update mini-css-extract-plugin to version 1.0.0

Author: alan-agius4

package.json

@@ -172,7 +172,7 @@
     "license-checker": "^25.0.0",
     "license-checker-webpack-plugin": "0.1.5",
     "loader-utils": "2.0.0",
-    "mini-css-extract-plugin": "0.11.3",
+    "mini-css-extract-plugin": "1.0.0",
     "minimatch": "3.0.4",
     "minimist": "^1.2.0",
     "ng-packagr": "~11.0.0-next.0",

packages/angular_devkit/build_angular/package.json

@@ -40,7 +40,7 @@
     "less-loader": "7.0.2",
     "license-webpack-plugin": "2.3.0",
     "loader-utils": "2.0.0",
-    "mini-css-extract-plugin": "0.11.3",
+    "mini-css-extract-plugin": "1.0.0",
     "minimatch": "3.0.4",
     "open": "7.3.0",
     "ora": "5.1.0",

packages/angular_devkit/build_angular/src/dev-server/hmr_spec.ts

@@ -10,7 +10,6 @@ import { DevServerBuilderOutput } from '@angular-devkit/build-angular';
 import fetch from 'node-fetch'; // tslint:disable-line:no-implicit-dependencies
 import { createArchitect, host } from '../test-utils';
 
-
 describe('Dev Server Builder hmr', () => {
   const target = { project: 'app', target: 'serve' };
   let architect: Architect;
@@ -27,17 +26,25 @@ describe('Dev Server Builder hmr', () => {
     await Promise.all(runs.map(r => r.stop()));
   });
 
-  it('adds HMR accept code in all JS bundles', async () => {
+  it('adds HMR accept code in main JS bundle', async () => {
     const run = await architect.scheduleTarget(target, { hmr: true });
     runs.push(run);
     const output = await run.result as DevServerBuilderOutput;
     expect(output.success).toBe(true);
-    expect(output.baseUrl).toBe('https://localhost:4200/');
+    expect(output.baseUrl).toBe('http://localhost:4200/');
+
+    const response = await fetch('http://localhost:4200/main.js');
+    expect(await response.text()).toContain('// HMR Accept Code');
+  }, 30000);
 
-    const polyfills = await fetch('https://localhost:4200/polyfills.js');
-    expect(await polyfills.text()).toContain('ngHmrAccept(module);');
+  it('adds HMR accept code for CSS in JS bundles', async () => {
+    const run = await architect.scheduleTarget(target, { hmr: true });
+    runs.push(run);
+    const output = await run.result as DevServerBuilderOutput;
+    expect(output.success).toBe(true);
+    expect(output.baseUrl).toBe('http://localhost:4200/');
 
-    const main = await fetch('https://localhost:4200/main.js');
-    expect(await main.text()).toContain('ngHmrAccept(module);');
+    const response = await fetch('http://localhost:4200/styles.js');
+    expect(await response.text()).toContain('module.hot.accept(undefined, cssReload);');
   }, 30000);
 });

packages/angular_devkit/build_angular/src/dev-server/index.ts

@@ -37,7 +37,6 @@ import { readTsconfig } from '../utils/read-tsconfig';
 import { assertCompatibleAngularVersion } from '../utils/version';
 import { getIndexInputFile, getIndexOutputFile } from '../utils/webpack-browser-config';
 import { addError, addWarning } from '../utils/webpack-diagnostics';
-import { normalizeExtraEntryPoints } from '../webpack/configs';
 import { HmrLoader } from '../webpack/plugins/hmr/hmr-loader';
 import { IndexHtmlWebpackPlugin } from '../webpack/plugins/index-html-webpack-plugin';
 import { createWebpackLoggingCallback } from '../webpack/utils/stats';
@@ -571,26 +570,8 @@ function _addLiveReload(
 
     entryPoints.push(
       'webpack/hot/dev-server',
-      path.join(__dirname, '../webpack/hmr.js'),
     );
 
-    if (browserOptions.styles?.length) {
-      // When HMR is enabled we need to add the css paths as part of the entrypoints
-      // because otherwise no JS bundle will contain the HMR accept code.
-      const normalizedStyles = normalizeExtraEntryPoints(browserOptions.styles, 'styles')
-        .map(style => {
-          let resolvedPath = path.resolve(root, style.input);
-          if (!existsSync(resolvedPath)) {
-            try {
-              resolvedPath = require.resolve(style.input, { paths: [root] });
-            } catch {}
-          }
-
-          return resolvedPath;
-        });
-      entryPoints.push(...normalizedStyles);
-    }
-
     webpackConfig.plugins.push(new webpack.HotModuleReplacementPlugin());
 
     const hmrLoader: webpack.RuleSetRule = {

packages/angular_devkit/build_angular/src/utils/build-options.ts

@@ -46,7 +46,6 @@ export interface BuildOptions {
   bundleDependencies?: boolean;
   externalDependencies?: string[];
   watch?: boolean;
-  hmr?: boolean;
   outputHashing?: string;
   poll?: number;
   deleteOutputPath?: boolean;

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

@@ -235,9 +235,6 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
             buildOptions.extractCss
               ? {
                 loader: MiniCssExtractPlugin.loader,
-                options: {
-                  hmr: buildOptions.hmr,
-                },
               }
               : require.resolve('style-loader'),
             {

yarn.lock

@@ -8069,14 +8069,14 @@ min-indent@^1.0.0:
   resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
   integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==
 
-mini-css-extract-plugin@0.11.3:
-  version "0.11.3"
-  resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.11.3.tgz#15b0910a7f32e62ffde4a7430cfefbd700724ea6"
-  integrity sha512-n9BA8LonkOkW1/zn+IbLPQmovsL0wMb9yx75fMJQZf2X1Zoec9yTZtyMePcyu19wPkmFbzZZA6fLTotpFhQsOA==
+mini-css-extract-plugin@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-1.0.0.tgz#4afb39f3d97b1b92eacb1ac45025416089f831bd"
+  integrity sha512-IsmrPv1nkdSUtFCDrAsuv5kg0k/27sLxfXqSz8vLjnbRKrNgoRdQrUNA4MppawvD+GHLkNP6L1P93Bw50ALkbg==
   dependencies:
-    loader-utils "^1.1.0"
+    loader-utils "^2.0.0"
     normalize-url "1.9.1"
-    schema-utils "^1.0.0"
+    schema-utils "^3.0.0"
     webpack-sources "^1.1.0"
 
 minimalistic-assert@^1.0.0, minimalistic-assert@^1.0.1: