docs: update (#820)

Author: alexander-akait

README.md

@@ -753,8 +753,6 @@ module.exports = {
         styles: {
           name: "styles",
           type: "css/mini-extract",
-          // For webpack@4
-          // test: /\.css$/,
           chunks: "all",
           enforce: true,
         },
@@ -789,24 +787,6 @@ This also prevents the CSS duplication issue one had with the ExtractTextPlugin.
 const path = require("path");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
-function recursiveIssuer(m, c) {
-  const issuer = c.moduleGraph.getIssuer(m);
-  // For webpack@4 issuer = m.issuer
-
-  if (issuer) {
-    return recursiveIssuer(issuer, c);
-  }
-
-  const chunks = c.chunkGraph.getModuleChunks(m);
-  // For webpack@4 chunks = m._chunks
-
-  for (const chunk of chunks) {
-    return chunk.name;
-  }
-
-  return false;
-}
-
 module.exports = {
   entry: {
     foo: path.resolve(__dirname, "src/foo"),
@@ -816,19 +796,19 @@ module.exports = {
     splitChunks: {
       cacheGroups: {
         fooStyles: {
+          type: "css/mini-extract",
           name: "styles_foo",
-          test: (m, c, entry = "foo") =>
-            m.constructor.name === "CssModule" &&
-            recursiveIssuer(m, c) === entry,
-          chunks: "all",
+          chunks: (chunk) => {
+            return chunk.name === "foo";
+          },
           enforce: true,
         },
         barStyles: {
+          type: "css/mini-extract",
           name: "styles_bar",
-          test: (m, c, entry = "bar") =>
-            m.constructor.name === "CssModule" &&
-            recursiveIssuer(m, c) === entry,
-          chunks: "all",
+          chunks: (chunk) => {
+            return chunk.name === "bar";
+          },
           enforce: true,
         },
       },

package-lock.json

@@ -66,6 +66,8 @@ __webpack_require__.r(__webpack_exports__);
 /******/ 	(() => {
 /******/ 		// This function allow to reference all chunks
 /******/ 		__webpack_require__.miniCssF = (chunkId) => {
+/******/ 			// return url for filenames not based on template
+/******/ 			if (chunkId === 1) return "" + __webpack_require__.h() + ".css";
 /******/ 			// return url for filenames based on template
 /******/ 			return "" + chunkId + "." + __webpack_require__.h() + ".css";
 /******/ 		};

test/cases/chunkFilename-fullhash/expected/webpack-5-importModule/main.js

@@ -66,6 +66,8 @@ __webpack_require__.r(__webpack_exports__);
 /******/ 	(() => {
 /******/ 		// This function allow to reference all chunks
 /******/ 		__webpack_require__.miniCssF = (chunkId) => {
+/******/ 			// return url for filenames not based on template
+/******/ 			if (chunkId === 1) return "" + __webpack_require__.h() + ".css";
 /******/ 			// return url for filenames based on template
 /******/ 			return "" + chunkId + "." + __webpack_require__.h() + ".css";
 /******/ 		};

test/cases/chunkFilename-fullhash/expected/webpack-5/main.js

@@ -79,7 +79,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 // eslint-disable-next-line no-console
-console.log({ css: _style_css__WEBPACK_IMPORTED_MODULE_0__.default, aClass: _style_css__WEBPACK_IMPORTED_MODULE_0__.aClass, bClass: _style_css__WEBPACK_IMPORTED_MODULE_0__.bClass, cClass: _style_css__WEBPACK_IMPORTED_MODULE_0__.cClass });
+console.log({ css: _style_css__WEBPACK_IMPORTED_MODULE_0__["default"], aClass: _style_css__WEBPACK_IMPORTED_MODULE_0__.aClass, bClass: _style_css__WEBPACK_IMPORTED_MODULE_0__.bClass, cClass: _style_css__WEBPACK_IMPORTED_MODULE_0__.cClass });
 
 })();
 

test/cases/es-named-export-output-module/expected/main.mjs

@@ -81,7 +81,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 // eslint-disable-next-line no-console
-console.log({ css: _style_css__WEBPACK_IMPORTED_MODULE_0__.default, aClass: _style_css__WEBPACK_IMPORTED_MODULE_0__.aClass, bClass: _style_css__WEBPACK_IMPORTED_MODULE_0__.bClass, cClass: _style_css__WEBPACK_IMPORTED_MODULE_0__.cClass });
+console.log({ css: _style_css__WEBPACK_IMPORTED_MODULE_0__["default"], aClass: _style_css__WEBPACK_IMPORTED_MODULE_0__.aClass, bClass: _style_css__WEBPACK_IMPORTED_MODULE_0__.bClass, cClass: _style_css__WEBPACK_IMPORTED_MODULE_0__.cClass });
 
 })();
 

test/cases/es-named-export/expected/main.js

@@ -365,7 +365,7 @@ module.exports = function (urlString) {
 /******/ 		// This function allow to reference all chunks
 /******/ 		__webpack_require__.miniCssF = (chunkId) => {
 /******/ 			// return url for filenames based on template
-/******/ 			return undefined;
+/******/ 			return "" + "main" + ".css";
 /******/ 		};
 /******/ 	})();
 /******/ 	

test/cases/hmr/expected/main.js

@@ -0,0 +1,3 @@
+.class_a {
+  background: red;
+}

test/cases/split-chunks-based-on-entry-with-common-chunk-and-inside-dir/a.css

@@ -0,0 +1,5 @@
+import "./a.css";
+
+import(/* webpackChunkName: "common" */ "./common");
+
+import(/* webpackChunkName: "comp1" */ "./components/comp1");

test/cases/split-chunks-based-on-entry-with-common-chunk-and-inside-dir/a.js

@@ -0,0 +1,3 @@
+.class_b {
+  background: red;
+}

test/cases/split-chunks-based-on-entry-with-common-chunk-and-inside-dir/b.css

@@ -0,0 +1,5 @@
+import "./b.css";
+
+import(/* webpackChunkName: "common" */ "./common");
+
+import(/* webpackChunkName: "comp2" */ "./components/comp2");

test/cases/split-chunks-based-on-entry-with-common-chunk-and-inside-dir/b.js

@@ -0,0 +1,3 @@
+.common {
+  color: red;
+}

test/cases/split-chunks-based-on-entry-with-common-chunk-and-inside-dir/common.css

@@ -0,0 +1 @@
+import "./common.css";

test/cases/split-chunks-based-on-entry-with-common-chunk-and-inside-dir/common.js

@@ -0,0 +1,3 @@
+body {
+  background-color: yellow;
+}

test/cases/split-chunks-based-on-entry-with-common-chunk-and-inside-dir/components/comp1.css

@@ -0,0 +1,3 @@
+import "./comp1.css";
+
+import(/* webpackChunkName: "common" */ "../common");

test/cases/split-chunks-based-on-entry-with-common-chunk-and-inside-dir/components/comp1.js

@@ -0,0 +1,3 @@
+body {
+  background-color: green;
+}

test/cases/split-chunks-based-on-entry-with-common-chunk-and-inside-dir/components/comp2.css

@@ -0,0 +1,3 @@
+import "./comp2.css";
+
+import(/* webpackChunkName: "common" */ "../common");

test/cases/split-chunks-based-on-entry-with-common-chunk-and-inside-dir/components/comp2.js

@@ -0,0 +1,4 @@
+.class_a {
+  background: red;
+}
+

test/cases/split-chunks-based-on-entry-with-common-chunk-and-inside-dir/expected/a/index.css

@@ -0,0 +1,4 @@
+.class_b {
+  background: red;
+}
+

test/cases/split-chunks-based-on-entry-with-common-chunk-and-inside-dir/expected/b/index.css

@@ -0,0 +1,4 @@
+.common {
+  color: red;
+}
+

test/cases/split-chunks-based-on-entry-with-common-chunk-and-inside-dir/expected/common/index.css

@@ -0,0 +1,4 @@
+body {
+  background-color: yellow;
+}
+

test/cases/split-chunks-based-on-entry-with-common-chunk-and-inside-dir/expected/comp1/index.css

@@ -0,0 +1,4 @@
+body {
+  background-color: green;
+}
+

test/cases/split-chunks-based-on-entry-with-common-chunk-and-inside-dir/expected/comp2/index.css

@@ -0,0 +1,42 @@
+import Self from "../../../src";
+
+module.exports = {
+  entry: {
+    a: "./a.js",
+    b: "./b.js",
+  },
+  output: {
+    filename: "[name]/index.js",
+  },
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [Self.loader, "css-loader"],
+      },
+    ],
+  },
+  optimization: {
+    splitChunks: {
+      cacheGroups: {
+        aStyles: {
+          type: "css/mini-extract",
+          name: "a",
+          chunks: (chunk) => chunk.name === "a",
+          enforce: true,
+        },
+        bStyles: {
+          type: "css/mini-extract",
+          name: "b",
+          chunks: (chunk) => chunk.name === "b",
+          enforce: true,
+        },
+      },
+    },
+  },
+  plugins: [
+    new Self({
+      filename: "[name]/index.css",
+    }),
+  ],
+};

test/cases/split-chunks-based-on-entry-with-common-chunk-and-inside-dir/webpack.config.js

@@ -0,0 +1,3 @@
+.class_a {
+  background: red;
+}

test/cases/split-chunks-based-on-entry-with-common-chunk/a.css

@@ -0,0 +1,5 @@
+import "./a.css";
+
+import(/* webpackChunkName: "common" */ "./common");
+
+import(/* webpackChunkName: "comp1" */ "./components/comp1");

test/cases/split-chunks-based-on-entry-with-common-chunk/a.js

@@ -0,0 +1,3 @@
+.class_b {
+  background: red;
+}

test/cases/split-chunks-based-on-entry-with-common-chunk/b.css

@@ -0,0 +1,5 @@
+import "./b.css";
+
+import(/* webpackChunkName: "common" */ "./common");
+
+import(/* webpackChunkName: "comp2" */ "./components/comp2");

test/cases/split-chunks-based-on-entry-with-common-chunk/b.js

@@ -0,0 +1,3 @@
+.common {
+  color: red;
+}

test/cases/split-chunks-based-on-entry-with-common-chunk/common.css

@@ -0,0 +1 @@
+import "./common.css";