Skip to content

Fix previous source map not being used correctly. #6

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jun 7, 2016
Merged

Fix previous source map not being used correctly. #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
0 example/index.css → example/basic/index.css
View file
Open in desktop
File renamed without changes.
0 example/index.js → example/basic/index.js
View file
Open in desktop
File renamed without changes.
3 changes: 2 additions & 1 deletion example/webpack.config.js → example/basic/webpack.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var CSSSplitWebpackPlugin = require('../').default;
var CSSSplitWebpackPlugin = require('../../').default;

module.exports = {
entry: './index.js',
Expand All @@ -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}),
Expand Down
15 changes: 15 additions & 0 deletions example/less/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
1 change: 1 addition & 0 deletions example/less/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
require('./index.less');
20 changes: 20 additions & 0 deletions example/less/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
@green: green;
@red: red;
@yellow: yellow;
@blue: blue;

.foo {
color: @green;
}

.bar {
color: @red;
}

.baz {
color: @yellow;
}

.qux {
color: @blue;
}
25 changes: 25 additions & 0 deletions example/less/webpack.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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}),
],
};
4 changes: 4 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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": {
Expand Down
16 changes: 3 additions & 13 deletions src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
108 changes: 75 additions & 33 deletions test/spec/index.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'),
Expand All @@ -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);
});
});