fix incorrect media query syntax

oops...

Author: CraigCav

src/StyleSheet.js

@@ -13,12 +13,23 @@ module.exports = class StyleSheet {
   }
 
   toString() {
-    const usedRules = this.rules
-      .filter(({className}) => this.usage.includes(className))
-      .map(({selector, cssText}) => `${selector} {${cssText}}`);
+    // filter unused rules
+    const filtered = this.rules.filter(({className}) => this.usage.includes(className));
 
-    const dedupe = usedRules.filter((rule, i) => i === usedRules.indexOf(rule));
+    // group rules by media query
+    const grouped = filtered.reduce((map, {selector, media, cssText}) => {
+      // using a set to deduplicate rules within a given media query scope
+      if (!map.has(media)) map.set(media, new Set());
+      map.get(media).add(`${selector} {${cssText}}`);
+      return map;
+    }, new Map());
 
-    return dedupe.join('\n');
+    // turn the rule objects into valid css rules
+    return Array.from(grouped.entries())
+      .map(([media, rules]) => {
+        const cssText = [...rules.values()].join('\n');
+        return media ? media + '{\n' + cssText + '\n}' : cssText;
+      })
+      .join('\n');
   }
 };

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

@@ -38,15 +38,17 @@ export const ComponentWithParentPseudo = () => <div className={\\"xashdej x1dp08
 
 exports[`media-query.jsx 2`] = `
 .x1dqz7z3 {color:red}
-.x1lrxh9v {@media screen and (min-width: 678px){color:green}}
 .x1ug2cuz {color:black}
-.xj95doo {@media screen and (min-width: 678px){color:yellow}}
 .x17bvl1g {color:brown}
-.xkuztku {@media screen and (min-width: 678px){color:salmon}}
 .xfxv4bd {color:silver}
-.x1oikiae:hover {@media screen and (min-width: 678px){color:gold}}
 .xashdej {color:wheat}
-.x1dp08z:hover {@media screen and (min-width: 678px){color:sandybrown}}
+@media screen and (min-width: 678px){
+.x1lrxh9v {color:green}
+.xj95doo {color:yellow}
+.xkuztku {color:salmon}
+.x1oikiae:hover {color:gold}
+.x1dp08z:hover {color:sandybrown}
+}
 `;
 
 exports[`merging.jsx 1`] = `"export const Component = () => <div className={\\"xp5623v\\"} />;"`;

src/babel/utils/atomizer.js

@@ -1,23 +1,29 @@
 const fnv1a = require('fnv1a');
 
+const AT_REG = /^@/;
+const AMP = /&/g;
+const COLON = /^:/;
+
 const id = seed => 'x' + fnv1a(seed).toString(36);
 const hyphenate = s => s.replace(/[A-Z]|^ms/g, '-$&').toLowerCase();
 
 const createRule = (className, key, value, children, media) => {
   const hyphenated = hyphenate(key);
   let cssText = hyphenated + ':' + value;
+  let selector = '.' + className;
+
+  if (children) {
+    selector += (COLON.test(children) ? '' : ' ') + children;
+  }
 
   return {
     key: media + children + hyphenated,
-    selector: '.' + className + children,
+    selector: selector,
+    cssText: cssText,
     media,
-    cssText: media ? media + '{' + cssText + '}' : cssText,
   };
 };
 
-const AT_REG = /^@/;
-const AMP = /&/g;
-
 const parse = (obj, children = '', media = '') => {
   const rules = [];
 

src/babel/visitors/TaggedTemplateExpression.js

@@ -45,11 +45,12 @@ function TaggedTemplateExpression(path, state, types) {
 
   const rules = atomizer(css_to_object(cssText));
 
-  rules.forEach(([className, {selector, cssText}]) => {
+  rules.forEach(([className, {selector, cssText, media}]) => {
     state.styleSheet.addRule({
       className,
       selector,
       cssText,
+      media,
     });
   });