Skip to content

Commit 4552e55

Browse files
izaakschroederizaakschroeder
committed
Initial support for webpack@2.
This is obviously a breaking change because of the changes to the webpack API. Smoke tests have been added to ensure it works in the most basic of cases. `postcss-import` is pinned to `8.1.0` because of a breaking bug with `webpack@2`. See: postcss/postcss-import#207.
1 parent 81b174a commit 4552e55

6 files changed

Lines changed: 110 additions & 59 deletions

File tree

‎example/index.css‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
:global {
2+
html {
3+
background: red;
4+
}
5+
}
6+
7+
.foo {
8+
background: green;
9+
}

‎example/index.css.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
2+
module.exports = {
3+
'.bar': {
4+
color: 'green',
5+
fontSize: 12,
6+
},
7+
};

‎example/index.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
/* eslint-disable no-var */
2+
/* eslint-disable import/no-require */
3+
/* eslint-disable no-console */
4+
5+
var a = require('./index.css');
6+
var b = require('./index.css.js');
7+
8+
console.log(a);
9+
console.log(b);

‎example/webpack.config.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
/* eslint-disable no-var */
2+
/* eslint-disable import/no-require */
3+
4+
var postcss = require('../').default;
5+
var path = require('path');
6+
7+
module.exports = postcss()({
8+
entry: './index.js',
9+
context: __dirname,
10+
output: {
11+
path: path.join(__dirname, 'dist'),
12+
publicPath: '/foo',
13+
filename: 'bundle.js',
14+
},
15+
target: process.env.WEBPACK_TARGET,
16+
resolveLoader: {
17+
extensions: ['.js'],
18+
},
19+
});

‎package.json‎

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -8,19 +8,22 @@
88
"scripts": {
99
"prepublish": "./node_modules/.bin/babel -s -d dist src",
1010
"lint": "./node_modules/.bin/eslint .",
11-
"test": "npm run lint"
11+
"smoke:web": "WEBPACK_TARGET=web ./node_modules/.bin/webpack --config ./example/webpack.config.js",
12+
"smoke:node": "WEBPACK_TARGET=node ./node_modules/.bin/webpack --config ./example/webpack.config.js",
13+
"smoke": "npm run smoke:web && npm run smoke:node",
14+
"test": "npm run lint && npm run smoke"
1215
},
1316
"dependencies": {
14-
"autoprefixer": "^6.0.3",
17+
"autoprefixer": "^6.5.0",
1518
"css-js-loader": "^0.2.2",
16-
"css-loader": "^0.23.1",
17-
"extract-text-webpack-plugin": "^0.9.0",
18-
"postcss-import": "^7.1.0",
19-
"postcss-loader": "^0.8.0",
19+
"css-loader": "^0.25.0",
20+
"extract-text-webpack-plugin": "^2.0.0-beta.4",
21+
"postcss-import": "8.1.0",
22+
"postcss-loader": "^0.13.0",
2023
"postcss-require": "^0.1.0",
2124
"precss": "^1.3.0",
22-
"style-loader": "^0.13.0",
23-
"webpack-partial": "^1.0.0"
25+
"style-loader": "^0.13.1",
26+
"webpack-partial": "^1.5.0"
2427
},
2528
"peerDependencies": {
2629
"postcss": ">=5.0.0"
@@ -33,7 +36,7 @@
3336
"eslint-plugin-filenames": "^0.2.0",
3437
"eslint-plugin-import": "^0.12.1",
3538
"eslint-plugin-react": "^3.16.0",
36-
"postcss": "^5.0.14",
37-
"webpack": "^1.12.12"
39+
"postcss": "^5.2.4",
40+
"webpack": "^2.1.0-beta.25"
3841
}
3942
}

‎src/postcss.webpack.config.js‎

