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`
This commit is contained in:
parent
c21806e54f
commit
6015f3c332
3 changed files with 56 additions and 1 deletions
|
@ -7,9 +7,11 @@ use swc_css::codegen::{
|
||||||
writer::basic::{BasicCssWriter, BasicCssWriterConfig},
|
writer::basic::{BasicCssWriter, BasicCssWriterConfig},
|
||||||
CodeGenerator, CodegenConfig, Emit,
|
CodeGenerator, CodegenConfig, Emit,
|
||||||
};
|
};
|
||||||
|
use swc_css::parser::parser::input::ParserInput;
|
||||||
use swc_css::parser::{parse_str, parse_tokens, parser::ParserConfig};
|
use swc_css::parser::{parse_str, parse_tokens, parser::ParserConfig};
|
||||||
use swc_css::visit::{VisitMut, VisitMutWith};
|
use swc_css::visit::{VisitMut, VisitMutWith};
|
||||||
use swc_ecmascript::ast::{Expr, Str, StrKind, Tpl, TplElement};
|
use swc_ecmascript::ast::{Expr, Str, StrKind, Tpl, TplElement};
|
||||||
|
use swc_ecmascript::parser::StringInput;
|
||||||
use swc_ecmascript::utils::HANDLER;
|
use swc_ecmascript::utils::HANDLER;
|
||||||
use swc_stylis::prefixer::prefixer;
|
use swc_stylis::prefixer::prefixer;
|
||||||
use tracing::{debug, trace};
|
use tracing::{debug, trace};
|
||||||
|
@ -230,12 +232,16 @@ impl Namespacer {
|
||||||
span: node.span,
|
span: node.span,
|
||||||
tokens: vec![],
|
tokens: vec![],
|
||||||
};
|
};
|
||||||
|
let mut arg_tokens;
|
||||||
|
|
||||||
for (i, selector) in node.subclass_selectors.iter().enumerate() {
|
for (i, selector) in node.subclass_selectors.iter().enumerate() {
|
||||||
let (name, args) = match selector {
|
let (name, args) = match selector {
|
||||||
SubclassSelector::PseudoClass(PseudoClassSelector { name, children, .. }) => {
|
SubclassSelector::PseudoClass(PseudoClassSelector { name, children, .. }) => {
|
||||||
match 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),
|
Some(PseudoSelectorChildren::Tokens(v)) => (name, v),
|
||||||
None => (name, &empty_tokens),
|
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,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -0,0 +1,10 @@
|
||||||
|
export default () => (
|
||||||
|
<div>
|
||||||
|
<p>test</p>
|
||||||
|
<style jsx>{`
|
||||||
|
li:nth-child(2) {
|
||||||
|
color: lime;
|
||||||
|
}
|
||||||
|
`}</style>
|
||||||
|
</div>
|
||||||
|
)
|
|
@ -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>
|
||||||
|
);
|
Loading…
Reference in a new issue