Emotion: [babel-plugin@v11] transform css prop without css wrapper for array value

[morlay]

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:

• react version: 16.8.x
• emotion version: v11.0.0-next.11

[Andarist]

Could you prepare a runnable repro case? It would allow me to jump into the issue quicker.

[morlay]

@Andarist
https://github.com/morlay/emotion-issue
yarn start

here may the issue cause.

[Andarist]

@morlay thank you very much for the report and the repro case ❤️ I've diagnosed the underlying issue, gonna work on the fix tomorrow.

[Andarist]

I've prepared a fix for this https://github.com/emotion-js/emotion/pull/1732 . We should be able to ship this by the end of the week.

[Andarist]

Sorry that you had to wait so long, I've just merged in the fix for this issue - https://github.com/emotion-js/emotion/pull/1732 . Gonna do a fresh release within the next few days.

[morlay]

hi @Andarist.

new next version still not ship to npm registry. https://github.com/emotion-js/emotion/pull/1735

anything blocked?

[Andarist]

@morlay sorry for the delay, I was expecting to sit down to look through other open issues about v11 and do a release then. I couldn't find the time to do so within the last 2 weeks, I'm free now and should do a fresh release by the end of the weekend.