more test cases and better naming

Author: sokra

.eslintignore

@@ -1,2 +1,3 @@
 /node_modules
-/dist
+/dist
+/test/cases

.gitignore

@@ -4,7 +4,7 @@ npm-debug.log*
 .eslintcache
 /coverage
 /dist
-/js
+/test/js
 /local
 /reports
 /node_modules

jest.config.js

@@ -3,4 +3,7 @@ module.exports = {
     '/node_modules/',
     '<rootDir>/dist/',
   ],
+  watchPathIgnorePatterns: [
+    '<rootDir>/test/js',
+  ],
 };

src/index.js

@@ -18,7 +18,7 @@ class CssDependency extends webpack.Dependency {
   }
 
   getResourceIdentifier() {
-    return `cssmodule${this.identifier}`;
+    return `css-module-${this.identifier}`;
   }
 }
 
@@ -45,14 +45,14 @@ class CssModule extends webpack.Module {
   }
 
   identifier() {
-    return `css-module ${this._identifier}`;
+    return `css ${this._identifier}`;
   }
 
   readableIdentifier(requestShortener) {
-    return `css-modules ${requestShortener.shorten(this._identifier)}`;
+    return `css ${requestShortener.shorten(this._identifier)}`;
   }
 
-  build(options, compilation, resolver, fs, callback) {
+  build(options, compilation, resolver, fileSystem, callback) {
     this.buildInfo = {};
     this.buildMeta = {};
     callback();
@@ -101,7 +101,20 @@ class MiniCssExtractPlugin {
             pathOptions: {
               chunk,
             },
-            identifier: `extract-text-webpack-plugin.${chunk.id}`,
+            identifier: `mini-css-extract-plugin.${chunk.id}`,
+          });
+        }
+      });
+      compilation.chunkTemplate.hooks.renderManifest.tap('mini-css-extract-plugin', (result, { chunk }) => {
+        const renderedModules = Array.from(chunk.modulesIterable).filter(module => module.type === NS);
+        if (renderedModules.length > 0) {
+          result.push({
+            render: () => this.renderContentAsset(renderedModules),
+            filenameTemplate: this.options.chunkFilename,
+            pathOptions: {
+              chunk,
+            },
+            identifier: `mini-css-extract-plugin.${chunk.id}`,
           });
         }
       });
@@ -112,13 +125,14 @@ class MiniCssExtractPlugin {
     // TODO put @import on top
     const source = new ConcatSource();
     for (const m of modules) {
+      if (m.media) {
+        source.add(`@media ${m.media} {\n`);
+      }
       source.add(m.content);
       source.add('\n');
       if (m.media) {
-        source.prepend(`@media ${m.media} {\n`);
         source.add('}\n');
       }
-      return source;
     }
     return source;
   }

test/TestCases.test.js

@@ -4,7 +4,7 @@ import webpack from 'webpack';
 
 describe('TestCases', () => {
   const casesDirectory = path.resolve(__dirname, 'cases');
-  const outputDirectory = path.resolve(__dirname, '../js');
+  const outputDirectory = path.resolve(__dirname, 'js');
   for (const directory of fs.readdirSync(casesDirectory)) {
     if (!/^(\.|_)/.test(directory)) {
       // eslint-disable-next-line no-loop-func
@@ -26,9 +26,16 @@ describe('TestCases', () => {
           }
           done();
           // eslint-disable-next-line no-console
-          console.log(stats.toString());
+          console.log(stats.toString({
+            context: path.resolve(__dirname, '..'),
+            chunks: true,
+            chunkModules: true,
+            modules: false,
+          }));
           if (stats.hasErrors()) {
-            done(new Error(stats.toString()));
+            done(new Error(stats.toString({
+              context: path.resolve(__dirname, '..'),
+            })));
             return;
           }
           const expectedDirectory = path.resolve(directoryForCase, 'expected');

test/cases/nested/a.css

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

test/cases/nested/b.css

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

test/cases/nested/component.css

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

test/cases/nested/component.js

@@ -0,0 +1 @@
+import './component.css';

test/cases/nested/index.js

@@ -0,0 +1,3 @@
+import './a.css';
+import './component';
+import './b.css';

test/cases/nested/webpack.config.js

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

test/cases/simple-async/async.css

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

test/cases/simple-async/async.js

@@ -0,0 +1 @@
+import './in-async.css';

test/cases/simple-async/in-async.css

@@ -0,0 +1 @@
+.in-async { background: green; }

test/cases/simple-async/index.js

@@ -0,0 +1,5 @@
+import './main.css';
+
+import('./async');
+
+import('./async.css');

test/cases/simple-async/main.css

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

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

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

test/cases/simple-multiple/a.css

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

test/cases/simple-multiple/b.css

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

test/cases/simple-multiple/index.js

@@ -0,0 +1,2 @@
+import './a.css';
+import './b.css';

test/cases/simple-multiple/webpack.config.js

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