From cdf584a3b6a417d929bee2d5c792698cc87f46a1 Mon Sep 17 00:00:00 2001
From: AlbertLucianto <albertlucianto@gmail.com>
Date: Fri, 22 Mar 2019 11:14:35 +0800
Subject: [PATCH] fix: spread should not traverse children elements

---
 src/createSpreadMapper.js                     | 68 ++++++++++---------
 .../handle spread attributes/input.js         |  4 ++
 .../handle spread attributes/output.js        |  3 +
 3 files changed, 42 insertions(+), 33 deletions(-)

diff --git a/src/createSpreadMapper.js b/src/createSpreadMapper.js
index 7b99cf5..81d3cb6 100644
--- a/src/createSpreadMapper.js
+++ b/src/createSpreadMapper.js
@@ -6,7 +6,8 @@ import {
   binaryExpression,
   stringLiteral,
   logicalExpression,
-  identifier
+  identifier,
+  isJSXSpreadAttribute
 } from '@babel/types';
 import optionsDefaults from './schemas/optionsDefaults';
 
@@ -29,43 +30,44 @@ const createSpreadMapper = (path: *, stats: *): { [destinationName: string]: Exp
     return pair[0];
   });
 
-  path.traverse({
-    JSXSpreadAttribute (spreadPath: *) {
-      const spread = spreadPath.node;
+  const spreadAttributes = path.node.openingElement.attributes
+    .filter((attr) => {
+      return isJSXSpreadAttribute(attr);
+    });
 
-      for (const attributeKey of attributeKeys) {
-        const destinationName = attributeNames[attributeKey];
+  for (const spread of spreadAttributes) {
+    for (const attributeKey of attributeKeys) {
+      const destinationName = attributeNames[attributeKey];
 
-        if (result[destinationName]) {
-          result[destinationName] = binaryExpression(
+      if (result[destinationName]) {
+        result[destinationName] = binaryExpression(
+          '+',
+          result[destinationName],
+          binaryExpression(
             '+',
-            result[destinationName],
-            binaryExpression(
-              '+',
-              stringLiteral(' '),
-              logicalExpression(
-                '||',
-                memberExpression(
-                  spread.argument,
-                  identifier(destinationName),
-                ),
-                stringLiteral('')
-              )
-            ),
-          );
-        } else {
-          result[destinationName] = logicalExpression(
-            '||',
-            memberExpression(
-              spread.argument,
-              identifier(destinationName),
-            ),
-            stringLiteral('')
-          );
-        }
+            stringLiteral(' '),
+            logicalExpression(
+              '||',
+              memberExpression(
+                spread.argument,
+                identifier(destinationName),
+              ),
+              stringLiteral('')
+            )
+          ),
+        );
+      } else {
+        result[destinationName] = logicalExpression(
+          '||',
+          memberExpression(
+            spread.argument,
+            identifier(destinationName),
+          ),
+          stringLiteral('')
+        );
       }
     }
-  });
+  }
 
   return result;
 };
diff --git a/test/fixtures/react-css-modules/handle spread attributes/input.js b/test/fixtures/react-css-modules/handle spread attributes/input.js
index efb4b6d..8e09b6d 100644
--- a/test/fixtures/react-css-modules/handle spread attributes/input.js	
+++ b/test/fixtures/react-css-modules/handle spread attributes/input.js	
@@ -20,3 +20,7 @@ const rest2 = {};
 // Should not do anything
 <div {...rest} {...rest2}></div>;
 <div {...rest} {...rest2} className="b"></div>;
+
+<div styleName="a">
+  <div {...rest} activeStyleName="a"></div>
+</div>
diff --git a/test/fixtures/react-css-modules/handle spread attributes/output.js b/test/fixtures/react-css-modules/handle spread attributes/output.js
index 49609e0..59ec5c2 100644
--- a/test/fixtures/react-css-modules/handle spread attributes/output.js	
+++ b/test/fixtures/react-css-modules/handle spread attributes/output.js	
@@ -14,3 +14,6 @@ const rest2 = {};
 
 <div {...rest} {...rest2}></div>;
 <div {...rest} {...rest2} className="b"></div>;
+<div className="foo__a">
+  <div {...rest} activeClassName={"foo__a" + (" " + (rest.activeClassName || ""))}></div>
+</div>;