Make mixing CSS and JS imports work and add README.md

Author: ntharim

LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2014 Nathan Tran ntran013@gmail.com
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

README.md

@@ -0,0 +1,29 @@
+# css-in-js-loader
+
+> Use CSS in JS with [postcss-js](https://github.com/postcss/postcss-js) in webpack
+
+## Installation
+
+```sh
+npm i --save-dev css-in-js-loader
+```
+
+## But [postcss-loader](https://github.com/postcss/postcss-loader) already supports postcss-js as a parser?
+
+If you're using [babel](https://github.com/babel/babel) to process your Javascript then [postcss-loader](https://github.com/postcss/postcss-loader) only transforms `.js` files one level deep, i.e. it doesn't transform that file's imports.
+
+## Usage and Example
+
+Put `css-in-js` between your CSS and JS loaders. `css-in-js-loader` detects if the file is a `.js` file and converts it to CSS using [postcss-js](https://github.com/postcss/postcss-js) so you can use your CSS loaders (e.g. [postcss-loader](https://github.com/postcss/postcss-loader)) normally.
+
+Example webpack configuration:
+
+```js
+{
+  loaders: [
+    { test: /\.css$/, loader: 'css!postcss!css-in-js!babel' },
+    { test: /\.css\.js$/, loader: 'css!postcss!css-in-js!babel' },
+    { test: /\.js$/, loader: 'babel' },
+  ],
+}
+```

index.js

@@ -1,20 +1,40 @@
+var path = require('path');
+var fs = require('fs');
+var postcss = require('postcss');
+var postcssJs = require('postcss-js');
 var NodeTemplatePlugin = require('webpack/lib/node/NodeTemplatePlugin');
 var NodeTargetPlugin = require('webpack/lib/node/NodeTargetPlugin');
 var LibraryTemplatePlugin = require('webpack/lib/LibraryTemplatePlugin');
 var SingleEntryPlugin = require('webpack/lib/SingleEntryPlugin');
 var LimitChunkCountPlugin = require('webpack/lib/optimize/LimitChunkCountPlugin');
 
-module.exports = function () {
+module.exports = function (source) {
   if(this.cacheable) this.cacheable();
-  var request = this.request.split('!').slice(this.loaderIndex + 1).join('!');
+  return source;
+};
+
+module.exports.pitch = function (request, prevRequest) {
+  if(this.cacheable) this.cacheable();
+  var callback = this.async();
+  if (path.extname(request) === '.js') {
+    produce(this, request, callback);
+  } else {
+    var parts = request.split('!');
+    var filename = parts[parts.length - 1];
+    this.addDependency(filename);
+    fs.readFile(filename, 'utf8', callback);
+  }
+};
+
+function produce(loader, request, callback) {
   var childFilename = 'css-in-js-output-filename';
   var outputOptions = { filename: childFilename };
-  var childCompiler = getRootCompilation(this)
+  var childCompiler = getRootCompilation(loader)
       .createChildCompiler('css-in-js-compiler', outputOptions);
   childCompiler.apply(new NodeTemplatePlugin(outputOptions));
   childCompiler.apply(new LibraryTemplatePlugin(null, 'commonjs2'));
   childCompiler.apply(new NodeTargetPlugin());
-  childCompiler.apply(new SingleEntryPlugin(this.context, '!!' + request));
+  childCompiler.apply(new SingleEntryPlugin(loader.context, '!!' + request));
   childCompiler.apply(new LimitChunkCountPlugin({ maxChunks: 1 }));
   var subCache = 'subcache ' + __dirname + ' ' + request;
   childCompiler.plugin('compilation', function(compilation) {
@@ -45,7 +65,6 @@ module.exports = function () {
       callback();
   });
 
-  var callback = this.async();
   childCompiler.runAsChild(function(err, entries, compilation) {
       if(err) return callback(err);
 
@@ -56,27 +75,29 @@ module.exports = function () {
           return callback(new Error("Didn't get a result from child compiler"));
       }
       compilation.fileDependencies.forEach(function(dep) {
-          this.addDependency(dep);
-      }, this);
+          loader.addDependency(dep);
+      }, loader);
       compilation.contextDependencies.forEach(function(dep) {
-          this.addContextDependency(dep);
-      }, this);
+          loader.addContextDependency(dep);
+      }, loader);
       try {
-          var exports = this.exec(source, request);
+          var exports = loader.exec(source, request);
           if (exports.default && typeof exports.default === 'object') {
             exports = exports.default;
           }
-          var text = "\nmodule.exports = " + JSON.stringify(exports) + ";";
       } catch(e) {
           return callback(e);
       }
-      if (text) {
-        callback(null, text);
+      if (exports) {
+        postcss().process(exports, { parser: postcssJs })
+          .then(function (res) {
+            callback(null, res.css);
+          });
       } else {
         callback();
       }
-  }.bind(this));
-};
+  });
+}
 
 function getRootCompilation(loader) {
   var compiler = loader._compiler;

package.json

@@ -5,6 +5,8 @@
   "main": "index.js",
   "scripts": {},
   "peerDependencies": {
+    "postcss": "^5.0.14",
+    "postcss-js": "^0.1.1",
     "webpack": "^1.12.9"
   },
   "repository": {