inital work

Author: sokra

.babelrc

@@ -5,7 +5,7 @@
       {
         "useBuiltIns": true,
         "targets": {
-          "node": "4.3"
+          "node": "6.11.5"
         },
         "exclude": [
           "transform-async-to-generator",
@@ -32,4 +32,4 @@
       ]
     }
   }
-}
+}

.gitignore

@@ -4,6 +4,7 @@ npm-debug.log*
 .eslintcache
 /coverage
 /dist
+/js
 /local
 /reports
 /node_modules
@@ -12,4 +13,4 @@ Thumbs.db
 .idea
 .vscode
 *.sublime-project
-*.sublime-workspace
+*.sublime-workspace

jest.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  transformIgnorePatterns: [
+    '/node_modules/',
+    '<rootDir>/dist/',
+  ],
+};

package.json

@@ -33,6 +33,7 @@
     "babel-polyfill": "^6.26.0",
     "babel-preset-env": "^1.6.1",
     "cross-env": "^5.1.3",
+    "css-loader": "^0.28.10",
     "del-cli": "^1.1.0",
     "eslint": "^4.17.0",
     "eslint-config-webpack": "^1.2.5",
@@ -49,16 +50,20 @@
     "dist"
   ],
   "engines": {
-    "node": ">= 4.3 < 5.0.0 || >= 5.10"
+    "node": ">= 6.11.5"
   },
   "peerDependencies": {
-    "webpack": "^2.0.0 || ^3.0.0"
+    "webpack": "^4.0.1"
   },
   "pre-commit": "lint-staged",
   "lint-staged": {
     "*.js": [
       "eslint --fix",
       "git add"
     ]
+  },
+  "dependencies": {
+    "loader-utils": "^1.1.0",
+    "webpack-sources": "^1.1.0"
   }
 }

src/index.js

@@ -1,15 +1,20 @@
 import fs from 'fs';
 import path from 'path';
 import webpack from 'webpack';
+import sources from 'webpack-sources';
+
+const { RawSource, ConcatSource } = sources;
 
 const NS = path.dirname(fs.realpathSync(__filename));
 
