fixup! Style(web): Apply stylistic rules

configs/stylelint-config-spirit/rules/style.js

@@ -6,12 +6,4 @@ export default {
     // @see: https://github.com/stylelint/stylelint-config-recommended/issues/14
     'declaration-block-no-redundant-longhand-properties': OFF,
   },
-  overrides: [
-    {
-      files: ['*.test.scss'],
-      rules: {
-        'at-rule-empty-line-before': OFF,
-      },
-    },
-  ],
 };

packages/web/src/scss/tools/__tests__/_breakpoint.test.scss

@@ -53,7 +53,7 @@
             }
 
             @include test.expect() {
-                @media (width <= 599px) {
+                @media (width < 600px) {
                     .selector {
                         color: #bada55;
                     }

packages/web/src/scss/tools/__tests__/_list.test.scss

@@ -4,9 +4,7 @@
 @include test.describe('to-string function') {
     @include test.it('should convert a list to a string with the specified separator') {
         @include test.assert-equal(list.to-string((1, 2, 3), '-'), '1-2-3');
-
         @include test.assert-equal(list.to-string(('a', 'b', 'c'), '_'), 'a_b_c');
-
         @include test.assert-equal(list.to-string(('apple', 'banana', 'cherry')), 'apple banana cherry');
     }
 }

packages/web/src/scss/tools/__tests__/_placement.test.scss

@@ -8,6 +8,7 @@
                 --cross-axis-direction-left: #{placement.get-cross-axis-direction('left')};
                 --cross-axis-direction-bottom: #{placement.get-cross-axis-direction('bottom')};
             }
+
             @include test.expect() {
                 --cross-axis-direction-left: vertical;
                 --cross-axis-direction-bottom: horizontal;
@@ -21,6 +22,7 @@
                 --is-logical-left: #{placement.is-logical('left')};
                 --is-logical-start: #{placement.is-logical('start')};
             }
+
             @include test.expect() {
                 --is-logical-left: false;
                 --is-logical-start: true;
@@ -34,6 +36,7 @@
                 --logical-to-physical-start-horizontal: #{placement.translate-logical-to-physical('start', 'horizontal')};
                 --logical-to-physical-start-vertical: #{placement.translate-logical-to-physical('start', 'vertical')};
             }
+
             @include test.expect() {
                 --logical-to-physical-start-horizontal: left;
                 --logical-to-physical-start-vertical: top;
@@ -61,6 +64,7 @@
                         $physical-direction: 'horizontal'
                     )};
             }
+
             @include test.expect() {
                 --transform-axis-left: left;
                 --transform-axis-left-inverse: right;
@@ -94,6 +98,7 @@
                         )};
                     --transform-left-top-spaces: #{placement.transform('left-top', $join-with: ' ')};
                 }
+
                 @include test.expect() {
                     --transform-left: left;
                     --transform-left-top: left-top;
@@ -131,6 +136,7 @@
                         )};
                     --transform-top-start-spaces: #{placement.transform('top-start', $join-with: ' ')};
                 }
+
                 @include test.expect() {
                     --transform-top-start: top-start;
                     --transform-top-start-main-axis-inverse: bottom-start;
@@ -150,6 +156,7 @@
                     @include placement.parent();
                 }
             }
+
             @include test.expect() {
                 .parent-test {
                     position: relative;
@@ -165,6 +172,7 @@
                     @include placement.child($z-index: 3);
                 }
             }
+
             @include test.expect() {
                 .child-test {
                     position: absolute;
@@ -181,6 +189,7 @@
                     @include placement.child-controlled('test', 10px);
                 }
             }
+
             @include test.expect() {
                 .child-controlled-test {
                     --test-offset-orthogonal: 0;
@@ -200,6 +209,7 @@
                     @include placement.child-variant($prefix: 'test', $placement: 'top', $offset: 10px);
                 }
             }
+
             @include test.expect() {
                 .child-variant-test {
                     --test-offset: 10px;
@@ -222,6 +232,7 @@
                     );
                 }
             }
+
             @include test.expect() {
                 .child-variant-test {
                     --test-offset: 10px;
@@ -240,6 +251,7 @@
                     @include placement.arrow('test', '10px', '10px', '5px');
                 }
             }
+
             @include test.expect() {
                 .arrow-test {
                     --test-arrow-width: 10px;
@@ -260,6 +272,7 @@
                     @include placement.arrow-variant('test', 'top');
                 }
             }
+
             @include test.expect() {
                 .arrow-variant-test {
                     inset: auto auto 100% 50%;

packages/web/src/scss/tools/__tests__/_string.test.scss

@@ -4,7 +4,6 @@
 @include test.describe('convert-kebab-case-to-camel-case function') {
     @include test.it('should convert kebab-case to camelCase') {
         @include test.assert-equal(string.convert-kebab-case-to-camel-case('top-start'), 'topStart');
-
         @include test.assert-equal(
             string.convert-kebab-case-to-camel-case('my-long-variable-name'),
             'myLongVariableName'
@@ -15,7 +14,6 @@
 @include test.describe('convert-pascal-case-to-kebab-case function') {
     @include test.it('should convert PascalCase to kebab-case') {
         @include test.assert-equal(string.convert-pascal-case-to-kebab-case('TopStart'), 'top-start');
-
         @include test.assert-equal(
             string.convert-pascal-case-to-kebab-case('MyLongVariableName'),
             'my-long-variable-name'
@@ -26,9 +24,7 @@
 @include test.describe('replace function') {
     @include test.it('should replace all occurrences of a substring with another string') {
         @include test.assert-equal(string.replace('top-start', '-', ''), 'topstart');
-
         @include test.assert-equal(string.replace('some-other-text', 'e', 'a'), 'soma-othar-taxt');
-
         @include test.assert-equal(string.replace('no-replacement-here', 'z', 'y'), 'no-replacement-here');
     }
 }

packages/web/src/scss/tools/_breakpoint.scss

@@ -26,7 +26,7 @@
 // * $breakpoint-value: the breakpoint value (in pixels)
 @mixin down($breakpoint-value) {
     @if $breakpoint-value > 0 {
-        @media (width <= ($breakpoint-value - 1px)) {
+        @media (width < $breakpoint-value) {
             @content;
         }
     } @else {