Merge pull request #6 from metalabdesign/fix-source-maps

Fix previous source map not being used correctly.
bootstarted · Jun 7, 2016 · a788847 · a788847
2 parents 0affbfb + 2eda332
commit a788847
Show file tree

Hide file tree

Showing 10 changed files with 145 additions and 47 deletions.
diff --git a/example/index.css → example/basic/index.css b/example/index.css → example/basic/index.css
diff --git a/example/index.js → example/basic/index.js b/example/index.js → example/basic/index.js
diff --git a/example/webpack.config.js → example/basic/webpack.config.js b/example/webpack.config.js → example/basic/webpack.config.js
@@ -1,5 +1,5 @@
 var ExtractTextPlugin = require('extract-text-webpack-plugin');
-var CSSSplitWebpackPlugin = require('../').default;
+var CSSSplitWebpackPlugin = require('../../').default;
 
 module.exports = {
   entry: './index.js',
@@ -15,6 +15,7 @@ module.exports = {
       loader: ExtractTextPlugin.extract('style-loader', 'css-loader'),
     }],
   },
+  devtool: 'source-map',
   plugins: [
     new ExtractTextPlugin("styles.css"),
     new CSSSplitWebpackPlugin({size: 3, imports: true}),

diff --git a/example/less/index.html b/example/less/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>LESS Example</title>
+    <link rel="stylesheet" href="./dist/styles-1.css">
+    <link rel="stylesheet" href="./dist/styles-2.css">
+  </head>
+  <body>
+    <div class="foo">foo</div>
+    <div class="bar">bar</div>
+    <div class="baz">baz</div>
+    <div class="qux">qux</div>
+  </body>
+</html>
diff --git a/example/less/index.js b/example/less/index.js
@@ -0,0 +1 @@
+require('./index.less');
diff --git a/example/less/index.less b/example/less/index.less
@@ -0,0 +1,20 @@
+@green: green;
+@red: red;
+@yellow: yellow;
+@blue: blue;
+
+.foo {
+  color: @green;
+}
+
+.bar {
+  color: @red;
+}
+
+.baz {
+  color: @yellow;
+}
+
+.qux {
+  color: @blue;
+}
diff --git a/example/less/webpack.config.js b/example/less/webpack.config.js
@@ -0,0 +1,25 @@
+var ExtractTextPlugin = require('extract-text-webpack-plugin');
+var CSSSplitWebpackPlugin = require('../../').default;
+
+module.exports = {
+  entry: './index.js',
+  context: __dirname,
+  output: {
+    path: __dirname + '/dist',
+    publicPath: '/foo',
+    filename: 'bundle.js',
+  },
+  module: {
+    loaders: [{
+      test: /\.less$/,
+      loader: ExtractTextPlugin.extract(
+        'css?-url&-autoprefixer&sourceMap!less?sourceMap'
+      ),
+    }],
+  },
+  devtool: 'source-map',
+  plugins: [
+    new ExtractTextPlugin("styles.css"),
+    new CSSSplitWebpackPlugin({size: 3}),
+  ],
+};
diff --git a/package.json b/package.json
@@ -19,6 +19,7 @@
     "adana-cli": "^0.1.1",
     "adana-dump": "^0.1.0",
     "adana-format-lcov": "^0.1.1",
+    "autoprefixer-loader": "^3.2.0",
     "babel-cli": "^6.7.7",
     "babel-core": "^6.7.7",
     "babel-preset-metalab": "^0.2.1",
@@ -30,9 +31,12 @@
     "eslint-plugin-import": "^1.6.0",
     "eslint-plugin-react": "^4.2.3",
     "extract-text-webpack-plugin": "^1.0.1",
+    "less": "^2.7.1",
+    "less-loader": "^2.2.3",
     "memory-fs": "^0.3.0",
     "mocha": "^2.4.5",
     "style-loader": "^0.13.1",
+    "url-loader": "^0.5.7",
     "webpack": "^1.13.0"
   },
   "dependencies": {

diff --git a/src/index.js b/src/index.js
@@ -104,20 +104,10 @@ export default class CSSSplitWebpackPlugin {
       file: key,
       index: i,
     });
