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.

Support for `[email protected]` is removed because `webpack@2` does not support it.

Author: izaakschroeder

.travis.yml

@@ -2,29 +2,6 @@ sudo: false
 language: node_js
 matrix:
   include:
-    # Run tests in Node.js 0.12
-    - node_js: '0.12'
-
-    # Run tests in Node.js 4.x
-    - node_js: '4'
-      addons:
-        apt:
-          sources:
-            - ubuntu-toolchain-r-test
-          packages:
-            - gcc-4.8
-            - g++-4.8
-
-    # Run tests in Node.js 5.x
-    - node_js: '5'
-      addons:
-        apt:
-          sources:
-            - ubuntu-toolchain-r-test
-          packages:
-            - gcc-4.8
-            - g++-4.8
-
-before_install:
-  # Use GCC 4.8 if it's available
-  - 'if [ ! `which gcc-4.8` == "" ]; then export CXX=g++-4.8 && export CC=gcc-4.8; fi'
+    - node_js: 4
+    - node_js: 5
+    - node_js: 6

example/index.css

@@ -0,0 +1,9 @@
+:global {
+  html {
+    background: red;
+  }
+}
+
+.foo {
+  background: green;
+}

example/index.css.js

@@ -0,0 +1,7 @@
+
+module.exports = {
+  '.bar': {
+    color: 'green',
+    fontSize: 12,
+  },
+};

example/index.js

@@ -0,0 +1,9 @@
+/* eslint-disable no-var */
+/* eslint-disable import/no-require */
+/* eslint-disable no-console */
+
+var a = require('./index.css');
+var b = require('./index.css.js');
+
+console.log(a);
+console.log(b);

example/webpack.config.js

@@ -0,0 +1,19 @@
+/* eslint-disable no-var */
+/* eslint-disable import/no-require */
+
+var postcss = require('../').default;
+var path = require('path');
+
+module.exports = postcss()({
+  entry: './index.js',
+  context: __dirname,
+  output: {
+    path: path.join(__dirname, 'dist'),
+    publicPath: '/foo',
+    filename: 'bundle.js',
+  },
+  target: process.env.WEBPACK_TARGET,
+  resolveLoader: {
+    extensions: ['.js'],
+  },
+});

package.json

@@ -8,19 +8,22 @@
   "scripts": {
     "prepublish": "./node_modules/.bin/babel -s -d dist src",
     "lint": "./node_modules/.bin/eslint .",
-    "test": "npm run lint"
+    "smoke:web": "WEBPACK_TARGET=web ./node_modules/.bin/webpack --config ./example/webpack.config.js",
+    "smoke:node": "WEBPACK_TARGET=node ./node_modules/.bin/webpack --config ./example/webpack.config.js",
+    "smoke": "npm run smoke:web && npm run smoke:node",
+    "test": "npm run lint && npm run smoke"
   },
   "dependencies": {
-    "autoprefixer": "^6.0.3",
+    "autoprefixer": "^6.5.0",
     "css-js-loader": "^0.2.2",
-    "css-loader": "^0.23.1",
-    "extract-text-webpack-plugin": "^0.9.0",
-    "postcss-import": "^7.1.0",
-    "postcss-loader": "^0.8.0",
+    "css-loader": "^0.25.0",
+    "extract-text-webpack-plugin": "^2.0.0-beta.4",
+    "postcss-import": "8.1.0",
+    "postcss-loader": "^0.13.0",
     "postcss-require": "^0.1.0",
     "precss": "^1.3.0",
-    "style-loader": "^0.13.0",
-    "webpack-partial": "^1.0.0"
+    "style-loader": "^0.13.1",
+    "webpack-partial": "^1.5.0"
   },
   "peerDependencies": {
     "postcss": ">=5.0.0"
@@ -33,7 +36,7 @@
     "eslint-plugin-filenames": "^0.2.0",
     "eslint-plugin-import": "^0.12.1",
     "eslint-plugin-react": "^3.16.0",
-    "postcss": "^5.0.14",
-    "webpack": "^1.12.12"
+    "postcss": "^5.2.4",
+    "webpack": "^2.1.0-beta.25"
   }
 }

