support nested classes and selectors

__tests__/styleRuleConverter-test.js

@@ -8,7 +8,7 @@ var r;
 describe('rulesToString', function() {
   beforeEach(function() {
     styleRuleConverter = require('../styleRuleConverter');
-    r = styleRuleConverter.rulesToString.bind(null, 'a');
+    r = styleRuleConverter.rulesToString.bind(null, '.a');
   });
 
   describe('on normal styles', function() {
@@ -98,6 +98,39 @@ describe('rulesToString', function() {
         '@media (min-width: 100px) and (max-width: 200px){.a{color:blue;}}'
       );
     });
+
+    it('parses nested media queries', function() {
+      var style = {
+        display: 'none',
+        ':before': {
+          color: 'red',
+          '@media (max-width: 500px)': {
+            display: 'block'
+          },
+          '@media (min-width: 100px) and (max-width: 200px)': {
+            color: 'blue'
+          }
+        }
+      };
+      expect(r(style)).toBe(
+        '.a{display:none;}.a:before{color:red;}@media (max-width: 500px){.a:before{display:block;}}' +
+        '@media (min-width: 100px) and (max-width: 200px){.a:before{color:blue;}}'
+      );
+    })
   });
 
+  describe('on nested selectors', function() {
+    it('parses nested selectors', function() {
+      var style = {
+        border: 'none',
+        '.class': {
+          border: '1px solid black'
+        }
+      };
+      expect(r(style)).toBe(
+        '.a{border:none;}.a .class{border:1px solid black;}'
+      );
+
+    })
+  })
 });

index.js

@@ -7,8 +7,7 @@ global.__RCSS_0_registry = global.__RCSS_0_registry || {};
 
 function descriptorsToString(styleDescriptor) {
   return styleRuleConverter.rulesToString(
-    styleDescriptor.className,
-    styleDescriptor.style
+    '.' + styleDescriptor.className, styleDescriptor.style
   );
 }
 

styleRuleConverter.js

@@ -26,63 +26,54 @@ function escapeValueForProp(value, prop) {
 
 function ruleToString(propName, value) {
   var cssPropName = hyphenateProp(propName);
+
   if (!styleRuleValidator.isValidProp(cssPropName)) {
     console.warn(
       '%s (transformed into %s) is not a valid CSS property name.', propName, cssPropName
     );
     return '';
   }
+
   if (!styleRuleValidator.isValidValue(value)) {
     return '';
   }
+
   return cssPropName + ':' + escapeValueForProp(value, cssPropName) + ';';
 }
 
-function _rulesToStringHeadless(styleObj) {
+function rulesToString(selector, styleObj) {
   var markup = '';
+  var toplevel = '';
 
   for (var key in styleObj) {
     if (!styleObj.hasOwnProperty(key)) {
       continue;
     }
 
-    if (key[0] === ':' || key.substring(0, 6) === '@media') {
-      continue;
-    }
-    markup += ruleToString(key, styleObj[key]);
-  }
-  return markup;
-}
-
-function rulesToString(className, styleObj) {
-  var markup = '';
-  var pseudos = '';
-  var mediaQueries = '';
+    var value = styleObj[key];
 
-  for (var key in styleObj) {
-    if (!styleObj.hasOwnProperty(key)) {
-      continue;
-    }
-    // Skipping the special pseudo-selectors and media queries.
+    // Support pseudo classes, psuedo elements and media queries.
     if (key[0] === ':') {
-      pseudos += '.' + className + key + '{' +
-        _rulesToStringHeadless(styleObj[key]) + '}';
+      toplevel += rulesToString(selector + key, value);
     } else if (key.substring(0, 6) === '@media') {
       if (!mediaQueryValidator(key)) {
         console.log('%s is not a valid media query.', key);
         continue;
       }
-      mediaQueries += key + '{' + rulesToString(className, styleObj[key]) + '}';
+
+      toplevel += key + '{' + rulesToString(selector, value) + '}';
+    } else if (typeof value === 'object') {
+      toplevel += rulesToString(selector + ' ' + key, value);
     } else {
-      markup += ruleToString(key, styleObj[key]);
+      markup += ruleToString(key, value);
     }
   }
 
   if (markup !== '') {
-    markup = '.' + className + '{' + markup + '}';
+    markup = selector + '{' + markup + '}';
   }
 
-  return markup + pseudos + mediaQueries;
+  return markup + toplevel;
 }
 
 module.exports = {