-    return postcss([chunk({
-      ...this.options,
-      result: (i) => {
-        return {
-          to: name(i),
-          from: key,
-          map: {
-            inline: false,
-            prev: input.map,
-          },
-        };
+    return postcss([chunk(this.options)]).process(input.source, {
+      map: {
+        prev: input.map,
       },
-    })]).process(input.source, {
-      from: key,
     }).then((result) => {
       return Promise.resolve({
         file: key,

diff --git a/test/spec/index.spec.js b/test/spec/index.spec.js
@@ -5,9 +5,12 @@ import path from 'path';
 import MemoryFileSystem from 'memory-fs';
 import {expect} from 'chai';
 
-const config = (options) => {
+const basic = path.join('.', 'basic', 'index.js');
+const less = path.join('.', 'less', 'index.js');
+
+const config = (options, entry = basic, extra) => {
   return {
-    entry: './index.js',
+    entry: path.join(__dirname, '..', '..', 'example', entry),
     context: path.join(__dirname, '..', '..', 'example'),
     output: {
       path: path.join(__dirname, 'dist'),
@@ -17,75 +20,114 @@ const config = (options) => {
     module: {
       loaders: [{
         test: /\.css$/,
-        loader: ExtractTextPlugin.extract('style-loader', 'css-loader'),
+        loader: ExtractTextPlugin.extract(
+          'style-loader',
+          'css-loader?sourceMap'
+        ),
+      }, {
+        test: /\.less$/,
+        loader: ExtractTextPlugin.extract(
+          'css?-url&-autoprefixer&sourceMap!less?sourceMap'
+        ),
       }],
     },
+    devtool: 'source-map',
     plugins: [
       new ExtractTextPlugin('styles.css'),
       new CSSSplitWebpackPlugin(options),
     ],
+    ...extra,
   };
 };
 
-const webpack = (options) => {
-  const compiler = _webpack(config(options));
-  compiler.fs = new MemoryFileSystem();
+const webpack = (options, inst, extra) => {
+  const configuration = config(options, inst, extra);
+  const compiler = _webpack(configuration);
+  compiler.outputFileSystem = new MemoryFileSystem();
   return new Promise((resolve) => {
-    compiler.run((err, stats) => {
+    compiler.run((err, _stats) => {
       expect(err).to.be.null;
-      resolve(stats.toJson());
+      const stats = _stats.toJson();
+      const files = {};
+      stats.assets.forEach((asset) => {
+        files[asset.name] = compiler.outputFileSystem.readFileSync(
+          path.join(configuration.output.path, asset.name)
+        );
+      });
+      resolve({stats, files});
     });
   });
 };
 
 describe('CSSSplitWebpackPlugin', () => {
-  it('should split files when needed', () => {
-    return webpack({size: 3, imports: true}).then((stats) => {
+  it('should split files when needed', () =>
+    webpack({size: 3, imports: true}).then(({stats}) => {
       expect(stats).to.not.be.null;
       expect(stats.assetsByChunkName).to.have.property('main')
         .to.contain('styles-2.css');
-    });
-  });
-  it('should ignore files that do not need splitting', () => {
-    return webpack({size: 10, imports: true}).then((stats) => {
+    })
+  );
+  it('should ignore files that do not need splitting', () =>
+    webpack({size: 10, imports: true}).then(({stats}) => {
       expect(stats).to.not.be.null;
       expect(stats.assetsByChunkName).to.have.property('main')
         .to.not.contain('styles-2.css');
-    });
-  });
-  it('should generate an import file when requested', () => {
-    return webpack({size: 3, imports: true}).then((stats) => {
+    })
+  );
+  it('should generate an import file when requested', () =>
+    webpack({size: 3, imports: true}).then(({stats}) => {
       expect(stats).to.not.be.null;
       expect(stats.assetsByChunkName).to.have.property('main')
         .to.contain('styles.css');
-    });
-  });
-  it('should remove the original asset when splitting', () => {
-    return webpack({size: 3, imports: false}).then((stats) => {
+    })
+  );
+  it('should remove the original asset when splitting', () =>
+    webpack({size: 3, imports: false}).then(({stats}) => {
       expect(stats).to.not.be.null;
       expect(stats.assetsByChunkName).to.have.property('main')
         .to.not.contain('styles.css');
-    });
-  });
-  it('should allow customization of import name', () => {
-    return webpack({size: 3, imports: 'potato.css'}).then((stats) => {
+    })
+  );
+  it('should allow customization of import name', () =>
+    webpack({size: 3, imports: 'potato.css'}).then(({stats}) => {
       expect(stats).to.not.be.null;
       expect(stats.assetsByChunkName).to.have.property('main')
         .to.contain('potato.css');
-    });
-  });
-  it('should allow preservation of the original unsplit file', () => {
-    return webpack({size: 3, imports: false, preserve: true}).then((stats) => {
+    })
+  );
+  it('should allow preservation of the original unsplit file', () =>
+    webpack({size: 3, imports: false, preserve: true}).then(({stats}) => {
       expect(stats).to.not.be.null;
       expect(stats.assetsByChunkName).to.have.property('main')
         .to.contain('styles.css');
-    });
-  });
+    })
+  );
   it('should give sensible names by default', () => {
-    return webpack({size: 3, imports: true, preserve: true}).then((stats) => {
+    return webpack({size: 3, imports: true, preserve: true}).then(({stats}) => {
       expect(stats).to.not.be.null;
       expect(stats.assetsByChunkName).to.have.property('main')
         .to.contain('styles-split.css');
     });
   });
+  it('should handle source maps properly', () =>
+    webpack({size: 3}, less).then(({files}) => {
+      expect(files).to.have.property('styles-1.css.map');
+      const map = JSON.parse(files['styles-1.css.map'].toString('utf8'));
+      expect(map).to.have.property('version', 3);
+      expect(map).to.have.property('sources')
+        .to.have.property(0)
+        .to.match(/index.less$/);
+    })
+  );
+  it('should handle cases when there are no source maps', () =>
+    webpack({size: 3}, less, {devtool: null}).then(({files}) => {
+      expect(files).to.not.have.property('styles-1.css.map');
+    })
+  );
+
+  it('should fail with bad imports', () => {
+    expect(() =>
+      new CSSSplitWebpackPlugin({imports: () => {}})
+    ).to.throw(TypeError);
+  });
 });