Merge pull request #142 from FormidableLabs/bug-onlyChildIsString

Bug: Make Children.only check handle string children

.eslintrc

@@ -189,7 +189,7 @@ rules:
     no-spaced-func: 2              # disallow space between function identifier and application
     no-ternary: 0                  # disallow the use of ternary operators
 
-    no-trailing-spaces: 2          # disallow trailing whitespace at the end of lines
+    no-trailing-spaces: 1          # disallow trailing whitespace at the end of lines
     no-multiple-empty-lines: 2     # disallow multiple empty lines
     no-underscore-dangle: 0        # disallow dangling underscores in identifiers
     no-wrap-func: 2                # disallow wrapping of non-IIFE statements in parens

modules/__tests__/resolve-styles-test.js

@@ -727,6 +727,13 @@ describe('resolveStyles', function () {
 
       expect(React.Children.only(result.props.children)).toBeTruthy();
     });
+
+    it.only('doesn\'t break when only child isn\'t ReactElement', function () {
+      var component = genComponent();
+      var renderedElement = <div>Foo</div>;
+
+      resolveStyles(component, renderedElement);
+    });
   });
 
 });

modules/keyframes.js

@@ -30,7 +30,7 @@ var createMarkupForStyles = function (style) {
 
 // Simple animation helper that injects CSS into a style object containing the
 // keyframes, and returns a string with the generated animation name.
-var keyframes = function (keyframes) {
+var keyframes = function (keyframeRules) {
   var name = 'Animation' + animationIndex;
   animationIndex += 1;
 
@@ -39,8 +39,8 @@ var keyframes = function (keyframes) {
   }
 
   var rule = '@' + keyframesPrefixed + ' ' + name + ' {\n' +
-    Object.keys(keyframes).map(function (percentage) {
-      var props = keyframes[percentage];
+    Object.keys(keyframeRules).map(function (percentage) {
+      var props = keyframeRules[percentage];
       var prefixedProps = prefix(props, 'css');
       var serializedProps = createMarkupForStyles(prefixedProps);
       return '  ' + percentage + ' {\n  ' + serializedProps + '\n  }';

modules/resolve-styles.js

@@ -111,16 +111,20 @@ var resolveStyles = function (component, renderedElement, existingKeyMap) {
   var newChildren = null;
   var oldChildren = renderedElement.props.children;
   if (oldChildren) {
-    if (React.Children.count(oldChildren) === 1) {
-      var child = React.Children.only(oldChildren);
-      newChildren = resolveStyles(component, child, existingKeyMap);
+    // If a React Element is an only child, don't wrap it in an array for
+    // React.Children.map() for React.Children.only() compatibility.
+    if (React.Children.count(oldChildren) === 1 && oldChildren.type) {
+      var onlyChild = React.Children.only(oldChildren);
+
+      newChildren = resolveStyles(component, onlyChild, existingKeyMap);
     } else {
       newChildren = React.Children.map(
         oldChildren,
         function (child) {
           if (React.isValidElement(child)) {
             return resolveStyles(component, child, existingKeyMap);
           }
+
           return child;
         }
       );