Throw error when ts file contains css.resolve (#34149)

Throws a more helpful error when `css.resolve` is used within a `.ts` file.

Related issue: vercel/styled-jsx#780

## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes by running `yarn lint`

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

@@ -120,7 +120,7 @@ pub fn custom_before_pass(
 
     chain!(
         disallow_re_export_all_in_page::disallow_re_export_all_in_page(opts.is_page_file),
-        styled_jsx::styled_jsx(cm.clone()),
+        styled_jsx::styled_jsx(cm.clone(), file.name.clone()),
         hook_optimizer::hook_optimizer(),
         match &opts.styled_components {
             Some(config) => {

packages/next-swc/crates/core/src/styled_jsx/mod.rs

@@ -3,8 +3,7 @@ use std::collections::hash_map::DefaultHasher;
 use std::hash::{Hash, Hasher};
 use std::mem::take;
 use std::sync::Arc;
-use swc_common::SourceMap;
-use swc_common::{collections::AHashSet, Span, DUMMY_SP};
+use swc_common::{collections::AHashSet, FileName, SourceMap, Span, DUMMY_SP};
 use swc_ecmascript::ast::*;
 use swc_ecmascript::minifier::{
     eval::{EvalResult, Evaluator},
@@ -25,9 +24,18 @@ use utils::*;
 mod transform_css;
 mod utils;
 
-pub fn styled_jsx(cm: Arc<SourceMap>) -> impl Fold {
+pub fn styled_jsx(cm: Arc<SourceMap>, file_name: FileName) -> impl Fold {
+    let file_name = match file_name {
+        FileName::Real(real_file_name) => match real_file_name.to_str() {
+            Some(real_file_name) => Some(real_file_name.to_string()),
+            None => None,
+        },
+        _ => None,
+    };
+
     StyledJSXTransformer {
         cm,
+        file_name,
         styles: Default::default(),
         static_class_name: Default::default(),
         class_name: Default::default(),
@@ -49,6 +57,7 @@ pub fn styled_jsx(cm: Arc<SourceMap>) -> impl Fold {
 
 struct StyledJSXTransformer {
     cm: Arc<SourceMap>,
+    file_name: Option<String>,
     styles: Vec<JSXStyle>,
     static_class_name: Option<String>,
     class_name: Option<Expr>,
@@ -389,7 +398,21 @@ impl Fold for StyledJSXTransformer {
         self.bindings = collect_decls(&module);
         self.evaluator = Some(Evaluator::new(module.clone(), Marks::new()));
         self.style_import_name = Some(get_usable_import_specifier(&module.body));
-        module.fold_children_with(self)
+        let module = module.fold_children_with(self);
+        if self.file_has_css_resolve
+            && self.file_name.is_some()
+            && self.file_name.as_ref().unwrap().ends_with(".ts")
+        {
+            let file_name: &str = self.file_name.as_ref().unwrap();
+            HANDLER.with(|handler| {
+                handler.err(&format!(
+                    "{} uses `css.resolve`, but ends with `.ts`. The file extension needs to be \
+                     `.tsx` so that the jsx injected by `css.resolve` will be transformed.",
+                    file_name
+                ));
+            });
+        }
+        module
     }
 }
 

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

@@ -47,7 +47,17 @@ fn next_dynamic_errors(input: PathBuf) {
 #[fixture("tests/errors/styled-jsx/**/input.js")]
 fn styled_jsx_errors(input: PathBuf) {
     let output = input.parent().unwrap().join("output.js");
-    test_fixture_allowing_error(syntax(), &|t| styled_jsx(t.cm.clone()), &input, &output);
+    let file_name = match input.to_str().unwrap().contains("ts-with-css-resolve") {
+        true => FileName::Real(PathBuf::from("/some-project/src/some-file.ts")),
+        false => FileName::Real(PathBuf::from("/some-project/src/some-file.js")),
+    };
+
+    test_fixture_allowing_error(
+        syntax(),
+        &|t| styled_jsx(t.cm.clone(), file_name.clone()),
+        &input,
+        &output,
+    );
 }
 
 #[fixture("tests/errors/next-ssg/**/input.js")]

packages/next-swc/crates/core/tests/errors/styled-jsx/ts-with-css-resolve/input.js

@@ -0,0 +1,10 @@
+import css from 'styled-jsx/css'
+
+export default css.resolve`
+  .container {
+    background: #000;
+    color: white;
+    font-weight: 700;
+    height: 100px;
+  }
+`

packages/next-swc/crates/core/tests/errors/styled-jsx/ts-with-css-resolve/output.js

@@ -0,0 +1,5 @@
+import _JSXStyle from "styled-jsx/style";
+export default {
+    styles: <_JSXStyle id={"71f03d42ea0ec6"}>{".container.jsx-71f03d42ea0ec6{background:#000;\ncolor:white;\nfont-weight:700;\nheight:100px}"}</_JSXStyle>,
+    className: "jsx-71f03d42ea0ec6"
+};

packages/next-swc/crates/core/tests/errors/styled-jsx/ts-with-css-resolve/output.stderr

@@ -0,0 +1,2 @@
+error: /some-project/src/some-file.ts uses `css.resolve`, but ends with `.ts`. The file extension needs to be `.tsx` so that the jsx injected by `css.resolve` will be transformed.
+

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

@@ -113,7 +113,15 @@ fn styled_jsx_fixture(input: PathBuf) {
     let output = input.parent().unwrap().join("output.js");
     test_fixture(
         syntax(),
-        &|t| chain!(resolver(), styled_jsx(t.cm.clone())),
+        &|t| {
+            chain!(
+                resolver(),
+                styled_jsx(
+                    t.cm.clone(),
+                    FileName::Real(PathBuf::from("/some-project/src/some-file.js"))
+                )
+            )
+        },
         &input,
         &output,
     );
@@ -130,7 +138,13 @@ fn styled_jsx_fixture(input: PathBuf) {
                 let _mark = Mark::fresh(Mark::root());
             }
 
-            chain!(resolver(), styled_jsx(t.cm.clone()))
+            chain!(
+                resolver(),
+                styled_jsx(
+                    t.cm.clone(),
+                    FileName::Real(PathBuf::from("/some-project/src/some-file.js"))
+                )
+            )
         },
         &input,
         &output,