Support for named exports and arrays.

Any named es6 export on the loaded file is interpreted as class definition and appended to the definitions from the default export. This allows styles to be defined with exports that map 1:1 with css modules.

Any block, selector or property can now be defined as an array of values. This allows defining multiple properties of the same name within a class.

Author: Neal Granger

index.js

@@ -1,4 +1,9 @@
 var defaults = require('lodash/defaults');
+var mapKeys = require('lodash/mapKeys');
+var isArray = require('lodash/isArray');
+var omit = require('lodash/omit');
+var isString = require('lodash/isString');
+var isNumber = require('lodash/isNumber');
 var loaderUtils = require('loader-utils');
 var dangerousStyleValue = require('react/lib/dangerousStyleValue');
 var hyphenateStyleName = require('fbjs/lib/hyphenateStyleName');
@@ -15,38 +20,69 @@ function line(pretty) {
   return pretty ? '\n' : '';
 }
 
-function parse(config, styles, level) {
-  level = level === undefined ? 0 : level;
+function isProp(value) {
+  return isArray(value) ?
+    isProp(value[0], true) :
+    isString(value) || isNumber(value);
+}
+
+function format(config, value, name, level, inProp) {
+  level = level !== undefined ? level : 0;
 
   var pretty = config.pretty;
   var css = '';
+  var indentLevel = level;
 
-  for (var styleName in styles) {
-    if (!styles.hasOwnProperty(styleName)) {
-      continue;
+  if (isArray(value)) {
+    for (var i = 0, len = value.length; i < len; i ++) {
+      css += format(config, value[i], name, level, inProp);
     }
+    return css;
+  }
 
-    // Extract the style definition or nested block.
-    var styleValue = styles[styleName];
-
-    if (styleValue === null) {
-      continue;
+  if (inProp) {
+    // The `name` and `value` args currently represent a css property and value.
+    // Use React's css style processing funcs to generate css markup.
+
+    css += indent(pretty, indentLevel) + hyphenateStyleName(name) + ':' + space(pretty);
+    css += dangerousStyleValue(name, value) + ';' + line(pretty);
+  } else {
+    // The `name` and `value` args currently represent a block containing css
+    // properties or further nested blocks. Iterate through and parse
+    // the nested values.
+
+    if (name) {
+      // Unless we are in the global css scope (`name` is undefined), add a new
+      // block to the markup.
+      css += indent(pretty, indentLevel) + name + space(pretty) + '{' + line(pretty);
+      indentLevel += 1;
     }
 
-    // Remove whitespace from selector/block.
-    styleName = styleName.trim();
+    for (var key in value) {
+      if (!value.hasOwnProperty(key)) {
+        continue;
+      }
 
-    var block = Object.prototype.toString.call(styleValue) === '[object Object]';
+      // Extract the style definition or nested block.
+      var innerValue = value[key];
 
-    if (block) {
-      css += indent(pretty, level) + styleName + space(pretty) + '{' + line(pretty);
-      css += parse(config, styleValue, level + 1);
-      css += indent(pretty, level) + '}' + line(pretty) + line(pretty);
-      continue;
+      if (innerValue === null) {
+        continue;
+      }
+
+      // Determine if the inner value is a block or a property.
+      var innerIsProp = isProp(innerValue);
+
+      // Remove whitespace from selector/block/property.
+      var innerName = key.trim();
+
+      css += format(config, innerValue, innerName, level + 1, innerIsProp);
     }
 
-    css += indent(pretty, level + 1) + hyphenateStyleName(styleName) + ':' + space(pretty);
-    css += dangerousStyleValue(styleName, styleValue) + ';' + line(pretty);
+    if (name) {
+      // Close the open block.
+      css += indent(pretty, level) + '}' + line(pretty) + line(pretty);
+    }
   }
 
   return css;
@@ -55,9 +91,45 @@ function parse(config, styles, level) {
 module.exports = function(content) {
   this.cacheable();
 
-  config = defaults(loaderUtils.getLoaderConfig(this, 'jsCssLoader'), {pretty: process.env.NODE_ENV !== 'production'});
+  config = defaults(
+    loaderUtils.getLoaderConfig(this, 'jsCssLoader'),
+    {pretty: process.env.NODE_ENV !== 'production'}
+  );
 
   var styles = this.exec(content, this.resourcePath);
 
-  return parse(config, styles.__esModule ? styles.default : styles);
+  var css = '';
+
+  if (styles.__esModule) {
+    // When using Babel, css classes can be defined as named es6 exports.
+    //
+    // e.x.
+    //
+    // ```
+    // export default {
+    //   '.base': {
+    //     color: 'black'
+    //   }
+    // };
+    // ```
+    //
+    // is the same as
+    //
+    // ```
+    // export const base = {
+    //   color: 'black'
+    // };
+    // ```
+    return format(config, [
+      styles.default,
+      mapKeys(
+        omit(styles, 'default'),
+        function (value, key) {
+          return '.' + key;
+        }
+      ),
+    ]);
+  }
+
+  return format(config, styles);
 };