Make it work with extract text webpack plugin again.

Author: andreypopp

README.md

@@ -46,17 +46,22 @@ Usage
 
 Add the following configuration to `webpack.config.js`:
 
+    var styling = require('styling')
+
     module.exports = {
       module: {
         loaders: [
           {
             test: /\.style\.js/,
-            loader: 'style!css!styling!babel'
+            loader: styling('style!css', babel')
           }
         ]
       }
     }
 
+Function `styling` take configures loader and accepts two arguments, one for
+*postloaders* and one for *preloaders*.
+
 Now you can write styles with the full power of JavaScript, `Button.styling.js`:
 
     import styling from 'styling'
@@ -85,12 +90,15 @@ Styling is compatible with [extract-text-webpack-plugin][] so you can have your
 styles extracted into a separate CSS bundle by Webpack. This is how you
 configure it to do so:
 
+    var styling = require('styling')
+    var ExtractTextWebpackPlugin = require('extract-text-webpack-plugin')
+
     module.exports = {
       module: {
         loaders: [
           {
             test: /\.style\.js/,
-            loader: ExtractTextWebpackPlugin.extract('style', css!styling!babel')
+            loader: styling(ExtractTextWebpackPlugin.extract('style', css'), 'babel')
           }
         ]
       },

browser.js

@@ -0,0 +1,11 @@
+/**
+ * @copyright 2015, Andrey Popp
+ */
+
+var Styling = require('./Styling');
+
+function styling(spec) {
+  return new Styling(spec);
+}
+
+module.exports = styling;

index.js

@@ -2,10 +2,15 @@
  * @copyright 2015, Andrey Popp
  */
 
-var Styling = require('./Styling');
+var omitRequest = require.resolve('./omit');
+var loaderRequest = require.resolve('./loader');
 
-function styling(spec) {
-  return new Styling(spec);
+module.exports = function styling(post, pre) {
+  if (Array.isArray(post)) {
+    post = post.join('!');
+  }
+  if (Array.isArray(pre)) {
+    pre = pre.join('!');
+  }
+  return [omitRequest, post, loaderRequest, pre || ''].join('!');
 }
-
-module.exports = styling;

loader.js

@@ -2,42 +2,77 @@
  * @copyright 2015, Andrey Popp
  */
 
-var path          = require('path');
-var Module        = require('module');
-var Styling       = require('./Styling');
-var renderStyling = require('./renderStyling');
+var path                = require('path');
+var Module              = require('module');
+var Styling             = require('./Styling');
+var renderStylingSheet  = require('./renderStylingSheet');
 
 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');
 
+var renderStylingSheetMod = require.resolve('./renderStylingSheet');
+
+var extractTextWebpackPluginKey;
+try {
+  extractTextWebpackPluginKey = path.dirname(require.resolve('extract-text-webpack-plugin'));
+} catch (error) {}
 
 module.exports = function styling(content) {
   this.cacheable();
-  return content;
+  if (this[__dirname] === false) {
+    return '';
+  } else if (typeof this[extractTextWebpackPluginKey] === 'function') {
+    var cb = this.async();
+    var request = this.request.split('!').slice(this.loaderIndex + 1).join('!');
+    produce(this, request, function(err, result) {
+      if (err) {
+        cb(err);
+      } else {
+        setCompiledStyling(this, result);
+        cb(null, '');
+      }
+    }.bind(this));
+  } else if (this[extractTextWebpackPluginKey] === false) {
+    return getCompiledStyling(this);
+  }  else {
+    return '';
+  }
 };
 
-module.exports.pitch = function stylingPitch(request, precedingRequest) {
+module.exports.pitch = function stylingPitch(request, precedingRequest, data) {
+  this.cacheable();
   if (this[__dirname] === false) {
+    // if we already inside the loader
+    return;
+  } else if (extractTextWebpackPluginKey in this) {
+    // if extract-text-webpack-plugin is active we do all work in a loader phase
     return;
+  } else {
+    var cb = this.async();
+    produce(this, request, cb);
   }
-  var childFilename = "styling-output-filename";
-  var outputOptions = {filename: childFilename};
-  var childCompiler = this._compilation.createChildCompiler("styling-compiler", outputOptions);
+};
+
+function produce(loader, request, cb) {
+  var outputFilename = "styling-output-filename";
+  var outputOptions = {filename: outputFilename};
+  var childCompiler = loader._compilation.createChildCompiler("styling-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) {
     if (compilation.cache) {
-      if(!compilation.cache[subCache])
+      if(!compilation.cache[subCache]) {
         compilation.cache[subCache] = {};
+      }
       compilation.cache = compilation.cache[subCache];
     }
   });
@@ -47,12 +82,15 @@ module.exports.pitch = function stylingPitch(request, precedingRequest) {
   childCompiler.plugin("this-compilation", function(compilation) {
     compilation.plugin("normal-module-loader", function(loaderContext) {
       loaderContext[__dirname] = false;
+      if (extractTextWebpackPluginKey in loader) {
+        loaderContext[extractTextWebpackPluginKey] = loader[extractTextWebpackPluginKey];
+      }
     });
   });
 
   var source;
   childCompiler.plugin("after-compile", function(compilation, callback) {
-    source = compilation.assets[childFilename] && compilation.assets[childFilename].source();
+    source = compilation.assets[outputFilename] && compilation.assets[outputFilename].source();
 
     // Remove all chunk assets
     compilation.chunks.forEach(function(chunk) {
@@ -64,11 +102,13 @@ module.exports.pitch = function stylingPitch(request, precedingRequest) {
     callback();
   });
 
-  var callback = this.async();
+  function callback(error, result) {
+    cb(error, result);
+  }
 
-  childCompiler.runAsChild(function(err, entries, compilation) {
-    if (err) {
-      return callback(err);
+  childCompiler.runAsChild(function(error, entries, compilation) {
+    if (error) {
+      return callback(error);
     }
     if (compilation.errors.length > 0) {
       return callback(compilation.errors[0]);
@@ -77,23 +117,14 @@ module.exports.pitch = function stylingPitch(request, precedingRequest) {
       return callback(new Error("Didn't get a result from child compiler"));
     }
     compilation.fileDependencies.forEach(function(dep) {
-      this.addDependency(dep);
-    }, this);
+      loader.addDependency(dep);
+    });
     compilation.contextDependencies.forEach(function(dep) {
-      this.addContextDependency(dep);
-    }, this);
+      loader.addContextDependency(dep);
+    });
     try {
-      var exports = this.exec(source, request);
-      var stylesheet = [];
-      for (var key in exports) {
-        if (exports.hasOwnProperty(key)) {
-          var styling = exports[key];
-          if (Styling.is(styling)) {
-            stylesheet = stylesheet.concat(renderStyling(key, styling));
-          }
-        }
-      }
-      var text = stylesheet.join('\n\n');
+      var exports = loader.exec(source, request);
+      var text = renderStylingSheet(exports);
     } catch (e) {
       return callback(e);
     }
@@ -102,5 +133,41 @@ module.exports.pitch = function stylingPitch(request, precedingRequest) {
     } else {
       callback();
     }
-  }.bind(this));
-};
+  });
+}
+
+function findInArray(array, func) {
+  for (var i = 0; i < array.length; i++) {
+    if (func(array[i])) {
+      return i;
+    }
+  }
+  return -1;
+}
+
+function getRootCompilation(loader) {
+  var compiler = loader._compiler;
+  var compilation = loader._compilation;
+  while (compiler.parentCompilation) {
+    compilation = compiler.parentCompilation;
+    compiler = compilation.compiler;
+  }
+  return compilation;
+}
+
+function setCompiledStyling(loader, styling) {
+  var compilation = getRootCompilation(loader);
+  if (compilation.__stylingCache === undefined) {
+    compilation.__stylingCache = {};
+  }
+  compilation.__stylingCache[loader.request] = styling;
+}
+
+function getCompiledStyling(loader) {
+  var compilation = getRootCompilation(loader);
+  if (compilation.__stylingCache === undefined) {
+    return undefined;
+  } else {
+    return compilation.__stylingCache[loader.request];
+  }
+}

omit.js

@@ -0,0 +1,20 @@
+var loaderPath = require.resolve('./loader');
+
+module.exports = function(content) {
+  this.cacheable();
+  return content;
+}
+
+module.exports.pitch = function(request) {
+  if (this[__dirname] === false) {
+    request = request.split('!');
+    while (request.length > 1) {
+      var req = request.shift();
+      if (req === loaderPath) {
+        break;
+      }
+    }
+    request = request.join('!');
+    return 'module.exports = require(' + JSON.stringify('!!' + request) + ');';
+  }
+}

package.json

@@ -3,6 +3,7 @@
   "version": "0.2.0",
   "description": "Style components with JavaScript",
   "main": "index.js",
+  "browser": "browser.js",
   "webpackLoader": "loader.js",
   "author": "Andrey Popp <[email protected]>",
   "license": "MIT",

renderStylingSheet.js

@@ -0,0 +1,21 @@
+/**
+ * @copyright 2015, Andrey Popp
+ */
+
+var Styling       = require('./Styling');
+var renderStyling = require('./renderStyling');
+
+function renderStylingSheet(sheet) {
+  var stylesheet = [];
+  for (var key in sheet) {
+    if (sheet.hasOwnProperty(key)) {
+      var styling = sheet[key];
+      if (Styling.is(styling)) {
+        stylesheet = stylesheet.concat(renderStyling(key, styling));
+      }
+    }
+  }
+  return stylesheet.join('\n\n');
+}
+
+module.exports = renderStylingSheet;