Skip to content
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

SCSS always expands comma selectors and single-line rules to multiple lines #3464

Closed
j-f1 opened this issue Dec 12, 2017 · 4 comments
Closed
Labels
lang:css/scss/less Issues affecting CSS, Less or SCSS locked-due-to-inactivity Please open a new issue and fill out the template instead of commenting.

Comments

@j-f1
Copy link
Member

j-f1 commented Dec 12, 2017

Prettier 1.9.2
Playground link

--parser scss

Input:

h1, h2, h3, h4, h5, h6 {
  font-weight: bold;
}

h1 { font-size: 3em; }
h2 { font-size: 2.5em; }
h3 { font-size: 2em; }
h4 { font-size: 1.5em; }
h5 { font-size: 1em; }
h6 { font-size: 0.5em; }

Output:

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: bold;
}

h1 {
  font-size: 3em;
}
h2 {
  font-size: 2.5em;
}
h3 {
  font-size: 2em;
}
h4 {
  font-size: 1.5em;
}
h5 {
  font-size: 1em;
}
h6 {
  font-size: 0.5em;
}

Expected behavior:
No changes from input

@lydell
Copy link
Member

lydell commented Dec 12, 2017

Sorry, the decision has already been made to put every selector on its own line. See #2047, #1962, #2057, #2213.

Regarding single-line rules, that's consistent with how Prettier always prints if (foo) { something(); } multi-line.

P.S. Could you try to report one thing per issue in the future? Makes things much easier to discuss. Thanks! :)

@lydell lydell closed this as completed Dec 12, 2017
@lydell lydell added the lang:css/scss/less Issues affecting CSS, Less or SCSS label Dec 12, 2017
@j-f1
Copy link
Member Author

j-f1 commented Dec 12, 2017

P.S. Could you try to report one thing per issue in the future? Makes things much easier to discuss. Thanks! :)

Sorry about that. I kinda got carried away when making the example in the playground 😄

Regarding single-line rules, that's consistent with how Prettier always prints if (foo) { something(); } multi-line.

Yes, but JS also has the if (foo) something(); syntax. CSS doesn’t have that, and it would be nice IMHO to inline a CSS block with one statement (i.e. img { background: red; margin: 2px; } gets transformed, while img { background: red; } doesn’t.

@j-f1
Copy link
Member Author

j-f1 commented Dec 12, 2017

Would a PR be accepted for making single-declaration rules like foo.bar { baz: 'quux'; } stay on one line be accepted?

@lydell
Copy link
Member

lydell commented Dec 13, 2017

@j-f1 I doubt that. Prettier tries to have as few options as possible. See #3038 for a CSS-option PR that went far but probably won't be merged.

@lock lock bot added the locked-due-to-inactivity Please open a new issue and fill out the template instead of commenting. label Jul 6, 2018
@lock lock bot locked as resolved and limited conversation to collaborators Jul 6, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
lang:css/scss/less Issues affecting CSS, Less or SCSS locked-due-to-inactivity Please open a new issue and fill out the template instead of commenting.
Projects
None yet
Development

No branches or pull requests

2 participants