question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:7 (7 by maintainers)

github_iconTop GitHub Comments

1reaction
Andaristcommented, Mar 12, 2020

@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.

1reaction
Andaristcommented, Feb 29, 2020

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Avoid Heavy Babel Transformations by (Sometimes) Not ...
We could drastically slim the transformation by explicitly passing an array to it, but that's not always easy in a real application.
Read more >
Emotion css "prop" without the babel plugin - YouTube
Repo: https://codesandbox.io/s/729mym66o1Emotion Website: https://emotion.shA Unified Styling Language: ...
Read more >
How can I wrap a container around its css-transformed ...
Is there any way to wrap the parent container around the bounding box of the transformed element with CSS, or do I need...
Read more >
CSSTransformValue - Web APIs - MDN Web Docs
Chrome Ed... CSSTransformValue. Experimental Full support. Chrome66. Toggle history Ful... @@iterator. Experimental Full support. Chrome66. Toggle history Ful... CSSTransformValue() constructor. Experimental Full support. Chrome66. Toggle history...
Read more >
A Complete Guide To CSS Transforms And Transitions Property
So, what's the difference between CSS Transform and CSS Transition? The Transform property in CSS moves or modifies the appearance of an element...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found