Skip to content

Commit 2eda332

Browse files
izaakschroederizaakschroeder
committed
Fix previous source map not being used correctly.
The previous source map should be applied in `process`, not in `toResult` even though the documentation says `toResult` supports these properties. See: https://github.com/postcss/postcss/blob/master/docs/api.md#roottoresultopts for information on this API. Additional tests have been added to verify this behavior, including the addition of a more complex example using the `less` CSS preprocessor. Fixes #4.
1 parent 0affbfb commit 2eda332

File tree

10 files changed

+145
-47
lines changed

10 files changed

+145
-47
lines changed

‎example/index.css renamed to ‎example/basic/index.css

File renamed without changes.

‎example/index.js renamed to ‎example/basic/index.js

File renamed without changes.

‎example/webpack.config.js renamed to ‎example/basic/webpack.config.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
var ExtractTextPlugin = require('extract-text-webpack-plugin');
2-
var CSSSplitWebpackPlugin = require('../').default;
2+
var CSSSplitWebpackPlugin = require('../../').default;
33

44
module.exports = {
55
entry: './index.js',
@@ -15,6 +15,7 @@ module.exports = {
1515
loader: ExtractTextPlugin.extract('style-loader', 'css-loader'),
1616
}],
1717
},
18+
devtool: 'source-map',
1819
plugins: [
1920
new ExtractTextPlugin("styles.css"),
2021
new CSSSplitWebpackPlugin({size: 3, imports: true}),

‎example/less/index.html

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>LESS Example</title>
6+
<link rel="stylesheet" href="./dist/styles-1.css">
7+
<link rel="stylesheet" href="./dist/styles-2.css">
8+
</head>
9+
<body>
10+
<div class="foo">foo</div>
11+
<div class="bar">bar</div>
12+
<div class="baz">baz</div>
13+
<div class="qux">qux</div>
14+
</body>
15+
</html>

‎example/less/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
require('./index.less');

‎example/less/index.less

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
@green: green;
2+
@red: red;
3+
@yellow: yellow;
4+
@blue: blue;
5+
6+
.foo {
7+
color: @green;
8+
}
9+
10+
.bar {
11+
color: @red;
12+
}
13+
14+
.baz {
15+
color: @yellow;
16+
}
17+
18+
.qux {
19+
color: @blue;
20+
}

‎example/less/webpack.config.js

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
var ExtractTextPlugin = require('extract-text-webpack-plugin');
2+
var CSSSplitWebpackPlugin = require('../../').default;
3+
4+
module.exports = {
5+
entry: './index.js',
6+
context: __dirname,
7+
output: {
8+
path: __dirname + '/dist',
9+
publicPath: '/foo',
10+
filename: 'bundle.js',
11+
},
12+
module: {
13+
loaders: [{
14+
test: /\.less$/,
15+
loader: ExtractTextPlugin.extract(
16+
'css?-url&-autoprefixer&sourceMap!less?sourceMap'
17+
),
18+
}],
19+
},
20+
devtool: 'source-map',
21+
plugins: [
22+
new ExtractTextPlugin("styles.css"),
23+
new CSSSplitWebpackPlugin({size: 3}),
24+
],
25+
};

‎package.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
"adana-cli": "^0.1.1",
2020
"adana-dump": "^0.1.0",
2121
"adana-format-lcov": "^0.1.1",
22+
"autoprefixer-loader": "^3.2.0",
2223
"babel-cli": "^6.7.7",
2324
"babel-core": "^6.7.7",
2425
"babel-preset-metalab": "^0.2.1",
@@ -30,9 +31,12 @@
3031
"eslint-plugin-import": "^1.6.0",
3132
"eslint-plugin-react": "^4.2.3",
3233
"extract-text-webpack-plugin": "^1.0.1",
34+
"less": "^2.7.1",
35+
"less-loader": "^2.2.3",
3336
"memory-fs": "^0.3.0",
3437
"mocha": "^2.4.5",
3538
"style-loader": "^0.13.1",
39+
"url-loader": "^0.5.7",
3640
"webpack": "^1.13.0"
3741
},
3842
"dependencies": {

‎src/index.js

Lines changed: 3 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -104,20 +104,10 @@ export default class CSSSplitWebpackPlugin {
104104
file: key,
105105
index: i,
106106
});
107-
return postcss([chunk({
108-
...this.options,
109-
result: (i) => {
110-
return {
111-
to: name(i),
112-
from: key,
113-
map: {
114-
inline: false,
115-
prev: input.map,
116-
},
117-
};
107+
return postcss([chunk(this.options)]).process(input.source, {
108+
map: {
109+
prev: input.map,
118110
},
119-
})]).process(input.source, {
120-
from: key,
121111
}).then((result) => {
122112
return Promise.resolve({
123113
file: key,

‎test/spec/index.spec.js

Lines changed: 75 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,12 @@ import path from 'path';
55
import MemoryFileSystem from 'memory-fs';
66
import {expect} from 'chai';
77

8-
const config = (options) => {
8+
const basic = path.join('.', 'basic', 'index.js');
9+
const less = path.join('.', 'less', 'index.js');
10+
11+
const config = (options, entry = basic, extra) => {
912
return {
10-
entry: './index.js',
13+
entry: path.join(__dirname, '..', '..', 'example', entry),
1114
context: path.join(__dirname, '..', '..', 'example'),
1215
output: {
1316
path: path.join(__dirname, 'dist'),
@@ -17,75 +20,114 @@ const config = (options) => {
1720
module: {
1821
loaders: [{
1922
test: /\.css$/,
20-
loader: ExtractTextPlugin.extract('style-loader', 'css-loader'),
23+
loader: ExtractTextPlugin.extract(
24+
'style-loader',
25+
'css-loader?sourceMap'
26+
),
27+
}, {
28+
test: /\.less$/,
29+
loader: ExtractTextPlugin.extract(
30+
'css?-url&-autoprefixer&sourceMap!less?sourceMap'
31+
),
2132
}],
2233
},
34+
devtool: 'source-map',
2335
plugins: [
2436
new ExtractTextPlugin('styles.css'),
2537
new CSSSplitWebpackPlugin(options),
2638
],
39+
...extra,
2740
};
2841
};
2942

30-
const webpack = (options) => {
31-
const compiler = _webpack(config(options));
32-
compiler.fs = new MemoryFileSystem();
43+
const webpack = (options, inst, extra) => {
44+
const configuration = config(options, inst, extra);
45+
const compiler = _webpack(configuration);
46+
compiler.outputFileSystem = new MemoryFileSystem();
3347
return new Promise((resolve) => {
34-
compiler.run((err, stats) => {
48+
compiler.run((err, _stats) => {
3549
expect(err).to.be.null;
36-
resolve(stats.toJson());
50+
const stats = _stats.toJson();
51+
const files = {};
52+
stats.assets.forEach((asset) => {
53+
files[asset.name] = compiler.outputFileSystem.readFileSync(
54+
path.join(configuration.output.path, asset.name)
55+
);
56+
});
57+
resolve({stats, files});
3758
});
3859
});
3960
};
4061

4162
describe('CSSSplitWebpackPlugin', () => {
42-
it('should split files when needed', () => {
43-
return webpack({size: 3, imports: true}).then((stats) => {
63+
it('should split files when needed', () =>
64+
webpack({size: 3, imports: true}).then(({stats}) => {
4465
expect(stats).to.not.be.null;
4566
expect(stats.assetsByChunkName).to.have.property('main')
4667
.to.contain('styles-2.css');
47-
});
48-
});
49-
it('should ignore files that do not need splitting', () => {
50-
return webpack({size: 10, imports: true}).then((stats) => {
68+
})
69+
);
70+
it('should ignore files that do not need splitting', () =>
71+
webpack({size: 10, imports: true}).then(({stats}) => {
5172
expect(stats).to.not.be.null;
5273
expect(stats.assetsByChunkName).to.have.property('main')
5374
.to.not.contain('styles-2.css');
54-
});
55-
});
56-
it('should generate an import file when requested', () => {
57-
return webpack({size: 3, imports: true}).then((stats) => {
75+
})
76+
);
77+
it('should generate an import file when requested', () =>
78+
webpack({size: 3, imports: true}).then(({stats}) => {
5879
expect(stats).to.not.be.null;
5980
expect(stats.assetsByChunkName).to.have.property('main')
6081
.to.contain('styles.css');
61-
});
62-
});
63-
it('should remove the original asset when splitting', () => {
64-
return webpack({size: 3, imports: false}).then((stats) => {
82+
})
83+
);
84+
it('should remove the original asset when splitting', () =>
85+
webpack({size: 3, imports: false}).then(({stats}) => {
6586
expect(stats).to.not.be.null;
6687
expect(stats.assetsByChunkName).to.have.property('main')
6788
.to.not.contain('styles.css');
68-
});
69-
});
70-
it('should allow customization of import name', () => {
71-
return webpack({size: 3, imports: 'potato.css'}).then((stats) => {
89+
})
90+
);
91+
it('should allow customization of import name', () =>
92+
webpack({size: 3, imports: 'potato.css'}).then(({stats}) => {
7293
expect(stats).to.not.be.null;
7394
expect(stats.assetsByChunkName).to.have.property('main')
7495
.to.contain('potato.css');
75-
});
76-
});
77-
it('should allow preservation of the original unsplit file', () => {
78-
return webpack({size: 3, imports: false, preserve: true}).then((stats) => {
96+
})
97+
);
98+
it('should allow preservation of the original unsplit file', () =>
99+
webpack({size: 3, imports: false, preserve: true}).then(({stats}) => {
79100
expect(stats).to.not.be.null;
80101
expect(stats.assetsByChunkName).to.have.property('main')
81102
.to.contain('styles.css');
82-
});
83-
});
103+
})
104+
);
84105
it('should give sensible names by default', () => {
85-
return webpack({size: 3, imports: true, preserve: true}).then((stats) => {
106+
return webpack({size: 3, imports: true, preserve: true}).then(({stats}) => {
86107
expect(stats).to.not.be.null;
87108
expect(stats.assetsByChunkName).to.have.property('main')
88109
.to.contain('styles-split.css');
89110
});
90111
});
112+
it('should handle source maps properly', () =>
113+
webpack({size: 3}, less).then(({files}) => {
114+
expect(files).to.have.property('styles-1.css.map');
115+
const map = JSON.parse(files['styles-1.css.map'].toString('utf8'));
116+
expect(map).to.have.property('version', 3);
117+
expect(map).to.have.property('sources')
118+
.to.have.property(0)
119+
.to.match(/index.less$/);
120+
})
121+
);
122+
it('should handle cases when there are no source maps', () =>
123+
webpack({size: 3}, less, {devtool: null}).then(({files}) => {
124+
expect(files).to.not.have.property('styles-1.css.map');
125+
})
126+
);
127+
128+
it('should fail with bad imports', () => {
129+
expect(() =>
130+
new CSSSplitWebpackPlugin({imports: () => {}})
131+
).to.throw(TypeError);
132+
});
91133
});

0 commit comments

Comments
 (0)