[babel-plugin@v11] transform css prop without css wrapper for array value
See original GitHub issueCurrent 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.xemotion
version: v11.0.0-next.11
Issue Analytics
- State:
- Created 4 years ago
- Comments:7 (7 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@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.
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.