Lines changed: 53 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -43,10 +43,10 @@ const loaders = ({target, external, minimize, loader}) => {
4343
const styleLoader = require.resolve('style-loader');
4444
if (target === 'web') {
4545
if (external) {
46-
return ExtractTextPlugin.extract(
47-
styleLoader,
48-
`${pack(cssLoader, config)}!${loader}`
49-
);
46+
return ExtractTextPlugin.extract({
47+
fallbackLoader: styleLoader,
48+
loader: `${pack(cssLoader, config)}!${loader}`,
49+
});
5050
}
5151
return `${styleLoader}!${pack(cssLoader, config)}!${loader}`;
5252
}
@@ -57,7 +57,7 @@ export default ({
5757
options = [],
5858
filename = '[name].css',
5959
} = {}) => (config) => {
60-
const {target} = config;
60+
const {target = 'web'} = config;
6161
const env = process.env.NODE_ENV || 'development';
6262
const hot = process.env.HOT || false;
6363
const production = env === 'production';
@@ -69,80 +69,84 @@ export default ({
6969
throw new TypeError('`options` must be array or function!');
7070
}
7171

72+
const postcss = (webpack) => {
73+
return [
74+
cssimport({
75+
// Make webpack acknowledge imported files.
76+
onImport: (files) => files.forEach((dep) =>
77+
webpack.addDependency(dep)),
78+
resolve: (id, {basedir}) =>
79+
webpack.resolveSync(basedir, id),
80+
}),
81+
constants({
82+
require: (request, _, done) => {
83+
webpack.loadModule(request, (err, source) => {
84+
if (err) {
85+
done(err);
86+
} else {
87+
let result = null;
88+
try {
89+
result = webpack.exec(source, request);
90+
// interop for ES6 modules
91+
if (result.__esModule && result.default) {
92+
result = result.default;
93+
}
94+
} catch (e) {
95+
done(e);
96+
return;
97+
}
98+
// Don't need to call `this.addDependency` since the
99+
// `loadModule` function takes care of it.
100+
done(null, result);
101+
}
102+
});
103+
},
104+
}),
105+
precss,
106+
...(Array.isArray(options) ? options : options(webpack)),
107+
autoprefixer({
108+
browsers: ['last 2 versions'],
109+
}),
110+
];
111+
};
112+
72113
return partial(config, {
73114
// Module settings.
74115
module: {
75116
loaders: [{
76-
name: 'postcss',
77117
test: IS_STYLE,
78118
loader: loaders({
79119
loader: require.resolve('postcss-loader'),
120+
options: {
121+
postcss,
122+
},
80123
target,
81124
external,
82125
minimize,
83126
}),
84127
}, {
85-
name: 'js-css',
86128
test: IS_CSS_JS,
87129
loader: loaders({
88130
loader: [
89131
require.resolve('postcss-loader'),
90132
require.resolve('css-js-loader'),
91133
].join('!'),
134+
options: {
135+
postcss,
136+
},
92137
target,
93138
external,
94139
minimize,
95140
}),
96141
}],
97142
},
98143

99-
postcss(webpack) {
100-
return [
101-
cssimport({
102-
// Make webpack acknowledge imported files.
103-
onImport: (files) => files.forEach((dep) =>
104-
webpack.addDependency(dep)),
105-
resolve: (id, {basedir}) =>
106-
webpack.resolveSync(basedir, id),
107-
}),
108-
constants({
109-
require: (request, _, done) => {
110-
webpack.loadModule(request, (err, source) => {
111-
if (err) {
112-
done(err);
113-
} else {
114-
let result = null;
115-
try {
116-
result = webpack.exec(source, request);
117-
// interop for ES6 modules
118-
if (result.__esModule && result.default) {
119-
result = result.default;
120-
}
121-
} catch (e) {
122-
done(e);
123-
return;
124-
}
125-
// Don't need to call `this.addDependency` since the
126-
// `loadModule` function takes care of it.
127-
done(null, result);
128-
}
129-
});
130-
},
131-
}),
132-
precss,
133-
...(Array.isArray(options) ? options : options(webpack)),
134-
autoprefixer({
135-
browsers: ['last 2 versions'],
136-
}),
137-
];
138-
},
139-
140144
plugins: [
141145
...(external ? [
142146
// Some crawlers or things with Javascript disabled prefer normal CSS
143147
// instead of Javascript injected CSS, so this plugin allows for the
144148
// collection of the generated CSS into its own file.
145-
new ExtractTextPlugin(filename),
149+
new ExtractTextPlugin({filename}),
146150
] : []),
147151
],
148152
});

0 commit comments

Comments
 (0)