fix: fix compilation with media and with separate pseudos

Author: andreypopp

CHANGELOG.md

@@ -1,3 +1,7 @@
+## 0.3.1
+
+* [FIX] Fix compilation for CSS with separate (unnested) pseudoclasses.
+
 ## 0.3.0
 
 * [BREAKING] Component spec format changed from using `.` as a delimiter between

src/Syntax.js

@@ -0,0 +1,15 @@
+/**
+ * @copyright 2016-present, React CSS Components team
+ * @flow
+ */
+
+const COMPONENT_RE = /^[a-zA-Z_0-9]+$/;
+
+export function isComponent(node: PostCSSNode) {
+  return (
+    node.type === 'rule' &&
+    COMPONENT_RE.exec(node.selector) &&
+    node.parent &&
+    node.parent.type === 'root'
+  );
+}

src/__tests__/fixtures/separate-pseduo.css

@@ -0,0 +1,6 @@
+:local(.Label) {
+    color: red
+}
+:local(.Label:hover) {
+    color: red
+}

src/__tests__/fixtures/separate-pseduo.js

@@ -0,0 +1,6 @@
+import React from "react";
+import styles from "css";
+export function Label(props) {
+  return React.createElement("div", { ...props, className: styles.Label
+  });
+}

src/__tests__/fixtures/separate-pseduo.react.css

@@ -0,0 +1,6 @@
+Label {
+  color: red;
+}
+Label:hover {
+  color: red;
+}

src/__tests__/fixtures/within-media.css

@@ -0,0 +1,11 @@
+:local(.Label) {
+
+  color: red
+}
+
+@media (min-width: 1000px) {
+  :local(.Label) {
+
+    color: white
+  }
+}

src/__tests__/fixtures/within-media.js

@@ -0,0 +1,6 @@
+import React from "react";
+import styles from "css";
+export function Label(props) {
+  return React.createElement("div", { ...props, className: styles.Label
+  });
+}

src/__tests__/fixtures/within-media.react.css

@@ -0,0 +1,9 @@
+Label {
+  color: red;
+}
+
+@media (min-width: 1000px) {
+  Label {
+    color: white;
+  }
+}

src/index.js

@@ -10,6 +10,7 @@ import generate from 'babel-generator';
 import transformVariants, {isVariant} from './transformVariants';
 import HTMLTagList from './HTMLTagList';
 import * as ComponentRef from './ComponentRef';
+import * as Syntax from './Syntax';
 
 const LOADER = require.resolve('../webpack');
 
@@ -57,7 +58,7 @@ function renderToJS(source: string, config: RenderConfig): string {
   let statements = [];
   let component = types.stringLiteral('div');
   root.walkRules(node => {
-    if (isVariant(node)) {
+    if (!Syntax.isComponent(node)) {
       return;
     }
     node.walkDecls(decl => {