feat: ability to disable extract async modules, add manual test

Author: lsycxyj

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"

test/manual/index.html

@@ -33,6 +33,7 @@
     <p>Lazy CSS: Must be red, but turn green when <button class="lazy-button">pressing this button</button>.</p>
     <p>But turn orange, when <button class="lazy-button2">pressing this button</button>. Additional clicks have no effect.</p>
     <p>Refresh and press buttons in reverse order: This should turn green instead.</p>
+    <p class="async-disabled">This should turn yellow after pressing "lazy-button" without loading extra css file containing "async-disabled.css".</p>
   </div>
   <div class="test lazy-failure-css">
     <p>Lazy CSS: Turn off the network and <button class="lazy-failure-button">press this button</button>.</p>

test/manual/src/async-disabled.css

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

test/manual/src/lazy.js

@@ -1,3 +1,4 @@
 /* eslint-env browser */
 
 import './lazy.css';
+import './async-disabled.css';

test/manual/webpack.config.js

@@ -11,14 +11,21 @@ module.exports = {
     rules: [
       {
         test: /\.css$/,
-        use: [Self.loader, 'css-loader'],
+        use: ['style-loader', Self.loader, 'css-loader'],
       },
     ],
   },
   plugins: [
     new Self({
       filename: '[name].css',
       chunkFilename: '[contenthash].css',
+      disableAsync({ module }) {
+        let ret = false;
+        if (module.content.indexOf('async-disabled') > -1) {
+          ret = true;
+        }
+        return ret;
+      },
     }),
   ],
   devServer: {