Merge pull request #359 from styled-components/352/object-css-prop

handle complex expressions inside CSS prop object syntax

Author: quantizor

src/visitors/transpileCssProp.js

@@ -122,7 +122,11 @@ export default t => (path, state) => {
 
   if (!css) return
 
-  elem.node.attributes = elem.node.attributes.filter(attr => attr !== path.node)
+  // strip off css prop from final output
+  elem.node.attributes = elem.node.attributes.filter(x =>
+    t.isJSXAttribute(x) ? x.name.name !== 'css' : false
+  )
+
   elem.node.name = t.jSXIdentifier(id.name)
 
   if (elem.parentPath.node.closingElement) {
@@ -155,7 +159,10 @@ export default t => (path, state) => {
           // but not a object reference shorthand like css={{ color }}
           (t.isIdentifier(property.value)
             ? property.key.name !== property.value.name
-            : true))
+            : true) &&
+          // and not a tricky expression
+          !t.isLogicalExpression(property.value) &&
+          !t.isConditionalExpression(property.value))
       ) {
         replaceObjectWithPropFunction = true
 

test/fixtures/transpile-css-prop/code.js

@@ -214,3 +214,21 @@ const ObjectPropWithSpread = () => {
     />
   )
 }
+
+const ObjectInterpolationLogical = ({ bg, content, height, width, ...p }) => {
+  return (
+    <p
+      css={{
+        background: bg || 'red',
+        height: height ?? '100%',
+        width: width ? `${width}px` : '100%',
+        '::before': {
+          content,
+        },
+      }}
+      {...p}
+    >
+      H
+    </p>
+  )
+}

test/fixtures/transpile-css-prop/output.js

@@ -2,6 +2,8 @@
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
+var _excluded = ["bg", "content", "height", "width"];
+
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -10,6 +12,10 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = 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) } })); }
@@ -188,6 +194,18 @@ var ObjectPropWithSpread = function ObjectPropWithSpread() {
   } : {}} />;
 };
 
+var ObjectInterpolationLogical = function ObjectInterpolationLogical(_ref4) {
+  var bg = _ref4.bg,
+      content = _ref4.content,
+      height = _ref4.height,
+      width = _ref4.width,
+      p = _objectWithoutProperties(_ref4, _excluded);
+
+  return <_StyledP14 $_css15={bg || 'red'} $_css16={height !== null && height !== void 0 ? height : '100%'} $_css17={width ? "".concat(width, "px") : '100%'} $_css18={content}>
+      H
+    </_StyledP14>;
+};
+
 var _StyledP = (0, _styledComponents["default"])("p")(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["flex: 1;"])));
 
 var _StyledP2 = (0, _styledComponents["default"])("p")(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      flex: 1;\n    "])));
@@ -255,3 +273,14 @@ var _StyledP13 = (0, _styledComponents["default"])("p")(function (p) {
 var _StyledDiv = (0, _styledComponents["default"])("div")(function (p) {
   return _objectSpread(_objectSpread({}, p.$_css13), p.$_css14);
 });
+
+var _StyledP14 = (0, _styledComponents["default"])("p")(function (p) {
+  return {
+    background: p.$_css15,
+    height: p.$_css16,
+    width: p.$_css17,
+    '::before': {
+      content: p.$_css18
+    }
+  };
+});