support for pseduo selectors

Author: CraigCav

src/babel/__tests__/__snapshots__/index.test.js.snap

@@ -32,6 +32,13 @@ exports[`merging.jsx 1`] = `"export const Component = () => <div className={\\"x
 
 exports[`merging.jsx 2`] = `.xp5623v {color:green}`;
 
+exports[`pseudo.jsx 1`] = `"export const Component = () => <div className={\\"x1dqz7z3 x1jz5mb\\"} />;"`;
+
+exports[`pseudo.jsx 2`] = `
+.x1dqz7z3 {color:red}
+.x1jz5mb:hover {color:green}
+`;
+
 exports[`simple.jsx 1`] = `"export const Component = () => <div className={\\"x1e4w2a9\\"} />;"`;
 
 exports[`simple.jsx 2`] = `.x1e4w2a9 {font-size:16px}`;

src/babel/__tests__/fixtures/pseudo.jsx

@@ -0,0 +1,11 @@
+import {css, styles} from 'css-zero';
+
+const one = css`
+  color: red;
+
+  &:hover {
+    color: green;
+  }
+`;
+
+export const Component = () => <div className={styles(one)} />;

src/babel/utils/atomizer.js

@@ -3,12 +3,13 @@ const fnv1a = require('fnv1a');
 const id = seed => 'x' + fnv1a(seed).toString(36);
 const hyphenate = s => s.replace(/[A-Z]|^ms/g, '-$&').toLowerCase();
 
-const createRule = (key, value, media) => {
+const createRule = (className, key, value, children, media) => {
   const hyphenated = hyphenate(key);
-  const cssText = hyphenated + ':' + value;
+  let cssText = hyphenated + ':' + value;
+
   return {
-    key: hyphenated,
-    value,
+    key: children + hyphenated,
+    selector: '.' + className + children,
     media,
     cssText: media ? media + '{' + cssText + '}' : cssText,
   };
@@ -35,7 +36,7 @@ const parse = (obj, children = '', media = '') => {
       case 'number':
       case 'string':
         const className = id(key + value + children + media);
-        const rule = createRule(key, value, media);
+        const rule = createRule(className, key, value, children, media);
         rules.push([className, rule]);
     }
   }