[SCSS] Put unary boolean operator in front of expression when wrapping

[apfelbox]

Prettier 3.1.1
Playground link

--parser scss

Input:

@if ($verylonglonglonglonglonglonglonglonglonglonglonglonglonglongvariabletoforceabreak and $a and not $b) {
    color: red;
}

Output:

@if (
  $verylonglonglonglonglonglonglonglonglonglonglonglonglonglongvariabletoforceabreak and
    $a and not
    $b
) {
  color: red;
}

Expected behavior:

@if (
  $verylonglonglonglonglonglonglonglonglonglonglonglonglonglongvariabletoforceabreak and
    $a and
    not $b
) {
  color: red;
}

Hi,

It is pretty confusing, that the unary not is placed in the line above instead of in front of the expression it is affecting.
That makes it really hard to read long if statements with multiple terms correctly.

[apfelbox]

Actually, looking deeper into it, the whole segmentation of the CNF seems pretty chopped up:

Prettier 3.2.5
Playground link

--parser scss

Input:

@mixin fluid-prop($property, $min-vw, $max-vw, $min-value, $max-value) {
	@if $property != null {
		@if type-of($min-value) == 'number' and not unitless($min-value) {
			#{$property}: $min-value; // Fallback for older browsers
		}
		@if type-of($min-vw) == 'number' and not unitless($min-value) and type-of($max-vw) == 'number' and not unitless($min-value) and type-of($min-value) == 'number' and not unitless($min-value) and type-of($max-value) == 'number' and not unitless($min-value) and unit($min-vw) == unit($max-vw) and unit($min-vw) == unit($min-value) and unit($min-vw) == unit($max-value) {
			$factor: math.div(1, $max-vw - $min-vw) * ($max-value - $min-value);
			$calc-value: unquote("#{ $min-value - ($min-vw * $factor) } + #{ 100vw * $factor }");

			#{$property}: clamp(#{ if($min-value > $max-value, $max-value, $min-value) }, #{ $calc-value }, #{ if($min-value > $max-value, $min-value, $max-value) });
		}
	}
}

Output:

@mixin fluid-prop($property, $min-vw, $max-vw, $min-value, $max-value) {
  @if $property != null {
    @if type-of($min-value) == "number" and not unitless($min-value) {
      #{$property}: $min-value; // Fallback for older browsers
    }
    @if type-of($min-vw) ==
      "number" and not
      unitless($min-value) and
      type-of($max-vw) ==
      "number" and not
      unitless($min-value) and
      type-of($min-value) ==
      "number" and not
      unitless($min-value) and
      type-of($max-value) ==
      "number" and not
      unitless($min-value) and
      unit($min-vw) ==
      unit($max-vw) and
      unit($min-vw) ==
      unit($min-value) and
      unit($min-vw) ==
      unit($max-value)
    {
      $factor: math.div(1, $max-vw - $min-vw) * ($max-value - $min-value);
      $calc-value: unquote(
        "#{ $min-value - ($min-vw * $factor) } + #{ 100vw * $factor }"
      );

      #{$property}: clamp(
        #{if($min-value > $max-value, $max-value, $min-value)},
        #{$calc-value},
        #{if($min-value > $max-value, $min-value, $max-value)}
      );
    }
  }
}

Expected output:

/* ... */
@if type-of($min-vw) == "number" and 
      not unitless($min-value) and
      type-of($max-vw) == "number" and 
      not unitless($min-value) and
      type-of($min-value) == "number" and 
      not unitless($min-value) and
      type-of($max-value) == "number" and 
      not unitless($min-value) and
      unit($min-vw) == unit($max-vw) and
      unit($min-vw) == unit($min-value) and
      unit($min-vw) == unit($max-value)
    {
/* ... */

Why?

This seems like a canonical way to write a conjunctive normal form, as every boolean segment is in one line, including their identity check or unary operators.

[guilhermetod]

Given #3806 is also highly requested, i suggest going for another strategy:

@if (
  $verylonglonglonglonglonglonglonglonglonglonglonglonglonglongvariabletoforceabreak
    and $a
    and not $b
) {
  color: red;
}

[apfelbox]

@guilhermetod I would like your proposal even more. 👍

Edit: one of the big advantages of your proposal is that you only have on changed line when adding a new term to the @if. Same argument as trailing commas, basically.