diff --git a/errors/invalid-escape-sequence-in-emotion-tagged-template.md b/errors/invalid-escape-sequence-in-emotion-tagged-template.md new file mode 100644 index 0000000000000..bf482773aa859 --- /dev/null +++ b/errors/invalid-escape-sequence-in-emotion-tagged-template.md @@ -0,0 +1,20 @@ +# Invalid escape sequence in Emotion tagged template + +#### Why This Error Occurred + + + +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 + + + +Look for `\\` in the string to find the broken escape sequence(s). For example, `\\u` must be followed by four hex digits. + +### Useful Links + + + +- [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) diff --git a/errors/manifest.json b/errors/manifest.json index 41bb35c7d6004..8c78e3352fceb 100644 --- a/errors/manifest.json +++ b/errors/manifest.json @@ -737,6 +737,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" } ] } diff --git a/packages/next-swc/crates/emotion/src/lib.rs b/packages/next-swc/crates/emotion/src/lib.rs index 7dd8675593110..8b62318fc8038 100644 --- a/packages/next-swc/crates/emotion/src/lib.rs +++ b/packages/next-swc/crates/emotion/src/lib.rs @@ -9,7 +9,9 @@ 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, errors::HANDLER, util::take::Take, BytePos, SourceMapperDyn, DUMMY_SP, + }, ecma::utils::ExprFactory, ecma::visit::{Fold, FoldWith}, ecma::{ @@ -337,7 +339,21 @@ impl EmotionTransformer { 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 {