refactor: rewrite compilation

Author: andreypopp

.flowconfig

@@ -0,0 +1,13 @@
+[ignore]
+.*/node_modules/esformatter/.*
+.*/node_modules/fbjs/.*.flow
+.*/test/.*
+
+[include]
+
+[libs]
+decls
+
+[options]
+esproposal.class_static_fields=enable
+suppress_comment=\\(.\\|\n\\)*\\$FlowIssue

decls/utils.js

@@ -0,0 +1,2 @@
+declare var expr;
+declare var stmt;

package.json

@@ -44,19 +44,22 @@
   },
   "homepage": "https://github.com/andreypopp/react-css-components#readme",
   "dependencies": {
+    "babel-plugin-ast-literal": "^0.4.0",
     "babel-types": "^6.7.2",
+    "invariant": "^2.2.1",
     "loader-utils": "^0.2.14",
     "postcss": "^5.0.19",
-    "babel-plugin-ast-literal": "^0.4.0"
+    "postcss-selector-parser": "^1.3.3"
   },
   "devDependencies": {
     "babel-cli": "^6.7.5",
     "babel-core": "^6.7.6",
+    "babel-generator": "^6.7.5",
     "babel-preset-prometheusresearch": "^0.1.0",
     "eslint": "^2.7.0",
     "eslint-config-prometheusresearch": "^0.2.0",
-    "mocha": "^2.4.5",
-    "babel-generator": "^6.7.5",
-    "eslint-plugin-react": "^4.3.0"
+    "eslint-plugin-react": "^4.3.0",
+    "flow-bin": "^0.23.0",
+    "mocha": "^2.4.5"
   }
 }

src/ComponentRef.js

@@ -3,8 +3,6 @@
  * @flow
  */
 
-import * as types from 'babel-types';
-
 // TODO: More robust regexpes required!
 const PARSE_REF_RE = /^([a-zA-Z0-9\._\-\/]+)(\?([a-zA-Z0-9_]+))?$/;
 const PARSE_NAMED_REF_RE = /^([a-zA-Z0-9_]+)=([a-zA-Z0-9_\.\-\/]+)(\?([a-zA-Z0-9_]+))?$/;
@@ -31,16 +29,3 @@ export function parseNamed(ref: string): ?{id: string; ref: ComponentRef} {
   let [_everything, id, source, _nothing, name = 'default'] = match;
   return {id, ref: {source, name}};
 }
-
-export function importDeclaration(identifier, ref: ComponentRef | string) {
-  if (typeof ref === 'string') {
-    ref = parse(ref);
-  }
-  let specifier;
-  if (ref.name === 'default') {
-    specifier = types.importDefaultSpecifier(identifier);
-  } else {
-    specifier = types.importSpecifier(identifier, types.identifier(ref.name));
-  }
-  return types.importDeclaration([specifier], types.stringLiteral(ref.source));
-}

src/Syntax.js

@@ -0,0 +1,3 @@
+.Label > .Hint,.Paragraph,.X:hover {
+    color: red
+}

src/__tests__/fixtures/complex-selector.css

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

src/__tests__/fixtures/complex-selector.js

@@ -0,0 +1,3 @@
+Label > Hint, Paragraph, X:hover {
+  color: red;
+}

src/__tests__/fixtures/complex-selector.react.css

@@ -1,3 +1,3 @@
-:local(.Label) {
+.Label {
     color: red
 }

src/__tests__/fixtures/custom-base.css

@@ -1,3 +1,3 @@
-:local(.Label) {
+.Label {
     color: red
 }

src/__tests__/fixtures/imported-base-named.css

@@ -1,3 +1,3 @@
-:local(.Label) {
+.Label {
     color: red
 }

src/__tests__/fixtures/imported-base.css

@@ -0,0 +1,3 @@
+.Label:hover {
+    color: red
+}

src/__tests__/fixtures/only-pseudo.css

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

src/__tests__/fixtures/pseudo-nested.js renamed to src/__tests__/fixtures/only-pseudo.js

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

src/__tests__/fixtures/only-pseudo.react.css

@@ -1,3 +1,3 @@
-:local(.Label) {
+.Label {
     color: red
 }

src/__tests__/fixtures/pseudo-nested.css

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

src/__tests__/fixtures/pseudo-nested.react.css

@@ -10,6 +10,9 @@ import {render} from '../';
 
 const REACT_CSS_RE = /\.react\.css$/;
 
+declare function describe(description: string, body: any): void;
+declare function it(description: string, body: any): void;
+
 describe('react-css-components', function() {
 
   function readFixture(filename) {