feat: support nested pseudoclasses

Author: andreypopp

src/__tests__/index-test.js

@@ -24,6 +24,25 @@ Label {
   :hover {
     color: white;
   }
+}
+    `, {requestCSS: 'react-css-components?css!styles.react.css'});
+    console.log('--- js');
+    console.log(js);
+    console.log('--- css');
+    console.log(css);
+  });
+
+  it.only('renders react components with nested pseudoclasses', function() {
+    let {js, css} = render(`
+
+Label {
+  color: red;
+  :hover {
+    color: white;
+    :focus {
+      color: black;
+    }
+  }
 }
     `, {requestCSS: 'react-css-components?css!styles.react.css'});
     console.log('--- js');

src/transformVariants.js

@@ -4,30 +4,51 @@
  */
 
 export default function transformVariants(root) {
-  let rules = [];
-  root.walkRules(rule => {
-    if (!isVariant(rule)) {
-      return;
+  let toAppend = [];
+  root.each(rule => {
+    if (isComponent(rule)) {
+      toAppend = toAppend.concat(flattenVariants(rule));
     }
-    let component = findComponent(rule);
-    rule = rule.remove().clone();
-    rule.selector = component.selector + rule.selector;
-    rules.push(rule);
   });
-  root.append(...rules);
+  root.append(...toAppend);
   return root;
 }
 
+function flattenVariants(rule) {
+  let toRemove = [];
+  let toAppend = [];
+  rule.each(variant => {
+    if (!isVariant(variant)) {
+      return;
+    }
+    toRemove.push(variant);
+    variant = variant.clone();
+    variant.selector = rule.selector + variant.selector;
+    toAppend = toAppend.concat(variant, ...flattenVariants(variant));
+  });
+  toRemove.forEach(variant => variant.remove());
+  return toAppend;
+}
+
 export function isVariant(node) {
   return (
     node.type === 'rule' &&
     node.selector.charAt(0) === ':'
   );
 }
 
+export function isComponent(node) {
+  return (
+    node.type === 'rule' &&
+    node.selector.charAt(0) !== ':' &&
+    node.parent &&
+    node.parent.type === 'root'
+  );
+}
+
 function findComponent(node) {
   while (true) {
-    if (node.type === 'rule' && !isVariant(node)) {
+    if (isComponent(node)) {
       return node;
     }
     if (!node.parent) {