[CSS] single line property formatting

[o-t-w]

I am re-raising this issue.
I am currently working on a CSS utility library. Almost all the classes have a single CSS property, yet they are all formatted by Prettier to take up multiple lines. For a single property, this is a massive waste of space and far less readable.

e.g. here is some code from the relatively popular [Tachyons library](e.g.: https://github.com/tachyons-css/tachyons/blob/master/css/tachyons.css):

.mt0 { margin-top: 0; }
.mt1 { margin-top: .25rem; }
.mt2 { margin-top: .5rem; }
.mt3 { margin-top: 1rem; }
.mt4 { margin-top: 2rem; }
.mt5 { margin-top: 4rem; }
.mt6 { margin-top: 8rem; }
.mt7 { margin-top: 16rem; }

Here's is what it looks like after using Prettier:

.mt0 {
  margin-top: 0;
}
.mt1 {
  margin-top: 0.25rem;
}
.mt2 {
  margin-top: 0.5rem;
}
.mt3 {
  margin-top: 1rem;
}
.mt4 {
  margin-top: 2rem;
}
.mt5 {
  margin-top: 4rem;
}
.mt6 {
  margin-top: 8rem;
}
.mt7 {
  margin-top: 16rem;
}

It is clear to me which one is preferable! Please reconsider.

[alexander-akait]

For me it is very unreadable. Also you need add new newlines before add new property, It is very uncomfortable. Also some properties can have very long values and it will be inconsistently:

.static { position: static; }
.bg { background: very very very very very very very very very very very very very very very very many and long values; }

To

.static { position: static; }
.bg { 
  background: very very very very very very very very very very very very very very very very many and long values; 
}

[Yago]

I agree with @o-t-w, there is cases when we don't want three lines for small declarations.

@evilebottnawi's point is a bit less relevant, for very very very very very very very very very very very many and long values, there is always line breaks and comas. It's not the point here.

Stylelint rule declaration-block-single-line-max-declarations offers a way to fine tune this behaviour, why Prettier don't ? I don't say that it has to be a default option to Prettier to support this behaviour, but it would be welcomed having a way to fit to our Stylelint configuration.

Please be open minded.

[lydell]

Stylelint rule declaration-block-single-line-max-declarations offers a way to fine tune this behaviour, why Prettier don't ?

Because Prettier is an opinionated code formatter.

Please be open minded.

The issue is open :)

[o-t-w]

"Because Prettier is an opinionated code formatter."
I understand and I think this is a good thing in general. You certainly don't need to offer all the configuration options of a linter, but this is one that makes Prettier unusable for me :(

[alexander-akait]

@o-t-w

this is one that makes Prettier unusable for me

How? It is break your code? It is just spaces/newlines

[o-t-w]

@evilebottnawi Well if I didn't care how code looked I'd leave it as an unformatted mess rather than using Prettier in the first place.

What I mean is that I dislike this formatting so much that I would rather go through the pain and tedium of manually formatting all my CSS rather than using Prettier 😖. Please don't make me do that!

What is the benefit of not making this configurable?

[alexander-akait]

@o-t-w

Well if I didn't care how code looked I'd leave it as an unformatted mess rather than using Prettier at all.

It is formatted well, just leave formatting for prettier, it is readable and looks good and i don't think we should change behavior.

What is the benefit of not making this configurable?

https://prettier.io/docs/en/option-philosophy.html

[Yago]

On that matter, it seems clear that Prettier (or the team behind it) offers an opinion and if we don't agree, we don't use it at all for CSS. Period.

I personally agree with almost everything with the Prettier's JavaScript opinions, I use and love it for that! But for CSS, those opinions are not compliant with the stylelint-config-standard and the default value of 1 for the declaration-block-single-line-max-declarations. In my opinion, it's a much more readable, cleaner and lighter practice.

In the end, I understand that Prettier is opinionated by nature, but I think opinions are made to be discussed, not to be imposed by a small group of maintainers (even if their work is amazing, it's not the matter here, keep going), that's the beauty of open-source. Maybe a solution is to hold a vote for that kind of best practice to see what is the community's opinion. 🤔 I agree that options are maybe not the solution for Prettier, but the opinions have to represent the majority.

Thanks for allowing this discussion 😄
(it's maybe a wider matter than “simply” single line property formatting in CSS)

[alexander-akait]

Okey, we need investigate all popular styleguides, if somebody has time feel free to do it and put information here, personally i don't worries about spaces and newlines (within a reasonable), so we can revisit our output

[davidjaldred]

Using both single-line declaration blocks and multi-line declaration blocks within the same stylesheet is fairly common practice no?

Typically if the declaration block only contains a single declaration, I might prefer to keep it on a single line. Apart from saving space, the real advantage is that it can help readability of declarations that follow a repeating/similar pattern.

Example Input:

a { text-decoration: none; }

ul,
ol {
  list-style: none;
  padding: 0;
}

@keyframes rainbow {
  0% { color: #ff0000 };
  16% { color: #ff9b00 };
  33% { color: #ffff00 };
  50% { color: #9bff00 };
  66% { color: #0000ff };
  83% { color: #9b00ff };
  100% { color: #ff00ff };
}

Output:

a {
  text-decoration: none;
}

ul,
ol {
  list-style: none;
  padding: 0;
}

@keyframes rainbow {
  0% {
    color: #ff0000;
  }
  16% {
    color: #ff9b00;
  }
  33% {
    color: #ffff00;
  }
  50% {
    color: #9bff00;
  }
  66% {
    color: #0000ff;
  }
  83% {
    color: #9b00ff;
  }
  100% {
    color: #ff00ff;
  }
}

I don't think this is something that should be made configurable either, but I wonder if others think there is a place for single-line CSS declaration blocks in Prettier.

Isn't this somewhat similar in nature to #4765?

[prettydiff]

This is beneficial means of CSS(like) beautification. As a proof of concept try the compressed-css option of Pretty Diff to play around with a vaguely similar idea. This option has proven wildly popular with my users and would benefit Prettier users as well.

[nykula]

Prettier allows JS oneliners like:

var debug = ({ message, stack }) => console.error({ message, stack });
configure({ port: process.env.PORT }).catch(debug);

Overall, condensing micro statements helps maintain code. Lets me see all necessary logic on one screen, keeping multiple terminals open. Allowing the same for CSS would be nice.