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] Put unary boolean operator in front of expression when wrapping #16232
Comments
Actually, looking deeper into it, the whole segmentation of the CNF seems pretty chopped up: Prettier 3.2.5 --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. |
Given #3806 is also highly requested, i suggest going for another strategy: @if (
$verylonglonglonglonglonglonglonglonglonglonglonglonglonglongvariabletoforceabreak
and $a
and not $b
) {
color: red;
} |
@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 |
Prettier 3.1.1
Playground link
Input:
Output:
Expected behavior:
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.The text was updated successfully, but these errors were encountered: