Support Spread Element (#286)

* spread element support

* handled property mapping and nested

* fix comment

Author: benjaminRomano

src/visitors/transpileCssProp.js

@@ -125,6 +125,13 @@ 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,
+          []
+        )
         acc.push(property)
       } else if (
         // if a non-primitive value we have to interpolate it

test/fixtures/transpile-css-prop-all-options-on/code.js

@@ -136,6 +136,31 @@ const ObjectPropMixedInputs = p => {
   )
 }
 
+const SpreadObjectPropMixedInputs = p => {
+  const color = 'red'
+
+  return (
+    <p
+      css={{
+        ...{
+          '::before': { content: globalVar },
+          '::after': { content: getAfterValue() },
+          ...{
+            '::before': { content: globalVar },
+            '::after': { content: getAfterValue() },
+          },
+        },
+        background: p.background,
+        textAlign: 'left',
+        '::before': { content: globalVar },
+        '::after': { content: getAfterValue() },
+      }}
+    >
+      A
+    </p>
+  )
+}
+
 /* styled component defined after function it's used in */
 
 const EarlyUsageComponent = p => <Thing3 css="color: red;" />

test/fixtures/transpile-css-prop-all-options-on/output.js

@@ -6,6 +6,12 @@ var _SomeComponentPath = _interopRequireDefault(require("../SomeComponentPath"))
 
 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; }
+
 var _require = require('../SomeOtherComponentPath'),
     SomeOtherComponent = _require.SomeOtherComponent;
 /**
@@ -236,6 +242,43 @@ var ObjectPropMixedInputs = function ObjectPropMixedInputs(p) {
       A
     </_StyledP12>;
 };
+
+var _StyledP13 = (0, _styledComponents["default"])("p").withConfig({
+  displayName: "code___StyledP13",
+  componentId: "sc-7evkve-20"
+})(function (p) {
+  return _objectSpread({}, _objectSpread({
+    '::before': {
+      content: p._css8
+    },
+    '::after': {
+      content: p._css9
+    }
+  }, {
+    '::before': {
+      content: p._css10
+    },
+    '::after': {
+      content: p._css11
+    }
+  }), {
+    background: p._css12,
+    textAlign: 'left',
+    '::before': {
+      content: p._css13
+    },
+    '::after': {
+      content: p._css14
+    }
+  });
+});
+
+var SpreadObjectPropMixedInputs = function SpreadObjectPropMixedInputs(p) {
+  var color = 'red';
+  return <_StyledP13 _css8={globalVar} _css9={getAfterValue()} _css10={globalVar} _css11={getAfterValue()} _css12={p.background} _css13={globalVar} _css14={getAfterValue()}>
+      A
+    </_StyledP13>;
+};
 /* styled component defined after function it's used in */
 
 
@@ -245,12 +288,12 @@ var EarlyUsageComponent = function EarlyUsageComponent(p) {
 
 var Thing3 = _styledComponents["default"].div.withConfig({
   displayName: "code__Thing3",
-  componentId: "sc-7evkve-20"
+  componentId: "sc-7evkve-21"
 })(["color:blue;"]);
 
 var _StyledThing = (0, _styledComponents["default"])(Thing3).withConfig({
   displayName: "code___StyledThing",
-  componentId: "sc-7evkve-21"
+  componentId: "sc-7evkve-22"
 })(["color:red;"]);
 
 var EarlyUsageComponent2 = function EarlyUsageComponent2(p) {
@@ -265,12 +308,12 @@ function Thing4(props) {
 
 var _StyledThing2 = (0, _styledComponents["default"])(Thing4).withConfig({
   displayName: "code___StyledThing2",
-  componentId: "sc-7evkve-22"
+  componentId: "sc-7evkve-23"
 })(["color:red;"]);
 
 var _StyledSomeComponent = (0, _styledComponents["default"])(_SomeComponentPath["default"]).withConfig({
   displayName: "code___StyledSomeComponent",
-  componentId: "sc-7evkve-23"
+  componentId: "sc-7evkve-24"
 })(["color:red;"]);
 
 var ImportedComponentUsage = function ImportedComponentUsage(p) {