From 6015f3c332f60ef5dcbb30a8ab8c939443e47bb1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Donny/=EA=B0=95=EB=8F=99=EC=9C=A4?= <kdy1997.dev@gmail.com>
Date: Fri, 10 Dec 2021 22:22:09 +0900
Subject: [PATCH] fix(next-swc/styled-jsx): Fix `nth` (#32358)

## 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`
---
 .../core/src/styled_jsx/transform_css.rs      | 38 ++++++++++++++++++-
 .../styled-jsx/transform-css-nth-1/input.js   | 10 +++++
 .../styled-jsx/transform-css-nth-1/output.js  |  9 +++++
 3 files changed, 56 insertions(+), 1 deletion(-)
 create mode 100644 packages/next-swc/crates/core/tests/fixture/styled-jsx/transform-css-nth-1/input.js
 create mode 100644 packages/next-swc/crates/core/tests/fixture/styled-jsx/transform-css-nth-1/output.js

diff --git a/packages/next-swc/crates/core/src/styled_jsx/transform_css.rs b/packages/next-swc/crates/core/src/styled_jsx/transform_css.rs
index 2121afe512..a902cf825f 100644
--- a/packages/next-swc/crates/core/src/styled_jsx/transform_css.rs
+++ b/packages/next-swc/crates/core/src/styled_jsx/transform_css.rs
@@ -7,9 +7,11 @@ use swc_css::codegen::{
     writer::basic::{BasicCssWriter, BasicCssWriterConfig},
     CodeGenerator, CodegenConfig, Emit,
 };
+use swc_css::parser::parser::input::ParserInput;
 use swc_css::parser::{parse_str, parse_tokens, parser::ParserConfig};
 use swc_css::visit::{VisitMut, VisitMutWith};
 use swc_ecmascript::ast::{Expr, Str, StrKind, Tpl, TplElement};
+use swc_ecmascript::parser::StringInput;
 use swc_ecmascript::utils::HANDLER;
 use swc_stylis::prefixer::prefixer;
 use tracing::{debug, trace};
@@ -230,12 +232,16 @@ impl Namespacer {
             span: node.span,
             tokens: vec![],
         };
+        let mut arg_tokens;
 
         for (i, selector) in node.subclass_selectors.iter().enumerate() {
             let (name, args) = match selector {
                 SubclassSelector::PseudoClass(PseudoClassSelector { name, children, .. }) => {
                     match children {
-                        Some(PseudoSelectorChildren::Nth(_)) => todo!("nth"),
+                        Some(PseudoSelectorChildren::Nth(v)) => {
+                            arg_tokens = nth_to_tokens(&v);
+                            (name, &arg_tokens)
+                        }
                         Some(PseudoSelectorChildren::Tokens(v)) => (name, v),
                         None => (name, &empty_tokens),
                     }
@@ -480,3 +486,33 @@ fn get_block_tokens(selector_tokens: &Tokens) -> Vec<TokenAndSpan> {
         },
     ]
 }
+
+fn nth_to_tokens(nth: &Nth) -> Tokens {
+    let mut s = String::new();
+    {
+        let mut wr = BasicCssWriter::new(&mut s, BasicCssWriterConfig { indent: "  " });
+        let mut gen = CodeGenerator::new(&mut wr, CodegenConfig { minify: true });
+
+        gen.emit(&nth).unwrap();
+    }
+
+    let mut lexer = swc_css::parser::lexer::Lexer::new(
+        StringInput::new(&s, nth.span.lo, nth.span.hi),
+        ParserConfig {
+            parse_values: false,
+            allow_wrong_line_comments: true,
+            ..Default::default()
+        },
+    );
+
+    let mut tokens = vec![];
+
+    while let Ok(t) = lexer.next() {
+        tokens.push(t);
+    }
+
+    Tokens {
+        span: Span::new(nth.span.lo, nth.span.hi, Default::default()),
+        tokens,
+    }
+}
diff --git a/packages/next-swc/crates/core/tests/fixture/styled-jsx/transform-css-nth-1/input.js b/packages/next-swc/crates/core/tests/fixture/styled-jsx/transform-css-nth-1/input.js
new file mode 100644
index 0000000000..1a119aab50
--- /dev/null
+++ b/packages/next-swc/crates/core/tests/fixture/styled-jsx/transform-css-nth-1/input.js
@@ -0,0 +1,10 @@
+export default () => (
+    <div>
+      <p>test</p>
+      <style jsx>{`
+        li:nth-child(2) {
+          color: lime;
+        }
+      `}</style>
+    </div>
+  )
\ No newline at end of file
diff --git a/packages/next-swc/crates/core/tests/fixture/styled-jsx/transform-css-nth-1/output.js b/packages/next-swc/crates/core/tests/fixture/styled-jsx/transform-css-nth-1/output.js
new file mode 100644
index 0000000000..18c3bdfe9f
--- /dev/null
+++ b/packages/next-swc/crates/core/tests/fixture/styled-jsx/transform-css-nth-1/output.js
@@ -0,0 +1,9 @@
+import _JSXStyle from "styled-jsx/style";
+export default (()=><div className={"jsx-938ca197692ef624"}>
+
+      <p className={"jsx-938ca197692ef624"}>test</p>
+
+      <_JSXStyle id={"938ca197692ef624"}>{"li.jsx-938ca197692ef624:nth-child(2){color:lime}"}</_JSXStyle>
+
+    </div>
+);