test: mini css extract plugin

package.json

@@ -70,6 +70,7 @@
     "jest": "^23.4.0",
     "lint-staged": "^7.2.0",
     "memory-fs": "^0.4.1",
+    "mini-css-extract-plugin": "^0.4.4",
     "sass": "^1.14.3",
     "postcss-loader": "^3.0.0",
     "postcss-preset-env": "^6.0.6",

test/__snapshots__/loader.test.js.snap

@@ -532,6 +532,86 @@ exports.locals = { foo: \\"bar\\", bar: \\"foo\\" };
 
 exports[`loader message api: warnings 1`] = `Array []`;
 
+exports[`loader using together with "MiniCssExtractPlugin": errors 1`] = `Array []`;
+
+exports[`loader using together with "MiniCssExtractPlugin": extracted 1`] = `
+".foo {
+  color: red;
+}
+
+@charset \\"UTF-8\\";
+
+.class {
+  color: red;
+  background: url(5b1f36bc41ab31f5b801d48ba1d65781.png);
+}
+
+.class-duplicate-url {
+  background: url(5b1f36bc41ab31f5b801d48ba1d65781.png);
+}
+
+.u-m\\\\+ {
+  a: b c d;
+}
+
+.grid.\\\\-top {
+  a: b c d;
+}
+
+.u-m\\\\00002b {
+  a: b c d;
+}
+
+.class {
+  content: '\\"\\\\\\\\f10c\\"';
+}
+
+.class {
+  font-family: '微软雅黑';
+}
+
+.class {
+  content: '\\\\e901';
+}
+
+.class {
+  content: \\"\\\\F10C\\"
+}
+
+.class {
+  content: \\"\\\\f10C\\"
+}
+
+.class {
+  content: \\"\\\\F10C \\\\F10D\\"
+}
+
+:root {
+  --foo: 1px;
+  --bar: 2px;
+}
+
+:root {
+  --title-align: center;
+  --sr-only: {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0,0,0,0);
+    white-space: nowrap;
+    clip-path: inset(50%);
+    border: 0;
+  };
+}
+
+
+/*# sourceMappingURL=main.css.map*/"
+`;
+
+exports[`loader using together with "MiniCssExtractPlugin": warnings 1`] = `Array []`;
+
 exports[`loader using together with "postcss-loader" (reuse ast): errors 1`] = `Array []`;
 
 exports[`loader using together with "postcss-loader" (reuse ast): module (evaluated) 1`] = `

test/loader.test.js

@@ -2,6 +2,7 @@ import path from 'path';
 
 import postcss from 'postcss';
 import postcssPresetEnv from 'postcss-preset-env';
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 
 import webpack from './helpers/compiler';
 import evaluated from './helpers/evaluated';
@@ -266,4 +267,45 @@ describe('loader', () => {
     );
     expect(normalizeErrors(stats.compilation.errors)).toMatchSnapshot('errors');
   });
+
+  it('using together with "MiniCssExtractPlugin"', async () => {
+    const config = {
+      rules: [
+        {
+          test: /\.css$/,
+          use: [
+            {
+              loader: MiniCssExtractPlugin.loader,
+            },
+            {
+              loader: path.resolve(__dirname, '../src'),
+              options: {
+                importLoaders: 1,
+              },
+            },
+          ],
+        },
+        {
+          test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
+          use: {
+            loader: 'file-loader',
+          },
+        },
+      ],
+      plugins: [
+        new MiniCssExtractPlugin({
+          // Options similar to the same options in webpackOptions.output
+          // both options are optional
+          filename: '[name].css',
+          chunkFilename: '[id].css',
+        }),
+      ],
+    };
+    const stats = await webpack('basic.js', config);
+    const extracted = stats.compilation.assets['main.css'];
+
+    expect(extracted.source()).toMatchSnapshot('extracted');
+    expect(stats.compilation.warnings).toMatchSnapshot('warnings');
+    expect(stats.compilation.errors).toMatchSnapshot('errors');
+  });
 });