Better CSS-in-JS nesting formatting?
Open
Nobody has claimed this yet.
area:multiparser
help wanted
lang:css/scss/less
- Dominant language
- JavaScript
- Stars
- 52.3k
- Forks
- 5k
- Avg merge
- 19h 2m
- Merged PRs (30d)
- 117
Description
Prettier 1.12.1
Playground link
Input:
const foo = css`
color: red;
background: yellow;
${bool && css`
border: 1px solid blue;
${bool2 && css`
padding: 20px;
`}
`}
`;
Output:
const foo = css`
color: red;
background: yellow;
${bool &&
css`
border: 1px solid blue;
${bool2 &&
css`
padding: 20px;
`};
`};
`;
Expected behavior:
The code, in my opinion, would be way cleaner if formatted as in the input section.
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
Reproduce the nested CSS-in-JS example using the linked Playground and compare the shown input and output. Trace the formatter entry point responsible for embedded CSS-in-JS and determine whether the expected input-style nesting can be supported; done means the example formats as requested with regression coverage.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, javascript
- Domain
- tooling
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100