Merge branch 'canary' into update/trace-external-resolve

docs/api-reference/next.config.js/headers.md

@@ -83,7 +83,7 @@ module.exports = {
           },
         ],
       },
-    ],
+    ]
   },
 }
 ```
@@ -109,7 +109,7 @@ module.exports = {
           },
         ],
       },
-    ],
+    ]
   },
 }
 ```
@@ -135,7 +135,7 @@ module.exports = {
           },
         ],
       },
-    ],
+    ]
   },
 }
 ```
@@ -157,7 +157,7 @@ module.exports = {
           },
         ],
       },
-    ],
+    ]
   },
 }
 ```

packages/next/build/swc/src/styled_jsx/mod.rs

@@ -419,7 +419,7 @@ impl StyledJSXTransformer {
                         let placeholder = if i == quasis.len() - 1 {
                             String::new()
                         } else {
-                            format!("__styled-jsx-placeholder__{}", i)
+                            format!("__styled-jsx-placeholder-{}__", i)
                         };
                         s = format!("{}{}{}", s, quasis[i].raw.value, placeholder)
                     }

packages/next/build/swc/src/styled_jsx/transform_css.rs

@@ -74,12 +74,12 @@ pub fn transform_css(
         return Ok(string_literal_expr(&s));
     }
 
-    let mut parts: Vec<&str> = s.split("__styled-jsx-placeholder__").collect();
+    let mut parts: Vec<&str> = s.split("__styled-jsx-placeholder-").collect();
     let mut final_expressions = vec![];
     for i in 1..parts.len() {
         let (num_len, expression_index) = read_number(&parts[i]);
         final_expressions.push(style_info.expressions[expression_index].clone());
-        let substr = &parts[i][num_len..];
+        let substr = &parts[i][(num_len + 2)..];
         parts[i] = substr;
     }
 

packages/next/build/swc/tests/fixture/styled-jsx/number-after-placeholder/input.js

@@ -0,0 +1,17 @@
+import Link from "next/link";
+
+export default function IndexPage() {
+  return (
+    <div>
+      Hello World.{" "}
+      <Link href="/about">
+        <a>Abound</a>
+      </Link>
+      <style jsx>{`
+        a {
+          color: ${"#abcdef"}12;
+        }
+      `}</style>
+    </div>
+  );
+}