Feature: Disable Extracting Specified CSS Module from Chunks

README.md

@@ -499,7 +499,22 @@ module.exports = {
 };
 ```
 
-### Module Filename Option
+### Disable Extracting Specified CSS from Chunks
+
+You may 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

@@ -74,6 +74,7 @@
     "npm-run-all": "^4.1.5",
     "prettier": "^1.19.1",
     "standard-version": "^7.0.1",
+    "style-loader": "^0.23.1",
     "webpack": "^4.41.4",
     "webpack-cli": "^3.3.6",
     "webpack-dev-server": "^3.7.2"

src/index.js

@@ -24,6 +24,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 CssDependencyTemplate {
   apply() {}
 }
@@ -129,6 +139,20 @@ class MiniCssExtractPlugin {
 
   apply(compiler) {
     compiler.hooks.thisCompilation.tap(pluginName, (compilation) => {
+      let 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;
+        loaderContext[`${MODULE_TYPE}/disableExtract`] = () => {
+          return !!module[`${MODULE_TYPE}/disableExtract`];
+        };
+      });
+
       compilation.dependencyFactories.set(
         CssDependency,
         new CssModuleFactory()
@@ -390,9 +414,65 @@ class MiniCssExtractPlugin {
           return source;
         }
       );
+
+      compilation.hooks.optimizeTree.tapAsync(
+        pluginName,
+        (chunks, modules, callback) => {
+          const promises = [];
+
+          for (const chunk of chunks) {
+            const isAsync = !isInitialOrHasNoParents(chunk);
+            for (const module of chunk.modulesIterable) {
+              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());
+        }
+      );
+
+      // Trigger seal again if there are modules to be rebuilt
+      compilation.hooks.needAdditionalSeal.tap(pluginName, () => {
+        if (moduleToBeRebuild.size > 0) {
+          moduleToBeRebuild = new Set();
+          return true;
+        }
+        return false;
+      });
     });
   }
 
+  shouldDisableExtract({ module, isAsync }) {
+    const { disableExtract } = this.options;
+    let shouldDisable = false;
+    if (typeof disableExtract === 'function') {
+      shouldDisable = disableExtract({ module, isAsync });
+    }
+
+    return shouldDisable;
+  }
+
   getCssChunkObject(mainChunk) {
     const obj = {};
 

src/loader.js

@@ -14,6 +14,7 @@ import CssDependency from './CssDependency';
 
 import schema from './loader-options.json';
 
+const MODULE_TYPE = 'css/mini-extract';
 const pluginName = 'mini-css-extract-plugin';
 
 function hotLoader(content, context) {
@@ -66,6 +67,10 @@ export function pitch(request) {
 
   this.addDependency(this.resourcePath);
 
+  if (this[`${MODULE_TYPE}/disableExtract`]()) {
+    return;
+  }
+
   const childFilename = '*';
   const publicPath =
     typeof options.publicPath === 'string'
@@ -223,4 +228,6 @@ export function pitch(request) {
   });
 }
 
-export default function() {}
+export default function(source) {
+  return source;
+}

test/cases/disable-extract-func/async-import.css

@@ -0,0 +1,3 @@
+.async-import {
+  background: black;
+}

test/cases/disable-extract-func/async.css

@@ -0,0 +1,3 @@
+.async {
+  background: blue;
+}

test/cases/disable-extract-func/async.js

@@ -0,0 +1,9 @@
+import './in-async';
+import './in-async2.css';
+import './in-async.css';
+import './both-async.css';
+
+import './both-page-async-disabled.css';
+import './both-page-async.css';
+
+// console.log('async.js');

test/cases/disable-extract-func/async2.js

@@ -0,0 +1,5 @@
+import './both-page-async-disabled.css';
+import './both-page-async.css';
+import './is-async1.css';
+
+// console.log('async2.js');

test/cases/disable-extract-func/both-async.css

@@ -0,0 +1,5 @@
+@import 'shared.css';
+
+.both-async {
+  color: red;
+}

test/cases/disable-extract-func/both-page-async-disabled.css

@@ -0,0 +1,3 @@
+.both-page-async-disabled {
+  color: yellow;
+}

test/cases/disable-extract-func/both-page-async.css

@@ -0,0 +1,3 @@
+.both-page-async {
+  color: cyan;
+}

test/cases/disable-extract-func/expected/1.css

@@ -0,0 +1,12 @@
+.async-import {
+  background: black;
+}
+
+.in-async-2 {
+  background: green;
+}
+
+.both-page-async {
+  color: cyan;
+}
+