diff --git a/src/visitors/transpileCssProp.js b/src/visitors/transpileCssProp.js
index 8080316..930fcf4 100644
--- a/src/visitors/transpileCssProp.js
+++ b/src/visitors/transpileCssProp.js
@@ -123,8 +123,10 @@ export default t => (path, state) => {
if (!css) return
// 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.attributes = elem.node.attributes.filter(
+ x =>
+ t.isJSXSpreadAttribute(x) ||
+ (t.isJSXAttribute(x) ? x.name.name !== 'css' : false)
)
elem.node.name = t.jSXIdentifier(id.name)
diff --git a/test/fixtures/transpile-css-prop/code.js b/test/fixtures/transpile-css-prop/code.js
index d3bde8a..755c436 100644
--- a/test/fixtures/transpile-css-prop/code.js
+++ b/test/fixtures/transpile-css-prop/code.js
@@ -232,3 +232,40 @@ const ObjectInterpolationLogical = ({ bg, content, height, width, ...p }) => {
)
}
+
+const RenderPropComponentCSSProp = () => {
+ return (
+
+ {() => (
+
+ )}
+
+ )
+}
+
+const RenderPropComponentSpread = props => {
+ return (
+
+ {() => }
+
+ )
+}
+
+const RenderPropComponentSpreadCSSProp = props => {
+ return (
+
+ {() => (
+
+ )}
+
+ )
+}
diff --git a/test/fixtures/transpile-css-prop/output.js b/test/fixtures/transpile-css-prop/output.js
index b596cf3..339ef75 100644
--- a/test/fixtures/transpile-css-prop/output.js
+++ b/test/fixtures/transpile-css-prop/output.js
@@ -4,7 +4,7 @@ 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;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19;
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -201,11 +201,35 @@ var ObjectInterpolationLogical = function ObjectInterpolationLogical(_ref4) {
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}>
+ return <_StyledP14 {...p} $_css15={bg || 'red'} $_css16={height !== null && height !== void 0 ? height : '100%'} $_css17={width ? "".concat(width, "px") : '100%'} $_css18={content}>
H
;
};
+var RenderPropComponentCSSProp = function RenderPropComponentCSSProp() {
+ return
+ {function () {
+ return <_StyledDiv2 />;
+ }}
+ ;
+};
+
+var RenderPropComponentSpread = function RenderPropComponentSpread(props) {
+ return
+ {function () {
+ return ;
+ }}
+ ;
+};
+
+var RenderPropComponentSpreadCSSProp = function RenderPropComponentSpreadCSSProp(props) {
+ return
+ {function () {
+ return <_StyledDiv3 {...props.derivedProps} />;
+ }}
+ ;
+};
+
var _StyledP = (0, _styledComponents["default"])("p")(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["flex: 1;"])));
var _StyledP2 = (0, _styledComponents["default"])("p")(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n flex: 1;\n "])));
@@ -284,3 +308,7 @@ var _StyledP14 = (0, _styledComponents["default"])("p")(function (p) {
}
};
});
+
+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 "])));