Fix Emotion SWC transform escape sequence bugs (#40385, #38301)

errors/invalid-escape-sequence-in-emotion-tagged-template.md

@@ -0,0 +1,20 @@
+# Invalid escape sequence in Emotion tagged template
+
+#### Why This Error Occurred
+
+<!-- Explain why the error occurred. Ensure the description makes it clear why the warning/error exists -->
+
+One or more escape sequence in an Emotion tagged template was incorrect. This prevented correct parsing before transformations were applied.
+
+#### Possible Ways to Fix It
+
+<!-- Explain how to fix the warning/error, potentially by providing alternative approaches. Ensure this section is actionable by users -->
+
+Look for `\\` in the string to find the broken escape sequence(s). For example, `\\u` must be followed by four hex digits.
+
+### Useful Links
+
+<!-- Add links to relevant documentation -->
+
+- [Next.js compiler Emotion configuration](https://nextjs.org/docs/advanced-features/compiler#emotion)
+- [ECMAScript 2023 syntax for string literals](https://tc39.es/ecma262/multipage/ecmascript-language-lexical-grammar.html#sec-literals-string-literals)

errors/manifest.json

@@ -733,6 +733,10 @@
         {
           "title": "nonce-contained-invalid-characters",
           "path": "/errors/nonce-contained-invalid-characters.md"
+        },
+        {
+          "title": "invalid-escape-sequence-in-emotion-tagged-template",
+          "path": "/errors/invalid-escape-sequence-in-emotion-tagged-template.md"
         }
       ]
     }

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

@@ -9,7 +9,7 @@ use regex::Regex;
 use serde::{Deserialize, Serialize};
 use sourcemap::{RawToken, SourceMap as RawSourcemap};
 use swc_core::{
-    common::{comments::Comments, util::take::Take, BytePos, SourceMapperDyn, DUMMY_SP},
+    common::{comments::Comments, util::take::Take, BytePos, SourceMapperDyn, DUMMY_SP, errors::HANDLER},
     ecma::utils::ExprFactory,
     ecma::visit::{Fold, FoldWith},
     ecma::{
@@ -337,7 +337,21 @@ impl<C: Comments> EmotionTransformer<C> {
             if index % 2 == 0 {
                 if let Some(q) = tagged_tpl.quasis.get_mut(i) {
                     let q = q.take();
-                    let minified = minify_css_string(&q.raw, index == 0, index == args_len - 1);
+                    let input = match q.cooked {
+                        Some(cooked) => cooked,
+                        _ => {
+                            HANDLER.with(|handler| {
+                                handler
+                                    .struct_span_err(
+                                        q.span,
+                                        "This tagged template contains an invalid escape sequence.\nSee: https://nextjs.org/docs/messages/invalid-escape-sequence-in-emotion-tagged-template",
+                                    )
+                                    .emit()
+                            });
+                            q.raw
+                        },
+                    };
+                    let minified = minify_css_string(&input, index == 0, index == args_len - 1);
                     // Compress one more spaces into one space
                     if minified.replace(' ', "").is_empty() {
                         if index != 0 && index != args_len - 1 {