Merge pull request #15 from DeXTeD/master

fix: variants and pseudo with a dash in name

Author: andreypopp

src/__tests__/fixtures/custom-variant-with-dash.css

@@ -0,0 +1,3 @@
+.Label__veryLargeText {
+    font-size: 3em
+}

src/__tests__/fixtures/custom-variant-with-dash.js

@@ -0,0 +1,26 @@
+var React = require("react");
+
+var styles = require("css");
+
+function reconcileProps(props, className) {
+  var nextProps = {};
+
+  for (var k in props) {
+    if (k === 'variant') {
+      continue;
+    }
+
+    if (props.hasOwnProperty(k)) {
+      nextProps[k] = props[k];
+    }
+  }
+
+  nextProps.className = className;
+  return nextProps;
+}
+
+module.exports.Label = function Label(props) {
+  var variant = props.variant || {};
+  var className = styles.Label + (variant.veryLargeText ? ' ' + styles.Label__veryLargeText : '');
+  return React.createElement("div", reconcileProps(props, className));
+};

src/__tests__/fixtures/custom-variant-with-dash.react.css

@@ -0,0 +1,3 @@
+Label:very-large-text {
+  font-size: 3em;
+}

src/__tests__/fixtures/pseudo.css

@@ -0,0 +1,3 @@
+.Label:first-child,.Label__firstChild {
+    color: red
+}

src/__tests__/fixtures/pseudo.js

@@ -0,0 +1,26 @@
+var React = require("react");
+
+var styles = require("css");
+
+function reconcileProps(props, className) {
+  var nextProps = {};
+
+  for (var k in props) {
+    if (k === 'variant') {
+      continue;
+    }
+
+    if (props.hasOwnProperty(k)) {
+      nextProps[k] = props[k];
+    }
+  }
+
+  nextProps.className = className;
+  return nextProps;
+}
+
+module.exports.Label = function Label(props) {
+  var variant = props.variant || {};
+  var className = styles.Label + (variant.firstChild ? ' ' + styles.Label__firstChild : '');
+  return React.createElement("div", reconcileProps(props, className));
+};

src/__tests__/fixtures/pseudo.react.css

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

src/index.js

@@ -56,6 +56,10 @@ function hash(value) {
   return hasher.digest('hex');
 }
 
+function dashToCamelCase(name: string) {
+  return name.replace(/-([a-z])/g, word => word[1].toUpperCase());
+}
+
 function parseSelector(selector) {
   let parser = createSelectorParser();
   return parser.process(selector).res;
@@ -181,7 +185,7 @@ function localizeComponentRule(node) {
       let prev = selector.parent.nodes[idx - 1];
       if (prev && prev.type === 'tag' && componentNames.indexOf(prev.value) > -1) {
         let componentName = prev.value;
-        let variantName = selector.value.slice(1);
+        let variantName = dashToCamelCase(selector.value.slice(1));
         if (CSSPseudoClassList[variantName]) {
           selector.parent.parent.append(className({value: componentName + '__' + variantName}));
         } else {
@@ -194,7 +198,7 @@ function localizeComponentRule(node) {
       let idx = parent.nodes.indexOf(selector);
       let prev = parent.nodes[idx - 1];
       let componentName = prev.value;
-      let variantName = selector.value.slice(1);
+      let variantName = dashToCamelCase(selector.value.slice(1));
       if (selector.value === PROP_VARIANT_NAME) {
         let expression = node.selector.slice(
           selector.source.start.column + PROP_VARIANT_NAME.length,
@@ -316,6 +320,7 @@ function renderToJS(source: string, config: RenderConfig): string {
       let className = expr`styles.${identifier(componentName)}`;
       for (let variantName in component.variants) {
         let variant = component.variants[variantName];
+        variantName = dashToCamelCase(variantName);
         if (variant.expression) {
           className = expr`
             ${className} + (${variant.expression}