Merge pull request #1 from nealgranger/array-parser-support

Support for named exports and arrays.

Author: 10xjs

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);
 };