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"
});