Prettier can't parse css transition property when it's too long
Open
Nobody has claimed this yet.
lang:css/scss/less
status:needs discussion
- Dominant language
- JavaScript
- Stars
- 52.3k
- Forks
- 5k
- Avg merge
- 19h 2m
- Merged PRs (30d)
- 117
Description
Prettier 1.18.2
Playground link
--parser scss
--print-width 100
--single-quote
Input:
.foo {
&__bar {
transition: flex 0.3s ease-in-out 0.1s, margin-left 0.3s ease-in-out 0.1s, opacity 0.1s ease-in-out 0.1s;
}
}
Output:
.foo {
&__bar {
transition: flex 0.3s ease-in-out 0.1s, margin-left 0.3s ease-in-out 0.1s,
opacity 0.1s ease-in-out 0.1s;
}
}
Expected behavior:
Maybe something like this?
.foo {
&__bar {
transition: flex 0.3s ease-in-out 0.1s,
margin-left 0.3s ease-in-out 0.1s,
opacity 0.1s ease-in-out 0.1s;
}
}
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reproducing the Playground example with the scss parser, 100-character print width, and the shown transition declaration. Done means the formatter produces the expected wrapping, including breaks after each transition item as shown.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, scss
- Domain
- tooling
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100