Repository: styled-components/babel-plugin-styled-components (js)

Issue:
TypeError: Cannot read property 'reduce' of undefined
When i try to use this syntac `css={{ ...css, ...(playing ? { opacity: 0, bottom: "-100px" } : {}) }}`, it fails and it says `TypeError: Cannot read property 'reduce' of undefined`
here is my code:

![Screen Shot 2021-07-03 at 9 13 13 PM](https://user-images.githubusercontent.com/57092046/124361304-a55a2500-dc43-11eb-8ab4-b1388a4720ae.png)

![Screen Shot 2021-07-03 at 9 17 57 PM](https://user-images.githubusercontent.com/57092046/124361379-29aca800-dc44-11eb-99cc-4a525ef20796.png)

![Screen Shot 2021-07-03 at 9 18 34 PM](https://user-images.githubusercontent.com/57092046/124361392-49dc6700-dc44-11eb-9f9c-2a72382ca96f.png)

![Screen Shot 2021-07-03 at 9 18 44 PM](https://user-images.githubusercontent.com/57092046/124361402-4fd24800-dc44-11eb-83d7-73b731f1d139.png)

sorry i don't have time to prepare a workaround 
if it's not possible for you to debug in this way i can do something about that.

Pull request:
teach babel plugin about certain spread application scenarios with "css" prop
Fixes #337 #332 

Patch:
diff --git a/package.json b/package.json
index 2108b85..cbb4c6c 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "1.13.1",
+  "version": "1.13.2-test.0",
   "name": "babel-plugin-styled-components",
   "description": "Improve the debugging experience and add server-side rendering support to styled-components",
   "repository": "styled-components/babel-plugin-styled-components",
diff --git a/src/visitors/transpileCssProp.js b/src/visitors/transpileCssProp.js
index 8da6e7e..d9f8a46 100644
--- a/src/visitors/transpileCssProp.js
+++ b/src/visitors/transpileCssProp.js
@@ -180,11 +180,28 @@ export default t => (path, state) => {
 
         acc.push(property)
       } else if (t.isSpreadElement(property)) {
-        // recurse for objects within objects (e.g. {'::before': { content: x }})
-        property.argument.properties = property.argument.properties.reduce(
-          propertiesReducer,
-          []
-        )
+        // handle spread variables and such
+
+        if (t.isObjectExpression(property.argument)) {
+          property.argument.properties = property.argument.properties.reduce(
+            propertiesReducer,
+            []
+          )
+        } else {
+          replaceObjectWithPropFunction = true
+
+          const identifier = getLocalIdentifier(path)
+
+          elem.node.attributes.push(
+            t.jSXAttribute(
+              t.jSXIdentifier(identifier.name),
+              t.jSXExpressionContainer(property.argument)
+            )
+          )
+
+          property.argument = t.memberExpression(p, identifier)
+        }
+
         acc.push(property)
       } else if (
         // if a non-primitive value we have to interpolate it


Test patch:
diff --git a/test/fixtures/transpile-css-prop-all-options-on/code.js b/test/fixtures/transpile-css-prop-all-options-on/code.js
index 4cd3c03..4351b8c 100644
--- a/test/fixtures/transpile-css-prop-all-options-on/code.js
+++ b/test/fixtures/transpile-css-prop-all-options-on/code.js
@@ -255,3 +255,17 @@ const ObjectFnSimpleInterpolationInKey = p => {
     </Thing3>
   )
 }
+
+const ObjectPropWithSpread = () => {
+  const css = { color: 'red' }
+  const playing = true
+
+  return (
+    <div
+      css={{
+        ...css,
+        ...(playing ? { opacity: 0, bottom: '-100px' } : {}),
+      }}
+    />
+  )
+}
diff --git a/test/fixtures/transpile-css-prop-all-options-on/output.js b/test/fixtures/transpile-css-prop-all-options-on/output.js
index d49cc42..d3ac28e 100644
--- a/test/fixtures/transpile-css-prop-all-options-on/output.js
+++ b/test/fixtures/transpile-css-prop-all-options-on/output.js
@@ -251,6 +251,17 @@ var ObjectFnSimpleInterpolationInKey = function ObjectFnSimpleInterpolationInKey
     </_StyledThing6>;
 };
 
+var ObjectPropWithSpread = function ObjectPropWithSpread() {
+  var css = {
+    color: 'red'
+  };
+  var playing = true;
+  return <_StyledDiv $_css20={css} $_css21={playing ? {
+    opacity: 0,
+    bottom: '-100px'
+  } : {}} />;
+};
+
 var _StyledP = (0, _styledComponents["default"])("p").withConfig({
   displayName: "code___StyledP",
   componentId: "sc-7evkve-10"
@@ -403,3 +414,10 @@ var _StyledP14 = (0, _styledComponents["default"])("p").withConfig({
     color: p.$_css15
   };
 });
+
+var _StyledDiv = (0, _styledComponents["default"])("div").withConfig({
+  displayName: "code___StyledDiv",
+  componentId: "sc-7evkve-30"
+})(function (p) {
+  return _objectSpread(_objectSpread({}, p.$_css20), p.$_css21);
+});
diff --git a/test/fixtures/transpile-css-prop/code.js b/test/fixtures/transpile-css-prop/code.js
index 4c00f8e..501bab0 100644
--- a/test/fixtures/transpile-css-prop/code.js
+++ b/test/fixtures/transpile-css-prop/code.js
@@ -200,3 +200,17 @@ const ObjectPropMixedInputs = p => {
     </p>
   )
 }
+
+const ObjectPropWithSpread = () => {
+  const css = { color: 'red' }
+  const playing = true
+
+  return (
+    <div
+      css={{
+        ...css,
+        ...(playing ? { opacity: 0, bottom: '-100px' } : {}),
+      }}
+    />
+  )
+}
diff --git a/test/fixtures/transpile-css-prop/output.js b/test/fixtures/transpile-css-prop/output.js
index 1dbccc2..f726794 100644
--- a/test/fixtures/transpile-css-prop/output.js
+++ b/test/fixtures/transpile-css-prop/output.js
@@ -6,6 +6,10 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
@@ -173,6 +177,17 @@ var ObjectPropMixedInputs = function ObjectPropMixedInputs(p) {
     </_StyledP13>;
 };
 
+var ObjectPropWithSpread = function ObjectPropWithSpread() {
+  var css = {
+    color: 'red'
+  };
+  var playing = true;
+  return <_StyledDiv $_css13={css} $_css14={playing ? {
+    opacity: 0,
+    bottom: '-100px'
+  } : {}} />;
+};
+
 var _StyledP = (0, _styledComponents["default"])("p")(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["flex: 1;"])));
 
 var _StyledP2 = (0, _styledComponents["default"])("p")(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      flex: 1;\n    "])));
@@ -236,3 +251,7 @@ var _StyledP13 = (0, _styledComponents["default"])("p")(function (p) {
     }
   };
 });
+
+var _StyledDiv = (0, _styledComponents["default"])("div")(function (p) {
+  return _objectSpread(_objectSpread({}, p.$_css13), p.$_css14);
+});