-
-
Notifications
You must be signed in to change notification settings - Fork 508
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(css_formatter): support for pseudo selectors #1291
Conversation
✅ Deploy Preview for biomejs canceled.
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Great!
I've left some comments about differences with prettier outputs.
:nth-child( | ||
2n | ||
+ 1 of li, | ||
|
||
.test | ||
) { | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
is it expected?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This one is not expected! Thanks for catching it.
:-webkit-any(i, p, :link, span:focus) { | ||
} | ||
:-webkit-any( | ||
i, | ||
p, | ||
:link, | ||
|
||
span:focus | ||
) { | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is the result of using the join_with_*
builders right now, because they try to respect the newlines from the input source. It comes up in a few places where we want to just ignore the input and always output single newlines (like selector lists) or keep them flat (like this case).
I think I'll do a pass on all of these and fix them in one go in a follow up PR today.
:lang(de, fr) { | ||
} | ||
:lang( | ||
de, | ||
|
||
fr | ||
) { | ||
} | ||
|
||
:lang(de) { | ||
} | ||
:lang(de, fr, en, es, hi, pt) { | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Same as the above here, once the selector list stops trying to respect the newlines from the input, this should flatten out and match Prettier.
Summary
#1285. This implements formatting support for (seemingly) all of the pseudo selector styles that the parser currently supports.
I'd like to deduplicate some of the work, specifically around how a lot of nodes implement the same parenthesize-and-indent pattern:
The consistency definitely feels like it should be managed in one place, but the difficulty is that some of the nodes use
CssIdentifier
while others have a specificSyntaxToken
instead, so merging them isn't super straightforward. I might just make the block content re-usable? It's also a one time cost to write it all out, so maybe trying to unify them isn't super worth it.Test Plan
Added a bunch of different spec tests to cover the various permutations of pseudo selectors.
Of note: the selector lists currently use
join_with_*
, which tries to respect newlines in the input source, but for CSS formatting we don't actually want to do that in most cases (all cases except rule list and declaration list). I'm going to leave that as something to tackle later, but it will be needed for Prettier compatibility in the future.