TaggedTemplate and namespace import

packages/next-swc/crates/core/src/lib.rs

@@ -40,7 +40,6 @@ use swc_common::{self, chain, pass::Optional};
 use swc_common::{FileName, SourceFile, SourceMap};
 use swc_ecmascript::ast::EsVersion;
 use swc_ecmascript::transforms::pass::noop;
-use swc_ecmascript::transforms::react::Runtime;
 use swc_ecmascript::{
     parser::{lexer::Lexer, Parser, StringInput},
     visit::Fold,
@@ -178,37 +177,9 @@ pub fn custom_before_pass(
                 if !config.enabled.unwrap_or(false) {
                     return None;
                 }
-                let is_react_jsx_runtime = opts
-                    .swc
-                    .config
-                    .jsc
-                    .transform
-                    .as_ref()
-                    .and_then(|t| t.react.runtime)
-                    .map(|r| matches!(r, Runtime::Automatic))
-                    .unwrap_or(false);
-                let es_module_interop = opts
-                    .swc
-                    .config
-                    .module
-                    .as_ref()
-                    .map(|m| {
-                        if let ModuleConfig::CommonJs(c) = m {
-                            !c.no_interop
-                        } else {
-                            true
-                        }
-                    })
-                    .unwrap_or(true);
                 if let FileName::Real(path) = &file.name {
                     path.to_str().map(|_| {
-                        Either::Left(emotion::EmotionTransformer::new(
-                            config.clone(),
-                            path,
-                            cm,
-                            is_react_jsx_runtime,
-                            es_module_interop,
-                        ))
+                        Either::Left(emotion::EmotionTransformer::new(config.clone(), path, cm))
                     })
                 } else {
                     None

packages/next-swc/crates/core/tests/fixture.rs

@@ -272,7 +272,7 @@ fn shake_exports_fixture_default(input: PathBuf) {
     );
 }
 
-#[fixture("tests/fixture/emotion/**/input.tsx")]
+#[fixture("tests/fixture/emotion/*/input.tsx")]
 fn next_emotion_fixture(input: PathBuf) {
     let output = input.parent().unwrap().join("output.ts");
     test_fixture(
@@ -303,8 +303,6 @@ fn next_emotion_fixture(input: PathBuf) {
                     },
                     &input,
                     tr.cm.clone(),
-                    true,
-                    true,
                 ),
                 jsx,
             )

packages/next-swc/crates/core/tests/fixture/emotion/css-in-callback/input.tsx

@@ -1,4 +1,4 @@
-import { css } from '@emotion/react'
+import { css, Global } from '@emotion/react'
 import styled from '@emotion/styled'
 import { PureComponent } from 'react'
 import ReactDOM from 'react-dom'
@@ -15,25 +15,59 @@ const styles = css({
   width: '20px',
 })
 
-const DicContainer = styled.div({
+const styles2 = css`
+  color: red;
+  width: 20px;
+`
+
+const DivContainer = styled.div({
   background: 'red',
 })
 
+const DivContainer2 = styled.div`
+  background: red;
+`
+
 const SpanContainer = styled('span')({
   background: 'yellow',
 })
 
 const Container = styled('button')`
+  background: red;
   ${stylesInCallback}
   ${() =>
     css({
       background: 'red',
     })}
+  color: yellow;
+  font-size: 12px;
 `
+
+const Container2 = styled.div`
+  background: red;
+`
+
 export class SimpleComponent extends PureComponent {
   render() {
     return (
-      <Container>
+      <Container
+        css={css`
+          color: hotpink;
+        `}
+      >
+        <Global
+          styles={css`
+            html,
+            body {
+              padding: 3rem 1rem;
+              margin: 0;
+              background: papayawhip;
+              min-height: 100%;
+              font-family: Helvetica, Arial, sans-serif;
+              font-size: 24px;
+            }
+          `}
+        />
         <span>hello</span>
       </Container>
     )

packages/next-swc/crates/core/tests/fixture/emotion/namespace-import/input.tsx

@@ -0,0 +1,32 @@
+import * as emotionReact from '@emotion/react'
+import { PureComponent } from 'react'
+import ReactDOM from 'react-dom'
+
+const stylesInCallback = (props: any) =>
+  emotionReact.css({
+    color: 'red',
+    background: 'yellow',
+    width: `${props.scale * 100}px`,
+  })
+
+const styles = emotionReact.css({
+  color: 'red',
+  width: '20px',
+})
+
+const styles2 = emotionReact.css`
+  color: red;
+  width: 20px;
+`
+
+export class SimpleComponent extends PureComponent {
+  render() {
+    return (
+      <div className={styles}>
+        <span>hello</span>
+      </div>
+    )
+  }
+}
+
+ReactDOM.render(<SimpleComponent />, document.querySelector('#app'))

packages/next-swc/crates/core/tests/fixture/emotion/namespace-import/output.ts

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as emotionReact from "@emotion/react";
+import { PureComponent } from "react";
+import ReactDOM from "react-dom";
+const stylesInCallback = (props: any)=>emotionReact.css({
+        color: "red",
+        background: "yellow",
+        width: `${props.scale * 100}px`
+    }, "label:stylesInCallback", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL1VzZXJzL2xvbmd5aW5hbi93b3Jrc3BhY2UvZ2l0aHViL25leHQuanMvcGFja2FnZXMvbmV4dC1zd2MvY3JhdGVzL2NvcmUvdGVzdHMvZml4dHVyZS9lbW90aW9uL25hbWVzcGFjZS1pbXBvcnQvaW5wdXQudHN4Iiwic291cmNlcyI6WyIvVXNlcnMvbG9uZ3lpbmFuL3dvcmtzcGFjZS9naXRodWIvbmV4dC5qcy9wYWNrYWdlcy9uZXh0LXN3Yy9jcmF0ZXMvY29yZS90ZXN0cy9maXh0dXJlL2Vtb3Rpb24vbmFtZXNwYWNlLWltcG9ydC9pbnB1dC50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0ICogYXMgZW1vdGlvblJlYWN0IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuaW1wb3J0IHsgUHVyZUNvbXBvbmVudCB9IGZyb20gJ3JlYWN0J1xuaW1wb3J0IFJlYWN0RE9NIGZyb20gJ3JlYWN0LWRvbSdcblxuY29uc3Qgc3R5bGVzSW5DYWxsYmFjayA9IChwcm9wczogYW55KSA9PlxuICBlbW90aW9uUmVhY3QuY3NzKHtcbiAgICBjb2xvcjogJ3JlZCcsXG4gICAgYmFja2dyb3VuZDogJ3llbGxvdycsXG4gICAgd2lkdGg6IGAke3Byb3BzLnNjYWxlICogMTAwfXB4YCxcbiAgfSlcblxuY29uc3Qgc3R5bGVzID0gZW1vdGlvblJlYWN0LmNzcyh7XG4gIGNvbG9yOiAncmVkJyxcbiAgd2lkdGg6ICcyMHB4Jyxcbn0pXG5cbmNvbnN0IHN0eWxlczIgPSBlbW90aW9uUmVhY3QuY3NzYFxuICBjb2xvcjogcmVkO1xuICB3aWR0aDogMjBweDtcbmBcblxuZXhwb3J0IGNsYXNzIFNpbXBsZUNvbXBvbmVudCBleHRlbmRzIFB1cmVDb21wb25lbnQge1xuICByZW5kZXIoKSB7XG4gICAgcmV0dXJuIChcbiAgICAgIDxkaXYgY2xhc3NOYW1lPXtzdHlsZXN9PlxuICAgICAgICA8c3Bhbj5oZWxsbzwvc3Bhbj5cbiAgICAgIDwvZGl2PlxuICAgIClcbiAgfVxufVxuXG5SZWFjdERPTS5yZW5kZXIoPFNpbXBsZUNvbXBvbmVudCAvPiwgZG9jdW1lbnQucXVlcnlTZWxlY3RvcignI2FwcCcpKVxuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUtFIn0= */")
+;
+const styles = emotionReact.css({
+    color: "red",
+    width: "20px"
+}, "label:styles", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL1VzZXJzL2xvbmd5aW5hbi93b3Jrc3BhY2UvZ2l0aHViL25leHQuanMvcGFja2FnZXMvbmV4dC1zd2MvY3JhdGVzL2NvcmUvdGVzdHMvZml4dHVyZS9lbW90aW9uL25hbWVzcGFjZS1pbXBvcnQvaW5wdXQudHN4Iiwic291cmNlcyI6WyIvVXNlcnMvbG9uZ3lpbmFuL3dvcmtzcGFjZS9naXRodWIvbmV4dC5qcy9wYWNrYWdlcy9uZXh0LXN3Yy9jcmF0ZXMvY29yZS90ZXN0cy9maXh0dXJlL2Vtb3Rpb24vbmFtZXNwYWNlLWltcG9ydC9pbnB1dC50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0ICogYXMgZW1vdGlvblJlYWN0IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuaW1wb3J0IHsgUHVyZUNvbXBvbmVudCB9IGZyb20gJ3JlYWN0J1xuaW1wb3J0IFJlYWN0RE9NIGZyb20gJ3JlYWN0LWRvbSdcblxuY29uc3Qgc3R5bGVzSW5DYWxsYmFjayA9IChwcm9wczogYW55KSA9PlxuICBlbW90aW9uUmVhY3QuY3NzKHtcbiAgICBjb2xvcjogJ3JlZCcsXG4gICAgYmFja2dyb3VuZDogJ3llbGxvdycsXG4gICAgd2lkdGg6IGAke3Byb3BzLnNjYWxlICogMTAwfXB4YCxcbiAgfSlcblxuY29uc3Qgc3R5bGVzID0gZW1vdGlvblJlYWN0LmNzcyh7XG4gIGNvbG9yOiAncmVkJyxcbiAgd2lkdGg6ICcyMHB4Jyxcbn0pXG5cbmNvbnN0IHN0eWxlczIgPSBlbW90aW9uUmVhY3QuY3NzYFxuICBjb2xvcjogcmVkO1xuICB3aWR0aDogMjBweDtcbmBcblxuZXhwb3J0IGNsYXNzIFNpbXBsZUNvbXBvbmVudCBleHRlbmRzIFB1cmVDb21wb25lbnQge1xuICByZW5kZXIoKSB7XG4gICAgcmV0dXJuIChcbiAgICAgIDxkaXYgY2xhc3NOYW1lPXtzdHlsZXN9PlxuICAgICAgICA8c3Bhbj5oZWxsbzwvc3Bhbj5cbiAgICAgIDwvZGl2PlxuICAgIClcbiAgfVxufVxuXG5SZWFjdERPTS5yZW5kZXIoPFNpbXBsZUNvbXBvbmVudCAvPiwgZG9jdW1lbnQucXVlcnlTZWxlY3RvcignI2FwcCcpKVxuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVdlIn0= */");
+const styles2 = emotionReact.css("color:red;width:20px;", "label:styles2", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL1VzZXJzL2xvbmd5aW5hbi93b3Jrc3BhY2UvZ2l0aHViL25leHQuanMvcGFja2FnZXMvbmV4dC1zd2MvY3JhdGVzL2NvcmUvdGVzdHMvZml4dHVyZS9lbW90aW9uL25hbWVzcGFjZS1pbXBvcnQvaW5wdXQudHN4Iiwic291cmNlcyI6WyIvVXNlcnMvbG9uZ3lpbmFuL3dvcmtzcGFjZS9naXRodWIvbmV4dC5qcy9wYWNrYWdlcy9uZXh0LXN3Yy9jcmF0ZXMvY29yZS90ZXN0cy9maXh0dXJlL2Vtb3Rpb24vbmFtZXNwYWNlLWltcG9ydC9pbnB1dC50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0ICogYXMgZW1vdGlvblJlYWN0IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuaW1wb3J0IHsgUHVyZUNvbXBvbmVudCB9IGZyb20gJ3JlYWN0J1xuaW1wb3J0IFJlYWN0RE9NIGZyb20gJ3JlYWN0LWRvbSdcblxuY29uc3Qgc3R5bGVzSW5DYWxsYmFjayA9IChwcm9wczogYW55KSA9PlxuICBlbW90aW9uUmVhY3QuY3NzKHtcbiAgICBjb2xvcjogJ3JlZCcsXG4gICAgYmFja2dyb3VuZDogJ3llbGxvdycsXG4gICAgd2lkdGg6IGAke3Byb3BzLnNjYWxlICogMTAwfXB4YCxcbiAgfSlcblxuY29uc3Qgc3R5bGVzID0gZW1vdGlvblJlYWN0LmNzcyh7XG4gIGNvbG9yOiAncmVkJyxcbiAgd2lkdGg6ICcyMHB4Jyxcbn0pXG5cbmNvbnN0IHN0eWxlczIgPSBlbW90aW9uUmVhY3QuY3NzYFxuICBjb2xvcjogcmVkO1xuICB3aWR0aDogMjBweDtcbmBcblxuZXhwb3J0IGNsYXNzIFNpbXBsZUNvbXBvbmVudCBleHRlbmRzIFB1cmVDb21wb25lbnQge1xuICByZW5kZXIoKSB7XG4gICAgcmV0dXJuIChcbiAgICAgIDxkaXYgY2xhc3NOYW1lPXtzdHlsZXN9PlxuICAgICAgICA8c3Bhbj5oZWxsbzwvc3Bhbj5cbiAgICAgIDwvZGl2PlxuICAgIClcbiAgfVxufVxuXG5SZWFjdERPTS5yZW5kZXIoPFNpbXBsZUNvbXBvbmVudCAvPiwgZG9jdW1lbnQucXVlcnlTZWxlY3RvcignI2FwcCcpKVxuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWdCZ0IifQ== */");
+export class SimpleComponent extends PureComponent {
+    render() {
+        return _jsx("div", {
+            className: styles,
+            children: _jsx("span", {
+                children: "hello"
+            })
+        });
+    }
+}
+ReactDOM.render(_jsx(SimpleComponent, {}), document.querySelector("#app"));