feat: add :prop(condition) syntax

Author: andreypopp

package.json

@@ -45,7 +45,9 @@
   "homepage": "https://github.com/andreypopp/react-css-components#readme",
   "dependencies": {
     "babel-plugin-ast-literal": "^0.4.0",
+    "babel-traverse": "^6.7.6",
     "babel-types": "^6.7.2",
+    "babylon": "^6.7.0",
     "invariant": "^2.2.1",
     "loader-utils": "^0.2.14",
     "postcss": "^5.0.19",

src/__tests__/fixtures/prop-condition.css

@@ -0,0 +1,12 @@
+.Label__prop__fe61dd {
+    color: red
+}
+.Label__prop__7fceb6 {
+    color: white
+}
+.Label__prop__d033ce {
+    color: yellow
+}
+.Label__prop__29d2fe {
+    color: black
+}

src/__tests__/fixtures/prop-condition.js

@@ -0,0 +1,9 @@
+import React from "react";
+import styles from "css";
+export function Label({
+  variant,
+  ...props }) {
+  let className = styles.Label + (props.level == 1 && props.level < 1 ? ' ' + styles.Label__prop__fe61dd : '') + (props.mode[0] == 1 ? ' ' + styles.Label__prop__7fceb6 : '') + (props.callback() ? ' ' + styles.Label__prop__d033ce : '') + (props.indicies.some(x => x.ok) ? ' ' + styles.Label__prop__29d2fe : '');
+  return React.createElement("div", { ...props, className
+  });
+}

src/__tests__/fixtures/prop-condition.react.css

@@ -0,0 +1,12 @@
+Label:prop(level == 1 && level < 1) {
+  color: red;
+}
+Label:prop(mode[0] == 1) {
+  color: white;
+}
+Label:prop(callback()) {
+  color: yellow;
+}
+Label:prop(indicies.some(x => x.ok)) {
+  color: black;
+}

src/index.js

@@ -3,11 +3,15 @@
  * @flow
  */
 
+import {createHash} from 'crypto';
 import invariant from 'invariant';
 import * as LoaderUtils from 'loader-utils';
 
 import {identifier, stringLiteral, program} from 'babel-types';
 import generate from 'babel-generator';
+import traverse from 'babel-traverse';
+import * as types from 'babel-types';
+import {parse} from 'babylon';
 
 import * as postcss from 'postcss';
 import createSelectorParser, {className} from 'postcss-selector-parser';
@@ -26,6 +30,7 @@ type CSSNode = Object;
 type VariantSpec = {
   componentName: string;
   variantName: string;
+  expression: ?string;
 };
 
 type ComponentSpec = {
@@ -41,11 +46,55 @@ const LOADER = require.resolve('../webpack');
 
 const COMPONENT_RE = /^[A-Z][a-zA-Z_0-9]*$/;
 
+const PROP_VARIANT_NAME = ':prop';
+
+function hash(value) {
+  let hasher = createHash('md5');
+  hasher.update(value);
+  return hasher.digest('hex');
+}
+
 function parseSelector(selector) {
   let parser = createSelectorParser();
   return parser.process(selector).res;
 }
 
+function isPropReference(path) {
+  if (!types.isIdentifier(path.node)) {
+    return false;
+  }
+  if (path.node.__seen) {
+    return false;
+  }
+  if (path.scope.parent !== undefined) {
+    return false;
+  }
+  if (types.isMemberExpression(path.parentPath.node)) {
+    while (types.isMemberExpression(path.parentPath.node)) {
+      if (path.node === path.parentPath.node.property) {
+        return false;
+      }
+      path = path.parentPath;
+    }
+  }
+  return true;
+}
+
+function parsePropVariantExpression(expression) {
+  let node = parse(expression);
+  traverse(node, {
+    enter(path) {
+      if (isPropReference(path)) {
+        let nextNode = expr`props.${path.node}`;
+        nextNode.object.__seen = true;
+        path.replaceWith(nextNode);
+      }
+    }
+  });
+  node = node.program.body[0].expression;
+  return node;
+}
+
 function findComponentNames(node: CSSNode): Array<string> {
   let componentNames = [];
   let selector = parseSelector(node.selector);
@@ -61,18 +110,40 @@ function findVariants(node: CSSNode): Array<VariantSpec> {
   let variantNames = [];
   let selector = parseSelector(node.selector);
   selector.eachPseudo(selector => {
+    let expression = null;
+    let variantName = selector.value.slice(1);
+
+    if (selector.value === PROP_VARIANT_NAME) {
+      expression = node.selector.slice(
+        selector.source.start.column + PROP_VARIANT_NAME.length,
+        selector.source.end.column - 1
+      );
+      variantName = variantName + '__' + hash(expression).slice(0, 6);
+      expression = parsePropVariantExpression(expression);
+    }
+
     let idx = selector.parent.nodes.indexOf(selector);
     let prev = selector.parent.nodes[idx - 1];
     if (prev && prev.type === 'tag' && COMPONENT_RE.exec(prev.value)) {
       variantNames.push({
         componentName: prev.value,
-        variantName: selector.value.slice(1),
+        variantName,
+        expression,
       });
     }
   });
   return variantNames;
 }
 
+function renderPropVariantCondition(selector) {
+  let value = '';
+  selector.eachInside(selector => {
+    console.log(selector);
+    value = value + (selector.value || '');
+  });
+  return value;
+}
+
 function isPrimaryComponent(node: CSSNode): boolean {
   let selector = parseSelector(node.selector);
   return (
@@ -131,6 +202,13 @@ function localizeComponentRule(node) {
       let prev = parent.nodes[idx - 1];
       let componentName = prev.value;
       let variantName = selector.value.slice(1);
+      if (selector.value === PROP_VARIANT_NAME) {
+        let expression = node.selector.slice(
+          selector.source.start.column + PROP_VARIANT_NAME.length,
+          selector.source.end.column - 1
+        );
+        variantName = variantName + '__' + hash(expression).slice(0, 6);
+      }
       let nextSelector = className({value: componentName + '__' + variantName});
       prev.removeSelf();
       selector.replaceWith(nextSelector);
@@ -164,12 +242,12 @@ function renderToJS(source: string, config: RenderConfig): string {
     }
   }
 
-  function registerComponentVariants(componentName, variantName) {
+  function registerComponentVariants({componentName, variantName, expression}) {
     invariant(
       components[componentName],
       'Trying to configure base for an unknown component %s', componentName
     );
-    components[componentName].variants[variantName] = true;
+    components[componentName].variants[variantName] = {expression};
   }
 
   function configureComponentBase(componentName, base) {
@@ -220,10 +298,7 @@ function renderToJS(source: string, config: RenderConfig): string {
     let variants = findVariants(node);
     for (let i = 0; i < variants.length; i++) {
       let variant = variants[i];
-      registerComponentVariants(
-        variant.componentName,
-        variant.variantName
-      );
+      registerComponentVariants(variant);
     }
   });
 
@@ -233,11 +308,20 @@ function renderToJS(source: string, config: RenderConfig): string {
     if (components.hasOwnProperty(componentName)) {
       let className = expr`styles.${identifier(componentName)}`;
       for (let variantName in component.variants) {
-        className = expr`
-          ${className} + (variant.${identifier(variantName)}
-                          ? ' ' + styles.${identifier(componentName + '__' + variantName)}
-                          : '')
-        `;
+        let variant = component.variants[variantName];
+        if (variant.expression) {
+          className = expr`
+            ${className} + (${variant.expression}
+                            ? ' ' + styles.${identifier(componentName + '__' + variantName)}
+                            : '')
+          `;
+        } else {
+          className = expr`
+            ${className} + (variant.${identifier(variantName)}
+                            ? ' ' + styles.${identifier(componentName + '__' + variantName)}
+                            : '')
+          `;
+        }
       }
       statements.push(stmt`
         export function ${identifier(componentName)}({variant, ...props}) {