You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The following have no issues: :where(:nth-child(6),:nth-child(7) ~ *){ -> :where(:nth-child(6),:nth-child(7)~*){ :is(:nth-child(foo),:nth-child(bar) ~ *){ -> :is(:nth-child(foo),:nth-child(bar)~*){
The following all results in the second parenthesis getting removed: :where(:nth-child(7),:nth-child(7) ~ *){ -> :where(:nth-child(7),:nth-child~*){ :where(:nth-child(2),:nth-child(2) ~ *){ -> :where(:nth-child(2),:nth-child~*){ :where(:nth-child(1),:nth-child(1) ~ *){ -> :where(:first-child),:nth-child~*){ :where(:nth-child(foo),:nth-child(foo) ~ *){ -> :where(:nth-child(foo),:nth-child~*){ :is(:nth-child(7),:nth-child(7) ~ *){ -> :is(:nth-child(7),:nth-child~*){ :not(:nth-child(7),:nth-child(7) ~ *){ -> :not(:nth-child(7),:nth-child~*){ :where(:nth-child(7),:nth-child(7) #id){ -> :where(:nth-child(7),:nth-child #id){
I found the bug initially when using a selector looking for a class's direct children when there's exactly 6 of them.
For reasons beyond me, this actually works: :where(:nth-child(7),:nth-child(7 /**/ ) ~ *){ -> :where(:nth-child(7),:nth-child(7)~*){
EDIT: further testing showed that the extra space, not the comment in and of itself, was enough. In other words, this also works: :where(:nth-child(7),:nth-child(7 ) ~ *){ -> :where(:nth-child(7),:nth-child(7)~*){
EDIT2:
This also fails :where(:nth-child(6), :nth-last-child(6), :nth-of-type(6), :nth-last-of-type(6)){ -> :where(:nth-child(6),:nth-last-child,:nth-of-type,:nth-last-of-type){
I think there might be a bug in postcss-selector-parser, because the argument of the second :nth-child pseudo selector is not in the AST when it's identical to the argument of the first.
Describe the bug
The following selector fails when using minifySelectors
:where(:nth-child(7),:nth-child(7) ~ *){
is changed to
:where(:nth-child(7),:nth-child~*){
As long as the content of the second
:nth-child()
is the same as the first, the second:nth-child()
gets the parentheses removed.disabling minifySelectors fixes this.
this also happens with
:is(...)
and:not(...)
this also happens with
:nth-last-child()
,:nth-of-type()
and:nth-last-of-type()
Expected behaviour
:where(:nth-child(7),:nth-child(7) ~ *){
gets changed to
:where(:nth-child(7),:nth-child(7)~*){
Steps to reproduce
1: clone
https://github.com/Zr4g0n/nth-child-css-bug
2: run
npx postcss input.css > output.css
3:
output.css
has broken selectorVersion
4.1.11
Preset
default
Environment
Package details
Additional context
The following have no issues:
:where(:nth-child(6),:nth-child(7) ~ *){
->:where(:nth-child(6),:nth-child(7)~*){
:is(:nth-child(foo),:nth-child(bar) ~ *){
->:is(:nth-child(foo),:nth-child(bar)~*){
The following all results in the second parenthesis getting removed:
:where(:nth-child(7),:nth-child(7) ~ *){
->:where(:nth-child(7),:nth-child~*){
:where(:nth-child(2),:nth-child(2) ~ *){
->:where(:nth-child(2),:nth-child~*){
:where(:nth-child(1),:nth-child(1) ~ *){
->:where(:first-child),:nth-child~*){
:where(:nth-child(foo),:nth-child(foo) ~ *){
->:where(:nth-child(foo),:nth-child~*){
:is(:nth-child(7),:nth-child(7) ~ *){
->:is(:nth-child(7),:nth-child~*){
:not(:nth-child(7),:nth-child(7) ~ *){
->:not(:nth-child(7),:nth-child~*){
:where(:nth-child(7),:nth-child(7) #id){
->:where(:nth-child(7),:nth-child #id){
I found the bug initially when using a selector looking for a class's direct children when there's exactly 6 of them.
The text was updated successfully, but these errors were encountered: