teach plugin about spread variables in css prop

Author: quantizor

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/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' } : {}),
+      }}
+    />
+  )
+}

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);
+});

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' } : {}),
+      }}
+    />
+  )
+}

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);
+});