Style(web): Apply stylistic rules

lmc-eu · Aug 8, 2024 · 2b75ba1 · 2b75ba1
1 parent 30e4cb0
commit 2b75ba1
Show file tree

Hide file tree

Showing 15 changed files with 42 additions and 35 deletions.
diff --git a/configs/stylelint-config-spirit/rules/style.js b/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,
-      },
-    },
-  ],
 };
diff --git a/packages/web/src/scss/components/Alert/_Alert.scss b/packages/web/src/scss/components/Alert/_Alert.scss
@@ -25,7 +25,6 @@
 }
 
 @include dictionaries.generate-colors('Alert', theme.$color-dictionary, theme.$color-dictionary-config);
-
 @include dictionaries.generate-colors(
     'Alert',
     theme.$color-dictionary,

diff --git a/packages/web/src/scss/components/Button/_Button.scss b/packages/web/src/scss/components/Button/_Button.scss
@@ -44,7 +44,6 @@
     $overrides: theme.$color-dictionary-overrides,
     $generate-data-attribute: true
 );
-
 @include dictionaries.generate-sizes('Button', theme.$sizes);
 
 .Button--block {

diff --git a/packages/web/src/scss/components/Grid/_Grid.scss b/packages/web/src/scss/components/Grid/_Grid.scss
@@ -25,5 +25,4 @@
 }
 
 @include tools.equal-columns(theme.$grid-equal-columns, theme.$breakpoints);
-
 @include tools.item(theme.$breakpoints);
diff --git a/packages/web/src/scss/components/Tag/_Tag.scss b/packages/web/src/scss/components/Tag/_Tag.scss
@@ -12,15 +12,13 @@
 }
 
 @include dictionaries.generate-sizes('Tag', theme.$sizes);
-
 @include dictionaries.generate-colors(
     'Tag',
     theme.$color-dictionary,
     theme.$color-dictionary-config,
     null,
     theme.$color-dictionary-overrides
 );
-
 @include dictionaries.generate-colors(
     'Tag--subtle.Tag',
     theme.$color-dictionary,

diff --git a/packages/web/src/scss/components/UNSTABLE_Section/_UNSTABLE_Section.scss b/packages/web/src/scss/components/UNSTABLE_Section/_UNSTABLE_Section.scss
@@ -2,7 +2,7 @@
     margin-bottom: 2.5rem;
 }
 
