Formatting for functions, long and short

[keithjgrant]

We should have a particular opinion on formatting of functions. Below is a starting point for discussion.

Short enough to fit on one line (i.e. declaration plus indentation level is within the line-length threshold):

.foo {
  background-image: linear-gradient(to bottom, transparent, black);
  color: white;
}

And if it is longer than one line, split it into multiple lines:

.foo {
  background-image: linear-gradient(
    to bottom,
    hsla(200, 100%, 50%, 0.9) 10%,
    hsla(300, 100%, 50%, 0.7) 20%,
    hsla(100, 100%, 50%, 0.9) 40%,
    hsla(300, 100%, 50%, 0.5) 80%,
    hsla(150, 100%, 50%, 0.3) 85%,
    hsla(200, 100%, 50%, 0.9) 100%,
  );
  color: white;
}

This second example happens to include nested functions. What happens if those get too long? Here's a really over-the-top example:

.foo {
  background-image: linear-gradient(
    to bottom,
    hsla(200, 100%, 50%, 0.9) 10%,
    hsla(
      calc(
        var(--background-gradient-color-hue)
        + var(--background-gradient-hue-offset)
      ),
      100%,
      50%,
      0.7
    ) 20%,
    hsla(100, 100%, 50%, 0.9) 40%,
  );
  color: white;
}

[jeddy3]

It's fantastic to see these issues broken out. It makes it so much more digestible :)

If the intent is to follow prettier's implementation, then it looks like your suggestions here are totally on track.

And if it is longer than one line, split it into multiple lines

Yep, that sounds like rule 1.

This second example happens to include nested functions. What happens if those get too long?

Rule two is apparently to break the outer group first, which looks like what you're doing in your last example.

Lastly, the position of the closing bracket in the following example looks great to me, and also in line with how prettier does it.

.foo {
  background-image: linear-gradient(
    to bottom,
    hsla(200, 100%, 50%, 0.9) 10%,
  );
  color: white;
}