Fix styled-jsx: Don't drop extra selectors (#29791)

Co-authored-by: kdy1 <kdy1@users.noreply.github.com>

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

@@ -180,10 +180,21 @@ impl Namespacer {
                     });
 
                     return match complex_selectors {
-                        Ok(complex_selectors) => Ok(complex_selectors[0].selectors[1..]
-                            .iter()
-                            .cloned()
-                            .collect()),
+                        Ok(complex_selectors) => {
+                            let mut v = complex_selectors[0].selectors[1..]
+                                .iter()
+                                .cloned()
+                                .collect::<Vec<_>>();
+
+                            v.iter_mut().for_each(|sel| {
+                                if i < node.subclass_selectors.len() {
+                                    sel.subclass_selectors
+                                        .extend(node.subclass_selectors[i + 1..].to_vec());
+                                }
+                            });
+
+                            Ok(v)
+                        }
                         Err(_) => bail!("Failed to transform one off global selector"),
                     };
                 } else if pseudo_index.is_none() {

packages/next/build/swc/tests/fixture/styled-jsx/css-selector-after-pseudo/input.js

@@ -0,0 +1,18 @@
+function NavigationItem({
+  active,
+  className,
+}) {
+  return (
+    <span className={cn({ active }, className, 'navigation-item')}>
+      <style jsx>{`
+        .navigation-item :global(a)::after {
+          content: attr(data-text);
+          content: attr(data-text) / '';
+          
+        }
+      `}</style>
+    </span>
+  );
+}
+
+export default NavigationItem;

packages/next/build/swc/tests/fixture/styled-jsx/css-selector-after-pseudo/output.js

@@ -0,0 +1,11 @@
+import _JSXStyle from "styled-jsx/style";
+function NavigationItem({ active , className  }) {
+    return <span className={"jsx-2342aae4628612c6" + " " + (cn({
+        active
+    }, className, "navigation-item") || "")}>
+
+      <_JSXStyle id={"2342aae4628612c6"}>{".navigation-item.jsx-2342aae4628612c6 a::after {content:attr(data-text);\ncontent: attr(data-text) / ''}"}</_JSXStyle>
+
+    </span>;
+}
+export default NavigationItem;