Refactor Sass inline if() to @if blocks to get ready for native CSS if()

After this change, there should be no more
warnings in the console about the `if()` syntax.

Author: adamkudrna

src/styles/_utilities.scss

@@ -7,7 +7,11 @@
 
 @each $breakpoint in map.keys(breakpoint-settings.$values) {
     @include breakpoint.up($breakpoint) {
-        $infix: if(map.get(breakpoint-settings.$values, $breakpoint) == 0, "", "-#{$breakpoint}");
+        $infix: "";
+
+        @if map.get(breakpoint-settings.$values, $breakpoint) != 0 {
+            $infix: "-#{$breakpoint}";
+        }
 
         @each $key, $utility in utility-settings.$map {
             @if meta.type-of($utility) == "map" and (map.get($utility, responsive) == true or $infix == "") {

src/styles/tools/_collections.scss

@@ -63,8 +63,29 @@
     $properties,
 ) {
     @each $property in $properties {
-        $modifier: if($modifier-value, "--" + $modifier-value, "");
-        $state: if($interaction-state, "--" + $interaction-state, "");
+        $fallback-custom-property: "";
+        $modifier: "";
+        $state: "";
+
+        @if $interaction-state and $interaction-state == "disabled" {
+            $fallback-custom-property: ", var(--"
+                + $prefix
+                + $component-name
+                + $modifier
+                + "--"
+                + $variant-value
+                + "--default__"
+                + $property
+                + ")";
+        }
+
+        @if $modifier-value {
+            $modifier: "--" + $modifier-value;
+        }
+
+        @if $interaction-state {
+            $state: "--" + $interaction-state;
+        }
 
         // 1.
         --#{$prefix}local-#{$property}:
@@ -80,19 +101,7 @@
                     + "__"
                     + $property
                 }
-                #{if(
-                    $interaction-state and $interaction-state == "disabled",
-                    ", var(--"
-                    + $prefix
-                    + $component-name
-                    + $modifier
-                    + "--"
-                    + $variant-value
-                    + "--default__"
-                    + $property
-                    + ")",
-                    ""
-                )}
+                #{$fallback-custom-property}
             ); // 2.
     }
 }
@@ -202,14 +211,15 @@
     $inherit-link-color: false,
     $properties,
 ) {
-    $modifier-class-name:
-        if(
-            $modifier-name and $modifier-value,
-            ".isRoot#{rui-string.capitalize($modifier-name)}#{rui-string.capitalize($modifier-value)}",
-            ""
-        );
+    $modifier-class-name: "";
     $variant-class-name: ".isRoot#{rui-string.capitalize($variant-name)}#{rui-string.capitalize($variant-value)}";
 
+    @if $modifier-name and $modifier-value {
+        $modifier-class-name: ".isRoot"
+            + #{rui-string.capitalize($modifier-name)}
+            + #{rui-string.capitalize($modifier-value)};
+    }
+
     #{$modifier-class-name}#{$variant-class-name} {
         @if $generate-interaction-states {
             $interaction-state-selector-map: (

src/styles/tools/_utilities.scss

@@ -16,9 +16,11 @@
     @each $key, $value in $values {
         $properties: map.get($utility, property);
         $property-class: map.get($utility, class);
+        $property-class-modifier: "";
 
-        // Don't prefix if value key is null (e.g. with shadow class)
-        $property-class-modifier: if($key, "-" + $key, "");
+        @if $key {
+            $property-class-modifier: "-" + $key;
+        }
 
         .#{$property-class + $infix + $property-class-modifier} {
             @each $property in $properties {