[babel-plugin@v11] transform css prop without css wrapper for array value #1730
Description
Current behavior:
work well Component in v10
export const Graph = ({ children, inline, ...otherProps }: IGraphProps) => {
return (
<span
css={[
{
alignItems: "center",
verticalAlign: "middle",
lineHeight: "inherit",
},
{
"& > svg": {
width: "100%",
height: "auto",
},
},
{ display: inline ? "inline-flex" : "flex" },
]}
{...otherProps}>
{children}
</span>
);
};in v11 it is transformed to
var Graph = function Graph(_ref) {
var children = _ref.children,
inline = _ref.inline,
otherProps =
/*#__PURE__*/
_babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_1___default()(_ref, ["children", "inline"]);
return Object(_emotion_react__WEBPACK_IMPORTED_MODULE_3__["jsx"])("span",
/*#__PURE__*/
_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({
// here
// in v10, there have css of `@emotion/css` wrapper
css: ["align-items:center;vertical-align:middle;line-height:inherit;& > svg{width:100%;height:auto;}", {
display: inline ? "inline-flex" : "flex"
}, false ? undefined : ";label:Graph"]
}, otherProps), children);
};and styles broken
after added css wrapper of @emotion/react, it work well.
Expected behavior:
should transformed with css wrapper for array value.
or process it by core lib.
Environment information:
reactversion: 16.8.xemotionversion: v11.0.0-next.11