Skip to content

Commit 31f3ed5

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 31f3ed5

File tree

10 files changed

+125
-45
lines changed

10 files changed

+125
-45
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: 55 additions & 31 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) => {
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'),
@@ -18,8 +21,14 @@ const config = (options) => {
1821
loaders: [{
1922
test: /\.css$/,
2023
loader: ExtractTextPlugin.extract('style-loader', 'css-loader'),
24+
}, {
25+
test: /\.less$/,
26+
loader: ExtractTextPlugin.extract(
27+
'css?-url&-autoprefixer&sourceMap!less?sourceMap'
28+
),
2129
}],
2230
},
31+
devtool: 'source-map',
2332
plugins: [
2433
new ExtractTextPlugin('styles.css'),
2534
new CSSSplitWebpackPlugin(options),
@@ -28,64 +37,79 @@ const config = (options) => {
2837
};
2938

3039
const webpack = (options) => {
31-
const compiler = _webpack(config(options));
32-
compiler.fs = new MemoryFileSystem();
40+
const configuration = config(options);
41+
const compiler = _webpack(configuration);
42+
compiler.outputFileSystem = new MemoryFileSystem();
3343
return new Promise((resolve) => {
34-
compiler.run((err, stats) => {
44+
compiler.run((err, _stats) => {
3545
expect(err).to.be.null;
36-
resolve(stats.toJson());
46+
const stats = _stats.toJson();
47+
const files = {};
48+
stats.assets.forEach((asset) => {
49+
files[asset.name] = compiler.outputFileSystem.readFileSync(
50+
path.join(configuration.output.path, asset.name)
51+
);
52+
});
53+
resolve({stats, files});
3754
});
3855
});
3956
};
4057

4158
describe('CSSSplitWebpackPlugin', () => {
42-
it('should split files when needed', () => {
43-
return webpack({size: 3, imports: true}).then((stats) => {
59+
it('should split files when needed', () =>
60+
webpack({size: 3, imports: true}).then(({stats}) => {
4461
expect(stats).to.not.be.null;
4562
expect(stats.assetsByChunkName).to.have.property('main')
4663
.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) => {
64+
})
65+
);
66+
it('should ignore files that do not need splitting', () =>
67+
webpack({size: 10, imports: true}).then(({stats}) => {
5168
expect(stats).to.not.be.null;
5269
expect(stats.assetsByChunkName).to.have.property('main')
5370
.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) => {
71+
})
72+
);
73+
it('should generate an import file when requested', () =>
74+
webpack({size: 3, imports: true}).then(({stats}) => {
5875
expect(stats).to.not.be.null;
5976
expect(stats.assetsByChunkName).to.have.property('main')
6077
.to.contain('styles.css');
61-
});
62-
});
63-
it('should remove the original asset when splitting', () => {
64-
return webpack({size: 3, imports: false}).then((stats) => {
78+
})
79+
);
80+
it('should remove the original asset when splitting', () =>
81+
webpack({size: 3, imports: false}).then(({stats}) => {
6582
expect(stats).to.not.be.null;
6683
expect(stats.assetsByChunkName).to.have.property('main')
6784
.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) => {
85+
})
86+
);
87+
it('should allow customization of import name', () =>
88+
webpack({size: 3, imports: 'potato.css'}).then(({stats}) => {
7289
expect(stats).to.not.be.null;
7390
expect(stats.assetsByChunkName).to.have.property('main')
7491
.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) => {
92+
})
93+
);
94+
it('should allow preservation of the original unsplit file', () =>
95+
webpack({size: 3, imports: false, preserve: true}).then(({stats}) => {
7996
expect(stats).to.not.be.null;
8097
expect(stats.assetsByChunkName).to.have.property('main')
8198
.to.contain('styles.css');
82-
});
83-
});
99+
})
100+
);
84101
it('should give sensible names by default', () => {
85-
return webpack({size: 3, imports: true, preserve: true}).then((stats) => {
102+
return webpack({size: 3, imports: true, preserve: true}).then(({stats}) => {
86103
expect(stats).to.not.be.null;
87104
expect(stats.assetsByChunkName).to.have.property('main')
88105
.to.contain('styles-split.css');
89106
});
90107
});
108+
it('should handle source maps properly', () =>
109+
webpack({size: 3}, less).then(({files}) => {
110+
expect(files).to.have.property('styles-1.css.map');
111+
const map = JSON.parse(files['styles-1.css.map'].toString('utf8'));
112+
expect(map).to.have.property('version', 3);
113+
})
114+
);
91115
});

0 commit comments

Comments
 (0)