test: loading order (#236)

* fix css files load order mismatch #188

* fix(src): fix sort bug

* feat(test): add test

* test(sorting): add test case which uses the fallback behavior

* fix(sorting): revert change to restore original behavior

This fixes the testcase

Author: ShanaMaid

test/cases/simple-async-load-css-fallback/a.css

@@ -0,0 +1 @@
+body { background: red; }

test/cases/simple-async-load-css-fallback/async-one.js

@@ -0,0 +1,2 @@
+import './c.css';
+import './d.css';

test/cases/simple-async-load-css-fallback/async-two.js

@@ -0,0 +1,2 @@
+import './e.css';
+import './f.css';

test/cases/simple-async-load-css-fallback/b.css

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

test/cases/simple-async-load-css-fallback/c.css

@@ -0,0 +1 @@
+body { background: blue; }

test/cases/simple-async-load-css-fallback/d.css

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

test/cases/simple-async-load-css-fallback/e.css

@@ -0,0 +1 @@
+body { background: purple; }

test/cases/simple-async-load-css-fallback/expected/async-one.css

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

test/cases/simple-async-load-css-fallback/expected/async-two.css

@@ -0,0 +1,4 @@
+body { background: purple; }
+
+body { background: indigo; }
+

test/cases/simple-async-load-css-fallback/expected/main.css

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

test/cases/simple-async-load-css-fallback/f.css

@@ -0,0 +1 @@
+body { background: indigo; }

test/cases/simple-async-load-css-fallback/index.js

@@ -0,0 +1,5 @@
+import './a.css';
+import './b.css';
+import(/* webpackChunkName: 'async-one' */'./async-one');
+import(/* webpackChunkName: 'async-two' */'./async-two');
+

test/cases/simple-async-load-css-fallback/webpack.config.js

@@ -0,0 +1,33 @@
+const Self = require('../../../');
+
+module.exports = {
+  entry: {
+    'main': './index.js',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [
+          Self.loader,
+          'css-loader',
+        ],
+      },
+    ],
+  },
+  plugins: [
+    function() {
+      this.hooks.compilation.tap("Test", compilation => {
+        compilation.hooks.beforeChunkAssets.tap("Test", () => {
+          for (const chunkGroup of compilation.chunkGroups) {
+            // remove getModuleIndex2 to enforce using fallback
+            chunkGroup.getModuleIndex2 = undefined;
+          }
+        });
+      })
+    },
+    new Self({
+      filename: '[name].css',
+    }),
+  ],
+};

test/cases/simple-async-load-css/a.css

@@ -0,0 +1 @@
+body { background: red; }

test/cases/simple-async-load-css/async-one.js

@@ -0,0 +1,2 @@
+import './c.css';
+import './d.css';

test/cases/simple-async-load-css/async-two.js

@@ -0,0 +1,2 @@
+import './e.css';
+import './f.css';

test/cases/simple-async-load-css/b.css

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

test/cases/simple-async-load-css/c.css

@@ -0,0 +1 @@
+body { background: blue; }

test/cases/simple-async-load-css/d.css

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

test/cases/simple-async-load-css/e.css

@@ -0,0 +1 @@
+body { background: purple; }

test/cases/simple-async-load-css/expected/async-one.css

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

test/cases/simple-async-load-css/expected/async-two.css

@@ -0,0 +1,4 @@
+body { background: purple; }
+
+body { background: indigo; }
+

test/cases/simple-async-load-css/expected/main.css

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

test/cases/simple-async-load-css/f.css

@@ -0,0 +1 @@
+body { background: indigo; }

test/cases/simple-async-load-css/index.js

@@ -0,0 +1,5 @@
+import './a.css';
+import './b.css';
+import(/* webpackChunkName: 'async-one' */'./async-one');
+import(/* webpackChunkName: 'async-two' */'./async-two');
+

test/cases/simple-async-load-css/webpack.config.js

@@ -0,0 +1,23 @@
+const Self = require('../../../');
+
+module.exports = {
+  entry: {
+    'main': './index.js',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [
+          Self.loader,
+          'css-loader',
+        ],
+      },
+    ],
+  },
+  plugins: [
+    new Self({
+      filename: '[name].css',
+    }),
+  ],
+};