-@media (min-width: 768px) {
+@media (width >= 768px) {
     .UNSTABLE_Section:not(:last-child) {
         margin-bottom: 4rem;
     }

diff --git a/packages/web/src/scss/tools/__tests__/_breakpoint.test.scss b/packages/web/src/scss/tools/__tests__/_breakpoint.test.scss
@@ -13,7 +13,7 @@
             }
 
             @include test.expect() {
-                @media (min-width: 600px) {
+                @media (width >= 600px) {
                     .selector {
                         color: #bada55;
                     }
@@ -53,7 +53,7 @@
             }
 
             @include test.expect() {
-                @media (max-width: 599px) {
+                @media (width < 600px) {
                     .selector {
                         color: #bada55;
                     }

diff --git a/packages/web/src/scss/tools/__tests__/_form-fields.test.scss b/packages/web/src/scss/tools/__tests__/_form-fields.test.scss
@@ -11,6 +11,7 @@
                     @include form-fields.label-disabled();
                 }
             }
+
             @include test.expect() {
                 .label-disabled-test {
                     color: form-fields-theme.$label-color-disabled;
@@ -30,6 +31,7 @@
                     @include form-fields.input-disabled();
                 }
             }
+
             @include test.expect() {
                 .input-disabled-test {
                     color: form-fields-theme.$input-color-disabled;
@@ -46,6 +48,7 @@
                     @include form-fields.box-field-fluid();
                 }
             }
+
             @include test.expect() {
                 .box-field-fluid-test {
                     width: 100%;

diff --git a/packages/web/src/scss/tools/__tests__/_list.test.scss b/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');
     }
 }
diff --git a/packages/web/src/scss/tools/__tests__/_placement.test.scss b/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%;

diff --git a/packages/web/src/scss/tools/__tests__/_string.test.scss b/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');
     }
 }
diff --git a/packages/web/src/scss/tools/__tests__/_typography.test.scss b/packages/web/src/scss/tools/__tests__/_typography.test.scss
@@ -27,7 +27,7 @@
             }
 
             @include test.expect() {
-                @media (min-width: map.get(tokens.$breakpoints, 'tablet')) {
+                @media (width >= #{map.get(tokens.$breakpoints, 'tablet')}) {
                     .typography-test {
                         font-style: italic;
                         font-weight: 700;

diff --git a/packages/web/src/scss/tools/_breakpoint.scss b/packages/web/src/scss/tools/_breakpoint.scss
@@ -1,30 +1,32 @@
-// Mixin to get the min-width media query for a breakpoint value.
+@use 'sass:string';
+
+// Mixin to get the width media query for a breakpoint value in up direction.
 //
 // Example: up(0) { … } will return …
-// Example: up(768px) { … } will return @media (min-width: 768px) { … }
+// Example: up(768px) { … } will return @media (width >= 768px) { … }
 //
 // Parameters are:
 // * $breakpoint-value: the breakpoint value (in pixels)
 @mixin up($breakpoint-value) {
     @if $breakpoint-value > 0 {
-        @media (min-width: $breakpoint-value) {
+        @media (width >= $breakpoint-value) {
             @content;
         }
     } @else {
         @content;
     }
 }
 
-// Mixin to get the max-width media query for a breakpoint value.
+// Mixin to get the width media query for a breakpoint value in down direction.
 //
 // Example: down(0) { … } will return …
-// Example: down(768px) { … } will return @media (max-width: 767px) { … }
+// Example: down(768px) { … } will return @media (width < 768px) { … }
 //
 // Parameters are:
 // * $breakpoint-value: the breakpoint value (in pixels)
 @mixin down($breakpoint-value) {
     @if $breakpoint-value > 0 {
-        @media (max-width: ($breakpoint-value - 1px)) {
+        @media (width < $breakpoint-value) {
             @content;
         }
     } @else {
@@ -45,10 +47,10 @@
 @function get-modifier($modifier, $name, $breakpoint-value) {
     @if $breakpoint-value > 0 {
         @if $modifier == 'infix' {
-            @return unquote($name + '--');
+            @return string.unquote($name + '--');
         }
 
-        @return unquote('-' + $name);
+        @return string.unquote('-' + $name);
     }
 
     @return '';

diff --git a/packages/web/src/scss/tools/_dictionaries.scss b/packages/web/src/scss/tools/_dictionaries.scss
@@ -1,5 +1,6 @@
 @use 'sass:list';
 @use 'sass:map';
+@use 'sass:meta';
 @use 'sass:string';
 @use '@tokens' as tokens;
 @use './links';
@@ -15,14 +16,17 @@
     @if map.has-key(tokens.$action-colors, #{$variant}-default) {
         @return tokens.$action-colors;
     }
+
     @if map.has-key(tokens.$emotion-colors, #{$variant}-default) {
         @return tokens.$emotion-colors;
     }
+
     @if map.has-key(tokens.$text-colors, #{$variant}-default) {
         @return tokens.$text-colors;
     }
 
     @error 'Invalid color dictionary value as there is no #{$variant}-default token either in action-colors, emotion-colors, or text-colors tokens';
+
     @return null;
 }
 
@@ -53,13 +57,16 @@
                 @return map.get($overrides, $dictionary-value, states, $state-name, $property-name);
             }
         }
+
         @if map.has-key($overrides, $dictionary-value, $property-name) {
             @return map.get($overrides, $dictionary-value, $property-name);
         }
     }
-    @if type-of($property-value) == 'string' {
+
+    @if meta.type-of($property-value) == 'string' {
         $tokens: -get-color-dictionary-tokens($dictionary-value);
-        @if type-of($tokens) == 'map' {
+
+        @if meta.type-of($tokens) == 'map' {
             @return map.get($tokens, #{$dictionary-value}-#{$property-value});
         }
     } @else {
@@ -166,6 +173,7 @@
     @each $dictionary-value in $dictionary-values {
         @each $print-value in $print-values {
             $variant-class: '#{$dictionary-value}';
+
             @if $print-value == 'disabled' {
                 $variant-class: '#{$dictionary-value}.link-#{$print-value}';
             } @else if $print-value != 'default' {

diff --git a/packages/web/src/scss/tools/_list.scss b/packages/web/src/scss/tools/_list.scss
@@ -5,10 +5,10 @@
 @function to-string($list, $separator: ' ') {
     $string: '';
 
-    @for $i from 1 through length($list) {
+    @for $i from 1 through list.length($list) {
         $string: $string + list.nth($list, $i);
 
-        @if $i < length($list) {
+        @if $i < list.length($list) {
             $string: $string + $separator;
         }
     }
Original file line number	Diff line number	Diff line change
Expand Up		@@ -25,5 +25,4 @@
		}

		@include tools.equal-columns(theme.$grid-equal-columns, theme.$breakpoints);

		@include tools.item(theme.$breakpoints);