test: add examples from #180

swc-project · Jan 12, 2024 · 7601c2e · 7601c2e
1 parent 9af519b
commit 7601c2e
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 6 deletions.
diff --git 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 (
+    <>
+      <Div>one</Div>
+      <div css={myStyles}>two</div>
+    </>
+  );
+}
+
+// Example 2
 const styles = {
   keyA: css({
     padding: 0,
@@ -8,4 +36,4 @@ const styles = {
     margin: 0,
   }),
 };
-const App = () => <div classname={styles.keyA}>hello world</div>;
+const App2 = () => <div classname={styles.keyA}>hello world</div>;
diff --git 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"
     });