Prettier break SASS if (and maybe more)

I love Prettier. I never want to have to worry about code formatting every again. It is a solved problem.

Prettier has been the industry standard code formatter in the JavaScript world for almost a decade. Sane, opinionated defaults gives easy entry and minimal bike shedding.

SASS

I've been using Prettier on SASS code (technically SCSS) for quite a while though we don't use it to its full potential. This largely stems from the ideology that we should always attempt to solve with web platform standards first. As CSS has evolved that has made SCSS less and less necessary.

Prettier broke my if() with trailing commas

We have the following code (don't worry about what its doing...)

$in-px: if(<br>  sass($from-unit == 'px'): strip-unit($value);<br>  else: strip-unit($value) * strip-unit($root-font-size),  /* ← this comma */<br>);

You can see based on Prettier's opinionated rules it breaks the lines at specific places and adds a trailing comma. In our case the trailing comma ends up in the resulting value, which broke our functionality.

Solution - prettier-ignore

I'll explain why this is the best solution after, but making this a one-liner and adding a prettier-ignore comment did the trick:

// prettier-ignore<br>  $in-px: if(sass($from-unit == 'px'): strip-unit($value); else: strip-unit($value) * strip-unit($root-font-size));

Prettier config

Like I said above, Prettier is opinionated. One of the downsides of this is that we can't customize the config specifically for SCSS so we could change the trailing comma setting. We could change it for everything but then you run into the diff'ing problem that using trailing commas everywhere was designed to fix.

Future

I wonder if there is a list of all SCSS that will break when used with Prettier. Someone must have put that together. Would be nice to know. Would be better if we could solve programmatically though.

Maybe when these next-gen formatters become more standard the issue will be solved. Or maybe we don't need SCSS? Someday...