Merge pull request webpack#34 from SimonDegraeve/support-postcss-js

Add support for postcss-js

Author: ai

README.md

@@ -123,6 +123,35 @@ module.exports = {
 [webpack loader-context]: http://webpack.github.io/docs/loaders.html#loader-context
 [postcss-import]:         https://github.com/postcss/postcss-import
 
+## Integration with postcss-js
+
+If you want to process styles written in Javascript you can use the [postcss-js] parser.
+
+```js
+module.exports = {
+    module: {
+        loaders: [
+            {
+                test:   /\.style.js$/,
+                loader: "style-loader!css-loader!postcss-loader?parser=postcss-js"
+                // Or using Babel
+                // loader: "style-loader!css-loader!postcss-loader?parser=postcss-js!babel"
+            }
+        ]
+    },
+    postcss: function (webpack) {
+        return [
+            postcssImport({
+                addDependencyTo: webpack
+            })
+        ];
+    }
+}
+```
+
+[postcss-js]: https://github.com/postcss/postcss-js
+
+
 ## Custom Syntaxes
 
 PostCSS can transforms styles in any syntax, not only in CSS.

index.js

@@ -39,6 +39,10 @@ module.exports = function (source, map) {
     var loader   = this;
     var callback = this.async();
 
+    if (params.parser === 'postcss-js') {
+        source = this.exec(source, this.resource);
+    }
+
     postcss(plugins)
         .process(source, opts).then(function (result) {
             result.warnings().forEach(function (msg) {

package.json

@@ -15,6 +15,7 @@
   },
   "devDependencies": {
     "postcss-safe-parser": "1.0.1",
+    "postcss-js":          "0.1.0",
     "webpack-stream":      "2.1.1",
     "gulp-eslint":         "1.0.0",
     "gulp-mocha":          "2.1.3",

test/cases/style.js

@@ -0,0 +1,3 @@
+module.exports = {
+    a: { color: 'black' }
+};

test/test.js

@@ -23,4 +23,11 @@ describe('postcss-loader', function () {
         expect(css).to.eql('a { one color: red }\n');
     });
 
+    it('processes CSS-in-JS', function () {
+        var css = require('!raw-loader!' +
+                          '../?parser=postcss-js!' +
+                          './cases/style.js');
+        expect(css).to.eql('a {\n    color: red\n}');
+    });
+
 });