diff --git a/packages/emotion/transform/tests/fixture/issues/180/input.tsx b/packages/emotion/transform/tests/fixture/issues/180/input.tsx index f03d76f6c..e5114660c 100644 --- a/packages/emotion/transform/tests/fixture/issues/180/input.tsx +++ b/packages/emotion/transform/tests/fixture/issues/180/input.tsx @@ -1,5 +1,33 @@ import { css } from "@emotion/react"; +import styled from "@emotion/styled"; +// Example 1 +function myStyled(Component) { + return styled(Component)` + background-color: red; + `; +} + +function myCss(color) { + return css` + background-color: ${color}; + `; +} + +const myStyles = myCss("red"); + +const Div = myStyled("div"); + +function App() { + return ( + <> +
one
+
two
+ + ); +} + +// Example 2 const styles = { keyA: css({ padding: 0, @@ -8,4 +36,4 @@ const styles = { margin: 0, }), }; -const App = () =>
hello world
; +const App2 = () =>
hello world
; diff --git a/packages/emotion/transform/tests/fixture/issues/180/output.ts b/packages/emotion/transform/tests/fixture/issues/180/output.ts index 5e521dd92..d14c33448 100644 --- a/packages/emotion/transform/tests/fixture/issues/180/output.ts +++ b/packages/emotion/transform/tests/fixture/issues/180/output.ts @@ -1,15 +1,41 @@ -import { jsx as _jsx } from "react/jsx-runtime"; +import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime"; import { css } from "@emotion/react"; +import styled from "@emotion/styled"; +// Example 1 +function myStyled(Component) { + return /*#__PURE__*/ styled(Component, { + target: "enb90uf0", + label: "myStyled" + })("background-color:red;", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5wdXQudHMiLCJzb3VyY2VzIjpbImlucHV0LnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gXCJAZW1vdGlvbi9yZWFjdFwiO1xuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5cbi8vIEV4YW1wbGUgMVxuZnVuY3Rpb24gbXlTdHlsZWQoQ29tcG9uZW50KSB7XG4gIHJldHVybiBzdHlsZWQoQ29tcG9uZW50KWBcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiByZWQ7XG4gIGA7XG59XG5cbmZ1bmN0aW9uIG15Q3NzKGNvbG9yKSB7XG4gIHJldHVybiBjc3NgXG4gICAgYmFja2dyb3VuZC1jb2xvcjogJHtjb2xvcn07XG4gIGA7XG59XG5cbmNvbnN0IG15U3R5bGVzID0gbXlDc3MoXCJyZWRcIik7XG5cbmNvbnN0IERpdiA9IG15U3R5bGVkKFwiZGl2XCIpO1xuXG5mdW5jdGlvbiBBcHAoKSB7XG4gIHJldHVybiAoXG4gICAgPD5cbiAgICAgIDxEaXY+b25lPC9EaXY+XG4gICAgICA8ZGl2IGNzcz17bXlTdHlsZXN9PnR3bzwvZGl2PlxuICAgIDwvPlxuICApO1xufVxuXG4vLyBFeGFtcGxlIDJcbmNvbnN0IHN0eWxlcyA9IHtcbiAga2V5QTogY3NzKHtcbiAgICBwYWRkaW5nOiAwLFxuICB9KSxcbiAga2V5QjogY3NzKHtcbiAgICBtYXJnaW46IDAsXG4gIH0pLFxufTtcbmNvbnN0IEFwcDIgPSAoKSA9PiA8ZGl2IGNsYXNzbmFtZT17c3R5bGVzLmtleUF9PmhlbGxvIHdvcmxkPC9kaXY+O1xuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUtTIn0= */"); +} +function myCss(color) { + return /*#__PURE__*/ css("background-color:", color, ";", "myCss", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5wdXQudHMiLCJzb3VyY2VzIjpbImlucHV0LnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gXCJAZW1vdGlvbi9yZWFjdFwiO1xuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5cbi8vIEV4YW1wbGUgMVxuZnVuY3Rpb24gbXlTdHlsZWQoQ29tcG9uZW50KSB7XG4gIHJldHVybiBzdHlsZWQoQ29tcG9uZW50KWBcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiByZWQ7XG4gIGA7XG59XG5cbmZ1bmN0aW9uIG15Q3NzKGNvbG9yKSB7XG4gIHJldHVybiBjc3NgXG4gICAgYmFja2dyb3VuZC1jb2xvcjogJHtjb2xvcn07XG4gIGA7XG59XG5cbmNvbnN0IG15U3R5bGVzID0gbXlDc3MoXCJyZWRcIik7XG5cbmNvbnN0IERpdiA9IG15U3R5bGVkKFwiZGl2XCIpO1xuXG5mdW5jdGlvbiBBcHAoKSB7XG4gIHJldHVybiAoXG4gICAgPD5cbiAgICAgIDxEaXY+b25lPC9EaXY+XG4gICAgICA8ZGl2IGNzcz17bXlTdHlsZXN9PnR3bzwvZGl2PlxuICAgIDwvPlxuICApO1xufVxuXG4vLyBFeGFtcGxlIDJcbmNvbnN0IHN0eWxlcyA9IHtcbiAga2V5QTogY3NzKHtcbiAgICBwYWRkaW5nOiAwLFxuICB9KSxcbiAga2V5QjogY3NzKHtcbiAgICBtYXJnaW46IDAsXG4gIH0pLFxufTtcbmNvbnN0IEFwcDIgPSAoKSA9PiA8ZGl2IGNsYXNzbmFtZT17c3R5bGVzLmtleUF9PmhlbGxvIHdvcmxkPC9kaXY+O1xuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVdTIn0= */"); +} +const myStyles = myCss("red"); +const Div = myStyled("div"); +function App() { + return /*#__PURE__*/ _jsxs(_Fragment, { + children: [ + /*#__PURE__*/ _jsx(Div, { + children: "one" + }), + /*#__PURE__*/ _jsx("div", { + css: myStyles, + children: "two" + }) + ] + }); +} +// Example 2 const styles = { keyA: /*#__PURE__*/ css({ padding: 0 - }, "label:keyA", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5wdXQudHMiLCJzb3VyY2VzIjpbImlucHV0LnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gXCJAZW1vdGlvbi9yZWFjdFwiO1xuXG5jb25zdCBzdHlsZXMgPSB7XG4gIGtleUE6IGNzcyh7XG4gICAgcGFkZGluZzogMCxcbiAgfSksXG4gIGtleUI6IGNzcyh7XG4gICAgbWFyZ2luOiAwLFxuICB9KSxcbn07XG5jb25zdCBBcHAgPSAoKSA9PiA8ZGl2IGNsYXNzbmFtZT17c3R5bGVzLmtleUF9PmhlbGxvIHdvcmxkPC9kaXY+O1xuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUdRIn0= */"), + }, "label:keyA", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5wdXQudHMiLCJzb3VyY2VzIjpbImlucHV0LnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gXCJAZW1vdGlvbi9yZWFjdFwiO1xuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5cbi8vIEV4YW1wbGUgMVxuZnVuY3Rpb24gbXlTdHlsZWQoQ29tcG9uZW50KSB7XG4gIHJldHVybiBzdHlsZWQoQ29tcG9uZW50KWBcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiByZWQ7XG4gIGA7XG59XG5cbmZ1bmN0aW9uIG15Q3NzKGNvbG9yKSB7XG4gIHJldHVybiBjc3NgXG4gICAgYmFja2dyb3VuZC1jb2xvcjogJHtjb2xvcn07XG4gIGA7XG59XG5cbmNvbnN0IG15U3R5bGVzID0gbXlDc3MoXCJyZWRcIik7XG5cbmNvbnN0IERpdiA9IG15U3R5bGVkKFwiZGl2XCIpO1xuXG5mdW5jdGlvbiBBcHAoKSB7XG4gIHJldHVybiAoXG4gICAgPD5cbiAgICAgIDxEaXY+b25lPC9EaXY+XG4gICAgICA8ZGl2IGNzcz17bXlTdHlsZXN9PnR3bzwvZGl2PlxuICAgIDwvPlxuICApO1xufVxuXG4vLyBFeGFtcGxlIDJcbmNvbnN0IHN0eWxlcyA9IHtcbiAga2V5QTogY3NzKHtcbiAgICBwYWRkaW5nOiAwLFxuICB9KSxcbiAga2V5QjogY3NzKHtcbiAgICBtYXJnaW46IDAsXG4gIH0pLFxufTtcbmNvbnN0IEFwcDIgPSAoKSA9PiA8ZGl2IGNsYXNzbmFtZT17c3R5bGVzLmtleUF9PmhlbGxvIHdvcmxkPC9kaXY+O1xuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQStCUSJ9 */"), keyB: /*#__PURE__*/ css({ margin: 0 - }, "label:keyB", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5wdXQudHMiLCJzb3VyY2VzIjpbImlucHV0LnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gXCJAZW1vdGlvbi9yZWFjdFwiO1xuXG5jb25zdCBzdHlsZXMgPSB7XG4gIGtleUE6IGNzcyh7XG4gICAgcGFkZGluZzogMCxcbiAgfSksXG4gIGtleUI6IGNzcyh7XG4gICAgbWFyZ2luOiAwLFxuICB9KSxcbn07XG5jb25zdCBBcHAgPSAoKSA9PiA8ZGl2IGNsYXNzbmFtZT17c3R5bGVzLmtleUF9PmhlbGxvIHdvcmxkPC9kaXY+O1xuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQU1RIn0= */") + }, "label:keyB", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5wdXQudHMiLCJzb3VyY2VzIjpbImlucHV0LnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gXCJAZW1vdGlvbi9yZWFjdFwiO1xuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5cbi8vIEV4YW1wbGUgMVxuZnVuY3Rpb24gbXlTdHlsZWQoQ29tcG9uZW50KSB7XG4gIHJldHVybiBzdHlsZWQoQ29tcG9uZW50KWBcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiByZWQ7XG4gIGA7XG59XG5cbmZ1bmN0aW9uIG15Q3NzKGNvbG9yKSB7XG4gIHJldHVybiBjc3NgXG4gICAgYmFja2dyb3VuZC1jb2xvcjogJHtjb2xvcn07XG4gIGA7XG59XG5cbmNvbnN0IG15U3R5bGVzID0gbXlDc3MoXCJyZWRcIik7XG5cbmNvbnN0IERpdiA9IG15U3R5bGVkKFwiZGl2XCIpO1xuXG5mdW5jdGlvbiBBcHAoKSB7XG4gIHJldHVybiAoXG4gICAgPD5cbiAgICAgIDxEaXY+b25lPC9EaXY+XG4gICAgICA8ZGl2IGNzcz17bXlTdHlsZXN9PnR3bzwvZGl2PlxuICAgIDwvPlxuICApO1xufVxuXG4vLyBFeGFtcGxlIDJcbmNvbnN0IHN0eWxlcyA9IHtcbiAga2V5QTogY3NzKHtcbiAgICBwYWRkaW5nOiAwLFxuICB9KSxcbiAga2V5QjogY3NzKHtcbiAgICBtYXJnaW46IDAsXG4gIH0pLFxufTtcbmNvbnN0IEFwcDIgPSAoKSA9PiA8ZGl2IGNsYXNzbmFtZT17c3R5bGVzLmtleUF9PmhlbGxvIHdvcmxkPC9kaXY+O1xuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWtDUSJ9 */") }; - -const App = ()=>/*#__PURE__*/ _jsx("div", { +const App2 = ()=>/*#__PURE__*/ _jsx("div", { classname: styles.keyA, children: "hello world" });