fix: don't break when spreading falsy value (#249)

Author: gpittarelli

src/createSpreadMapper.js

@@ -4,6 +4,7 @@ import {
   Expression,
   memberExpression,
   binaryExpression,
+  conditionalExpression,
   stringLiteral,
   logicalExpression,
   identifier,
@@ -43,25 +44,33 @@ const createSpreadMapper = (path: *, stats: *): { [destinationName: string]: Exp
         result[destinationName] = binaryExpression(
           '+',
           result[destinationName],
-          binaryExpression(
-            '+',
-            stringLiteral(' '),
-            logicalExpression(
-              '||',
-              memberExpression(
-                spread.argument,
-                identifier(destinationName),
-              ),
-              stringLiteral('')
-            )
-          ),
+          conditionalExpression(
+            spread.argument,
+            binaryExpression(
+              '+',
+              stringLiteral(' '),
+              logicalExpression(
+                '||',
+                memberExpression(
+                  spread.argument,
+                  identifier(destinationName),
+                ),
+                stringLiteral('')
+              )
+            ),
+            stringLiteral('')
+          )
         );
       } else {
-        result[destinationName] = logicalExpression(
-          '||',
-          memberExpression(
-            spread.argument,
-            identifier(destinationName),
+        result[destinationName] = conditionalExpression(
+          spread.argument,
+          logicalExpression(
+            '||',
+            memberExpression(
+              spread.argument,
+              identifier(destinationName),
+            ),
+            stringLiteral('')
           ),
           stringLiteral('')
         );

test/fixtures/react-css-modules/does not throw error if attribute has no name property/output.js

@@ -5,4 +5,4 @@ require("./bar.css");
 const props = {
   foo: 'bar'
 };
-<div className={"bar__a" + (" " + (props.className || ""))} {...props}></div>;
+<div className={"bar__a" + (" " + (props ? props.className || "" : ""))} {...props}></div>;

test/fixtures/react-css-modules/handle spread attributes/output.js

@@ -3,17 +3,17 @@
 require("./foo.css");
 
 const rest = {};
-<div {...rest} className={"b foo__a" + (" " + (rest.className || ""))}></div>;
-<div {...rest} className={"foo__a" + (" " + (rest.className || ""))}></div>;
-<div {...rest} activeClassName={((void 0).props.activeClassName ? (void 0).props.activeClassName + " " : "") + "foo__a" + (" " + (rest.activeClassName || ""))} className={"foo__a" + (" " + (rest.className || ""))}></div>;
-<div {...rest} activeClassName={"b foo__a" + (" " + (rest.activeClassName || ""))}></div>; // Should be okay if rest is put on last
+<div {...rest} className={"b foo__a" + (" " + (rest ? rest.className || "" : ""))}></div>;
+<div {...rest} className={"foo__a" + (" " + (rest ? rest.className || "" : ""))}></div>;
+<div {...rest} activeClassName={((void 0).props.activeClassName ? (void 0).props.activeClassName + " " : "") + "foo__a" + (" " + (rest ? rest.activeClassName || "" : ""))} className={"foo__a" + (" " + (rest ? rest.className || "" : ""))}></div>;
+<div {...rest} activeClassName={"b foo__a" + (" " + (rest ? rest.activeClassName || "" : ""))}></div>; // Should be okay if rest is put on last
 
-<div className={"foo__a" + (" " + (rest.className || ""))} {...rest}></div>;
+<div className={"foo__a" + (" " + (rest ? rest.className || "" : ""))} {...rest}></div>;
 const rest2 = {};
-<div {...rest} {...rest2} className={"foo__a" + (" " + ((rest.className || "") + (" " + (rest2.className || ""))))}></div>; // Should not do anything
+<div {...rest} {...rest2} className={"foo__a" + (" " + ((rest ? rest.className || "" : "") + (rest2 ? " " + (rest2.className || "") : "")))}></div>; // Should not do anything
 
 <div {...rest} {...rest2}></div>;
 <div {...rest} {...rest2} className="b"></div>;
 <div className="foo__a">
-  <div {...rest} activeClassName={"foo__a" + (" " + (rest.activeClassName || ""))}></div>
+  <div {...rest} activeClassName={"foo__a" + (" " + (rest ? rest.activeClassName || "" : ""))}></div>
 </div>;