-class CssDependency {
-  constructor({ identifier, content, media, sourceMap }) {
+class CssDependency extends webpack.Dependency {
+  constructor({ identifier, content, media, sourceMap }, context) {
+    super();
     this.identifier = identifier;
     this.content = content;
     this.media = media;
     this.sourceMap = sourceMap;
+    this.context = context;
   }
 
   getResourceIdentifier() {
@@ -23,16 +28,35 @@ class CssDependencyTemplate {
 
 class CssModule extends webpack.Module {
   constructor(dependency) {
-    super(NS);
+    super(NS, dependency.context);
     this._identifier = dependency.identifier;
     this.content = dependency.content;
     this.media = dependency.media;
     this.sourceMap = dependency.sourceMap;
   }
 
+  source() {
+    // TODO add webpack support for omitting js source
+    return new RawSource('// extracted by mini-css-extract-plugin');
+  }
+
+  size() {
+    return 0;
+  }
+
   identifier() {
     return `css-module ${this._identifier}`;
   }
+
+  readableIdentifier(requestShortener) {
+    return `css-modules ${requestShortener.shorten(this._identifier)}`;
+  }
+
+  build(options, compilation, resolver, fs, callback) {
+    this.buildInfo = {};
+    this.buildMeta = {};
+    callback();
+  }
 }
 
 class CssModuleFactory {
@@ -42,6 +66,16 @@ class CssModuleFactory {
 }
 
 class MiniCssExtractPlugin {
+  constructor(options) {
+    this.options = Object.assign({
+      filename: '[name].css',
+    }, options);
+    if (!this.options.chunkFilename) {
+      // TODO use webpack conversion style here
+      this.options.chunkFilename = this.options.filename;
+    }
+  }
+
   apply(compiler) {
     compiler.hooks.thisCompilation.tap('mini-css-extract-plugin', (compilation) => {
       compilation.hooks.normalModuleLoader.tap('mini-css-extract-plugin', (lc, m) => {
@@ -52,38 +86,44 @@ class MiniCssExtractPlugin {
             throw new Error(`Exported value was not extracted as an array: ${JSON.stringify(content)}`);
           }
           for (const line of content) {
-            module.addDependency(new CssDependency(line));
+            module.addDependency(new CssDependency(line, m.context));
           }
         };
       });
       compilation.dependencyFactories.set(CssDependency, new CssModuleFactory());
       compilation.dependencyTemplates.set(CssDependency, new CssDependencyTemplate());
-      compilation.mainTemplate.hooks.shouldRenderModuleForJavascript.tap('mini-css-extract-plugin', (module) => {
-        if (module.type === NS) return false;
-        return undefined;
-      });
-      compilation.chunkTemplate.hooks.shouldRenderModuleForJavascript.tap('mini-css-extract-plugin', (module) => {
-        if (module.type === NS) return false;
-        return undefined;
-      });
-      compilation.mainTemplate.hooks.renderManifest.tap('mini-css-extract-plugin', (result, options) => {
-        const chunk = options.chunk;
-        const renderedContent = Array.from(chunk.modulesIterable, m => module[NS]).filter(Boolean);
-        if (renderedContent.length > 0) {
+      compilation.mainTemplate.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(renderedContent),
-            filenameTemplate: filename,
+            render: () => this.renderContentAsset(renderedModules),
+            filenameTemplate: this.options.filename,
             pathOptions: {
-              chunk
+              chunk,
             },
-            identifier: `extract-text-webpack-plugin.${id}.${chunk.id}`
+            identifier: `extract-text-webpack-plugin.${chunk.id}`,
           });
         }
       });
     });
   }
+  renderContentAsset(modules) {
+    modules.sort((a, b) => a.index2 - b.index2);
+    // TODO put @import on top
+    const source = new ConcatSource();
+    for (const m of modules) {
+      source.add(m.content);
+      source.add('\n');
+      if (m.media) {
+        source.prepend(`@media ${m.media} {\n`);
+        source.add('}\n');
+      }
+      return source;
+    }
+    return source;
+  }
 }
 
 MiniCssExtractPlugin.loader = require.resolve('./loader');
 
-module.exports = MiniCssExtractPlugin;
+export default MiniCssExtractPlugin;

src/loader.js

@@ -10,42 +10,41 @@ import LimitChunkCountPlugin from 'webpack/lib/optimize/LimitChunkCountPlugin';
 
 const NS = path.dirname(fs.realpathSync(__filename));
 
-const exec = (code, filename) => {
-  const module = new NativeModule(filename, this);
-  module.paths = NativeModule._nodeModulePaths(this.context); // eslint-disable-line no-underscore-dangle
+const exec = (loaderContext, code, filename) => {
+  const module = new NativeModule(filename, loaderContext);
+  module.paths = NativeModule._nodeModulePaths(loaderContext.context); // eslint-disable-line no-underscore-dangle
   module.filename = filename;
   module._compile(code, filename); // eslint-disable-line no-underscore-dangle
   return module.exports;
 };
 
 const findModuleById = (modules, id) => {
-  for(const module of modules) {
-    if(module.id === id)
-      return module;
+  for (const module of modules) {
+    if (module.id === id) { return module; }
   }
   return null;
-}
+};
 
 export function pitch(request) {
   const query = loaderUtils.getOptions(this) || {};
   const loaders = this.loaders.slice(this.loaderIndex + 1);
   this.addDependency(this.resourcePath);
-  const childFilename = 'extract-text-webpack-plugin-output-filename'; // eslint-disable-line no-path-concat
+  const childFilename = 'mini-css-extract-plugin-output-filename'; // eslint-disable-line no-path-concat
   const publicPath = typeof query.publicPath === 'string' ? query.publicPath : this._compilation.outputOptions.publicPath;
   const outputOptions = {
     filename: childFilename,
     publicPath,
   };
-  const childCompiler = this._compilation.createChildCompiler(`extract-text-webpack-plugin ${NS} ${request}`, outputOptions);
+  const childCompiler = this._compilation.createChildCompiler(`mini-css-extract-plugin ${NS} ${request}`, outputOptions);
   childCompiler.apply(new NodeTemplatePlugin(outputOptions));
   childCompiler.apply(new LibraryTemplatePlugin(null, 'commonjs2'));
   childCompiler.apply(new NodeTargetPlugin());
   childCompiler.apply(new SingleEntryPlugin(this.context, `!!${request}`));
   childCompiler.apply(new LimitChunkCountPlugin({ maxChunks: 1 }));
   // We set loaderContext[NS] = false to indicate we already in
   // a child compiler so we don't spawn another child compilers from there.
-  childCompiler.hooks.thisCompilation.tap((compilation) => {
-    compilation.hooks.normalModuleLoader.tap((loaderContext, module) => {
+  childCompiler.hooks.thisCompilation.tap('mini-css-extract-plugin loader', (compilation) => {
+    compilation.hooks.normalModuleLoader.tap('mini-css-extract-plugin loader', (loaderContext, module) => {
       loaderContext[NS] = false; // eslint-disable-line no-param-reassign
       if (module.request === request) {
         module.loaders = loaders.map((loader) => { // eslint-disable-line no-param-reassign
@@ -90,7 +89,7 @@ export function pitch(request) {
     }
     let text;
     try {
-      text = exec(source, request);
+      text = exec(this, source, request);
       if (!Array.isArray(text)) {
         text = [[null, text]];
       } else {
@@ -112,6 +111,7 @@ export function pitch(request) {
     if (text.locals && typeof resultSource !== 'undefined') {
       resultSource = `module.exports = ${JSON.stringify(text.locals)};`;
     }
+
     return callback(null, resultSource);
   });
 }

test/TestCases.test.js

@@ -0,0 +1,45 @@
+import fs from 'fs';
+import path from 'path';
+import webpack from 'webpack';
+
+describe('TestCases', () => {
+  const casesDirectory = path.resolve(__dirname, 'cases');
+  const outputDirectory = path.resolve(__dirname, '../js');
+  for (const directory of fs.readdirSync(casesDirectory)) {
+    if (!/^(\.|_)/.test(directory)) {
+      // eslint-disable-next-line no-loop-func
+      it(`${directory} should compile to the expected result`, (done) => {
+        const directoryForCase = path.resolve(casesDirectory, directory);
+        const outputDirectoryForCase = path.resolve(outputDirectory, directory);
+        // eslint-disable-next-line import/no-dynamic-require, global-require
+        const webpackConfig = require(path.resolve(directoryForCase, 'webpack.config.js'));
+        webpack(Object.assign({
+          mode: 'none',
+          context: directoryForCase,
+          output: {
+            path: outputDirectoryForCase,
+          },
+        }, webpackConfig), (err, stats) => {
+          if (err) {
+            done(err);
+            return;
+          }
+          done();
+          // eslint-disable-next-line no-console
+          console.log(stats.toString());
+          if (stats.hasErrors()) {
+            done(new Error(stats.toString()));
+            return;
+          }
+          const expectedDirectory = path.resolve(directoryForCase, 'expected');
+          for (const file of fs.readdirSync(expectedDirectory)) {
+            const content = fs.readFileSync(path.resolve(expectedDirectory, file), 'utf-8');
+            const actualContent = fs.readFileSync(path.resolve(outputDirectoryForCase, file), 'utf-8');
+            expect(actualContent).toBeEqual(content);
+          }
+          done();
+        });
+      }, 10000);
+    }
+  }
+});

test/cases/simple/index.js

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

test/cases/simple/style.css

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

test/cases/simple/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',
+    }),
+  ],
+};