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 "])));