src/postcss.webpack.config.js

@@ -43,10 +43,10 @@ const loaders = ({target, external, minimize, loader}) => {
   const styleLoader = require.resolve('style-loader');
   if (target === 'web') {
     if (external) {
-      return ExtractTextPlugin.extract(
-        styleLoader,
-        `${pack(cssLoader, config)}!${loader}`
-      );
+      return ExtractTextPlugin.extract({
+        fallbackLoader: styleLoader,
+        loader: `${pack(cssLoader, config)}!${loader}`,
+      });
     }
     return `${styleLoader}!${pack(cssLoader, config)}!${loader}`;
   }
@@ -57,7 +57,7 @@ export default ({
   options = [],
   filename = '[name].css',
 } = {}) => (config) => {
-  const {target} = config;
+  const {target = 'web'} = config;
   const env = process.env.NODE_ENV || 'development';
   const hot = process.env.HOT || false;
   const production = env === 'production';
@@ -69,80 +69,84 @@ export default ({
     throw new TypeError('`options` must be array or function!');
   }
 
+  const postcss = (webpack) => {
+    return [
+      cssimport({
+        // Make webpack acknowledge imported files.
+        onImport: (files) => files.forEach((dep) =>
+          webpack.addDependency(dep)),
+        resolve: (id, {basedir}) =>
+          webpack.resolveSync(basedir, id),
+      }),
+      constants({
+        require: (request, _, done) => {
+          webpack.loadModule(request, (err, source) => {
+            if (err) {
+              done(err);
+            } else {
+              let result = null;
+              try {
+                result = webpack.exec(source, request);
+                // interop for ES6 modules
+                if (result.__esModule && result.default) {
+                  result = result.default;
+                }
+              } catch (e) {
+                done(e);
+                return;
+              }
+              // Don't need to call `this.addDependency` since the
+              // `loadModule` function takes care of it.
+              done(null, result);
+            }
+          });
+        },
+      }),
+      precss,
+      ...(Array.isArray(options) ? options : options(webpack)),
+      autoprefixer({
+        browsers: ['last 2 versions'],
+      }),
+    ];
+  };
+
   return partial(config, {
     // Module settings.
     module: {
       loaders: [{
-        name: 'postcss',
         test: IS_STYLE,
         loader: loaders({
           loader: require.resolve('postcss-loader'),
+          options: {
+            postcss,
+          },
           target,
           external,
           minimize,
         }),
       }, {
-        name: 'js-css',
         test: IS_CSS_JS,
         loader: loaders({
           loader: [
             require.resolve('postcss-loader'),
             require.resolve('css-js-loader'),
           ].join('!'),
+          options: {
+            postcss,
+          },
           target,
           external,
           minimize,
         }),
       }],
     },
 
-    postcss(webpack) {
-      return [
-        cssimport({
-          // Make webpack acknowledge imported files.
-          onImport: (files) => files.forEach((dep) =>
-            webpack.addDependency(dep)),
-          resolve: (id, {basedir}) =>
-            webpack.resolveSync(basedir, id),
-        }),
-        constants({
-          require: (request, _, done) => {
-            webpack.loadModule(request, (err, source) => {
-              if (err) {
-                done(err);
-              } else {
-                let result = null;
-                try {
-                  result = webpack.exec(source, request);
-                  // interop for ES6 modules
-                  if (result.__esModule && result.default) {
-                    result = result.default;
-                  }
-                } catch (e) {
-                  done(e);
-                  return;
-                }
-                // Don't need to call `this.addDependency` since the
-                // `loadModule` function takes care of it.
-                done(null, result);
-              }
-            });
-          },
-        }),
-        precss,
-        ...(Array.isArray(options) ? options : options(webpack)),
-        autoprefixer({
-          browsers: ['last 2 versions'],
-        }),
-      ];
-    },
-
     plugins: [
       ...(external ? [
         // Some crawlers or things with Javascript disabled prefer normal CSS
         // instead of Javascript injected CSS, so this plugin allows for the
         // collection of the generated CSS into its own file.
-        new ExtractTextPlugin(filename),
+        new ExtractTextPlugin({filename}),
       ] : []),
     ],
   });