Merge pull request #1313 from alibaba/feat/style-array-to-object

feat: prop style array to Object.assign
alibaba · Aug 30, 2019 · fff9a18 · fff9a18
2 parents bdc633c + 5a65bcb
commit fff9a18
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 7 deletions.
diff --git a/packages/babel-plugin-transform-jsx-stylesheet/src/__tests__/index.js b/packages/babel-plugin-transform-jsx-stylesheet/src/__tests__/index.js
@@ -113,7 +113,7 @@ import appStyleSheet from './app.css';
 var _styleSheet = appStyleSheet;
 class App extends Component {
   render() {
-    return <div style={[_styleSheet["header1"], _styleSheet["header2"]]} />;
+    return <div style={Object.assign({}, _styleSheet["header1"], _styleSheet["header2"])} />;
   }
 }`);
   });
@@ -174,7 +174,7 @@ var _styleSheet = _mergeStyles(appStyleSheet, styleStyleSheet);
 
 class App extends Component {
   render() {
-    return <div style={[_styleSheet["header2"], styles.header1]} />;
+    return <div style={Object.assign({}, _styleSheet["header2"], styles.header1)} />;
   }
 }`);
   });
@@ -197,9 +197,9 @@ import appStyleSheet from './app.css';
 var _styleSheet = appStyleSheet;
 class App extends Component {
   render() {
-    return <div style={[_styleSheet["header"], {
+    return <div style={Object.assign({}, _styleSheet["header"], {
       height: 100
-    }]} />;
+    })} />;
   }
 }`);
   });

diff --git a/packages/babel-plugin-transform-jsx-stylesheet/src/index.js b/packages/babel-plugin-transform-jsx-stylesheet/src/index.js
@@ -177,7 +177,6 @@ function ${GET_STYLE_FUNC_NAME}(classNameExpression) {
           }
         }
 
-
         if (hasClassName) {
           // Dont remove className
           if (!retainClassName) {
@@ -219,10 +218,24 @@ function ${GET_STYLE_FUNC_NAME}(classNameExpression) {
             // style={this.props.useCustom ? custom : null} ConditionalExpression
             // style={custom || other} LogicalExpression
             } else {
-              styleAttribute.value.expression = t.arrayExpression(arrayExpression.concat(expression));
+              const mergeArrayExpression = arrayExpression.concat(expression);
+              mergeArrayExpression.unshift(t.objectExpression([]));
+              styleAttribute.value.expression = t.callExpression(
+                t.memberExpression(t.identifier('Object'), t.identifier('assign')),
+                mergeArrayExpression
+              );
             }
           } else {
-            let expression = arrayExpression.length === 1 ? arrayExpression[0] : t.arrayExpression(arrayExpression);
+            if (arrayExpression.length > 1) {
+              // Object.assign({}, ...)
+              arrayExpression.unshift(t.objectExpression([]));
+            }
+            let expression = arrayExpression.length === 1 ?
+              arrayExpression[0] :
+              t.callExpression(
+                t.memberExpression(t.identifier('Object'), t.identifier('assign')),
+                arrayExpression
+              );
             attributes.push(t.jSXAttribute(t.jSXIdentifier('style'), t.jSXExpressionContainer(expression)));
           }
         }