Add tricky expression on object expression (#381)

* except if property value is member expression * apply prettier
styled-components · Apr 5, 2023 · f701586 · f701586
1 parent a7d8394
commit f701586
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 0 deletions.
diff --git a/src/visitors/transpileCssProp.js b/src/visitors/transpileCssProp.js
@@ -163,6 +163,7 @@ export default t => (path, state) => {
             ? property.key.name !== property.value.name
             : true) &&
           // and not a tricky expression
+          !t.isMemberExpression(property.value) &&
           !t.isLogicalExpression(property.value) &&
           !t.isConditionalExpression(property.value))
       ) {

diff --git a/test/fixtures/transpile-css-prop/code.js b/test/fixtures/transpile-css-prop/code.js
@@ -233,6 +233,21 @@ const ObjectInterpolationLogical = ({ bg, content, height, width, ...p }) => {
   )
 }
 
+const ObjectInterpolationMember = p => {
+  const theme = useTheme()
+  const color = 'red'
+
+  return (
+    <p
+      css={{
+        color: theme.colors[color],
+      }}
+    >
+      H
+    </p>
+  )
+}
+
 const RenderPropComponentCSSProp = () => {
   return (
     <RenderPropComponent>

diff --git a/test/fixtures/transpile-css-prop/output.js b/test/fixtures/transpile-css-prop/output.js
@@ -206,6 +206,14 @@ var ObjectInterpolationLogical = function ObjectInterpolationLogical(_ref4) {
     </_StyledP14>;
 };
 
+var ObjectInterpolationMember = function ObjectInterpolationMember(p) {
+  var theme = useTheme();
+  var color = 'red';
+  return <_StyledP15 $_css19={theme.colors[color]}>
+      H
+    </_StyledP15>;
+};
+
 var RenderPropComponentCSSProp = function RenderPropComponentCSSProp() {
   return <RenderPropComponent>
       {function () {
@@ -309,6 +317,12 @@ var _StyledP14 = (0, _styledComponents["default"])("p")(function (p) {
   };
 });
 
+var _StyledP15 = (0, _styledComponents["default"])("p")(function (p) {
+  return {
+    color: p.$_css19
+  };
+});
+
 var _StyledDiv2 = (0, _styledComponents["default"])("div")(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n            color: black;\n          "])));
 
 var _StyledDiv3 = (0, _styledComponents["default"])("div")(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n            color: black;\n          "])));