Feature: Disable Extracting Specified CSS Module from Chunks

README.md

@@ -343,6 +343,29 @@ module.exports = {
 };
 ```
 
+#### Disable Extracting Specified CSS from Chunks
+
+You may disable extracting css from all chunks with `disableExtract` option.
+
+```javascript
+const miniCssExtractPlugin = new MiniCssExtractPlugin({
+  disableExtract: true,
+});
+```
+
+You may also disable extracting css modules programmatically by passing a function.
+
+```javascript
+const miniCssExtractPlugin = new MiniCssExtractPlugin({
+  disableExtract({ module, isAsync }) {
+    // Do whatever you want. Disable by content size for example:
+    // return module.content.length < 10 * 1024;
+    // Or disable extracting from all async chunks
+    return isAsync;
+  },
+});
+```
+
 #### Module Filename Option
 
 With the `moduleFilename` option you can use chunk data to customize the filename. This is particularly useful when dealing with multiple entry points and wanting to get more control out of the filename for a given entry point/chunk. In the example below, we'll use `moduleFilename` to output the generated css into a different directory.

package.json

@@ -72,6 +72,7 @@
     "npm-run-all": "^4.1.5",
     "prettier": "^1.18.2",
     "standard-version": "^6.0.1",
+    "style-loader": "^0.23.1",
     "webpack": "^4.35.3",
     "webpack-cli": "^3.3.6",
     "webpack-dev-server": "^3.7.2"

src/index.js

@@ -19,6 +19,16 @@ const REGEXP_NAME = /\[name\]/i;
 const REGEXP_PLACEHOLDERS = /\[(name|id|chunkhash)\]/g;
 const DEFAULT_FILENAME = '[name].css';
 
+function isInitialOrHasNoParents(chunk) {
+  let parentCount = 0;
+
+  for (const chunkGroup of chunk.groupsIterable) {
+    parentCount += chunkGroup.getNumberOfParents();
+  }
+
+  return chunk.isOnlyInitial() || parentCount === 0;
+}
+
 class CssDependency extends webpack.Dependency {
   constructor(
     { identifier, content, media, sourceMap },
@@ -148,6 +158,12 @@ class MiniCssExtractPlugin {
 
   apply(compiler) {
     compiler.hooks.thisCompilation.tap(pluginName, (compilation) => {
+      const moduleToBeRebuild = new Set();
+      // eslint-disable-next-line no-param-reassign
+      compilation[MODULE_TYPE] = {
+        moduleToBeRebuild,
+      };
+
       compilation.hooks.normalModuleLoader.tap(pluginName, (lc, m) => {
         const loaderContext = lc;
         const module = m;
@@ -170,6 +186,10 @@ class MiniCssExtractPlugin {
             identifierCountMap.set(line.identifier, count + 1);
           }
         };
+
+        loaderContext[`${MODULE_TYPE}/disableExtract`] = () => {
+          return !!module[`${MODULE_TYPE}/disableExtract`];
+        };
       });
 
       compilation.dependencyFactories.set(
@@ -186,7 +206,8 @@ class MiniCssExtractPlugin {
         pluginName,
         (result, { chunk }) => {
           const renderedModules = Array.from(chunk.modulesIterable).filter(
-            (module) => module.type === MODULE_TYPE
+            (module) =>
+              module.type === MODULE_TYPE && !moduleToBeRebuild.has(module)
           );
 
           if (renderedModules.length > 0) {
@@ -215,7 +236,8 @@ class MiniCssExtractPlugin {
         pluginName,
         (result, { chunk }) => {
           const renderedModules = Array.from(chunk.modulesIterable).filter(
-            (module) => module.type === MODULE_TYPE
+            (module) =>
+              module.type === MODULE_TYPE && !moduleToBeRebuild.has(module)
           );
 
           if (renderedModules.length > 0) {
@@ -283,7 +305,7 @@ class MiniCssExtractPlugin {
       const { mainTemplate } = compilation;
 
       mainTemplate.hooks.localVars.tap(pluginName, (source, chunk) => {
-        const chunkMap = this.getCssChunkObject(chunk);
+        const chunkMap = this.getCssChunkObject(chunk, compilation);
 
         if (Object.keys(chunkMap).length > 0) {
           return Template.asString([
@@ -304,7 +326,7 @@ class MiniCssExtractPlugin {
       mainTemplate.hooks.requireEnsure.tap(
         pluginName,
         (source, chunk, hash) => {
-          const chunkMap = this.getCssChunkObject(chunk);
+          const chunkMap = this.getCssChunkObject(chunk, compilation);
 
           if (Object.keys(chunkMap).length > 0) {
             const chunkMaps = chunk.getChunkMaps();
@@ -433,17 +455,69 @@ class MiniCssExtractPlugin {
           return source;
         }
       );
+
+      compilation.hooks.optimizeTree.tapAsync(
+        pluginName,
+        (chunks, modules, callback) => {
+          const promises = [];
+
+          for (const chunk of chunks) {
+            const isAsync = !isInitialOrHasNoParents(chunk);
+            // eslint-disable-next-line no-underscore-dangle
+            for (const module of chunk._modules) {
+              if (module.type === MODULE_TYPE) {
+                if (this.shouldDisableExtract({ module, isAsync })) {
+                  moduleToBeRebuild.add(module);
+                }
+              }
+            }
+          }
+
+          for (const currentModuleToBeRebuild of moduleToBeRebuild) {
+            const { issuer } = currentModuleToBeRebuild;
+            if (!issuer[`${MODULE_TYPE}/disableExtract`]) {
+              issuer[`${MODULE_TYPE}/disableExtract`] = true;
+              promises.push(
+                new Promise((resolve) => {
+                  compilation.rebuildModule(issuer, (err) => {
+                    if (err) {
+                      compilation.errors.push(err);
+                    }
+                    resolve();
+                  });
+                })
+              );
+            }
+          }
+
+          Promise.all(promises).then(() => callback());
+        }
+      );
     });
   }
 
-  getCssChunkObject(mainChunk) {
+  shouldDisableExtract({ module, isAsync }) {
+    const { disableExtract } = this.options;
+    let shouldDisable = false;
+    if (disableExtract === true) {
+      shouldDisable = true;
+    } else if (typeof disableExtract === 'function') {
+      shouldDisable = disableExtract({ module, isAsync });
+    }
+
+    return shouldDisable;
+  }
+
+  getCssChunkObject(mainChunk, compilation) {
     const obj = {};
 
     for (const chunk of mainChunk.getAllAsyncChunks()) {
       for (const module of chunk.modulesIterable) {
         if (module.type === MODULE_TYPE) {
-          obj[chunk.id] = 1;
-          break;
+          if (!compilation[MODULE_TYPE].moduleToBeRebuild.has(module)) {
+            obj[chunk.id] = 1;
+            break;
+          }
         }
       }
     }