chore(deps): upgrade stylelint scss ecosystem packages (#3360)

graycoreio · Dec 18, 2024 · 6237a3e · 6237a3e
1 parent ba0e161
commit 6237a3e
Show file tree

Hide file tree

Showing 28 changed files with 607 additions and 1,126 deletions.
diff --git a/.stylelintrc b/.stylelintrc
@@ -1,28 +1,22 @@
 {
   "plugins": [
     "stylelint-selector-bem-pattern",
-    "stylelint-scss"
+    "@stylistic/stylelint-plugin"
   ],
+  "extends": "stylelint-config-recommended-scss",
+
   "rules": {
-    "color-hex-case": "lower",
     "color-hex-length": "long",
     "color-no-invalid-hex": true,
     "color-named": "never",
     "function-calc-no-unspaced-operator": true,
-    "function-comma-space-after": "always-single-line",
-    "function-comma-space-before": "never",
     "function-name-case": "lower",
     "function-url-quotes": "always",
     "function-url-scheme-disallowed-list": [
       "data"
     ],
-    "function-whitespace-after": "always",
-    "number-leading-zero": "always",
-    "number-no-trailing-zeros": true,
     "length-zero-no-unit": true,
     "string-no-newline": true,
-    "string-quotes": "single",
-    "unit-case": "lower",
     "unit-no-unknown": true,
     "unit-allowed-list": [
       "px",
@@ -36,10 +30,7 @@
       "vw",
       "fr"
     ],
-    "value-list-comma-space-after": "always-single-line",
-    "value-list-comma-space-before": "never",
     "shorthand-property-no-redundant-values": true,
-    "property-case": "lower",
     "property-no-unknown": true,
     "no-duplicate-at-import-rules": true,
     "declaration-block-no-duplicate-properties": [
@@ -50,39 +41,17 @@
         ]
       }
     ],
-    "declaration-block-trailing-semicolon": "always",
     "declaration-block-single-line-max-declarations": 1,
-    "declaration-block-semicolon-space-before": "never",
-    "declaration-block-semicolon-space-after": "always-single-line",
-    "declaration-block-semicolon-newline-before": "never-multi-line",
-    "declaration-block-semicolon-newline-after": "always-multi-line",
     "declaration-no-important": true,
     "declaration-empty-line-before":"never",
     "block-no-empty": true,
-    "block-closing-brace-newline-after": "always",
-    "block-closing-brace-newline-before": "always-multi-line",
-    "block-closing-brace-empty-line-before": "never",
-    "block-opening-brace-newline-after": "always-multi-line",
-    "block-opening-brace-space-before": "always-multi-line",
-    "selector-attribute-brackets-space-inside": "never",
-    "selector-attribute-operator-space-after": "never",
-    "selector-attribute-operator-space-before": "never",
-    "selector-combinator-space-after": "always",
-    "selector-combinator-space-before": "always",
-    "selector-pseudo-class-case": "lower",
-    "selector-pseudo-class-parentheses-space-inside": "never",
-    "selector-pseudo-element-case": "lower",
+    "no-descending-specificity": null,
     "selector-pseudo-element-colon-notation": "double",
     "selector-pseudo-element-no-unknown": [true, {
       "ignorePseudoElements": ["ng-deep"]
     }],
     "selector-type-case": "lower",
     "selector-max-id": 0,
-    "no-missing-end-of-source-newline": true,
-    "no-eol-whitespace": true,
-    "max-line-length": 100,
-    "indentation": "tab",
-    "linebreaks": "unix",
     "selector-class-pattern": [
       "(^_?(daff-|demo-|daffio-))|(^(active|horizontal|vertical|left|right|disabled|hidden)$)",
       {
@@ -93,6 +62,41 @@
     "scss/selector-nest-combinators": "always",
     "scss/selector-no-redundant-nesting-selector": true,
     "scss/dollar-variable-pattern": "^_?[a-z\\-]+$",
-    "scss/at-else-empty-line-before": "never"
+    "scss/at-else-empty-line-before": "never",
+    "scss/at-if-no-null": null,
+    "scss/comment-no-empty": null,
+    "@stylistic/block-closing-brace-newline-after": "always",
+    "@stylistic/block-closing-brace-newline-before": "always-multi-line",
+    "@stylistic/block-closing-brace-empty-line-before": "never",
+    "@stylistic/block-opening-brace-newline-after": "always-multi-line",
+    "@stylistic/block-opening-brace-space-before": "always-multi-line",
+    "@stylistic/color-hex-case": "lower",
+    "@stylistic/declaration-block-semicolon-space-before": "never",
+    "@stylistic/declaration-block-semicolon-space-after": "always-single-line",
+    "@stylistic/declaration-block-semicolon-newline-before": "never-multi-line",
+    "@stylistic/declaration-block-semicolon-newline-after": "always-multi-line",
+    "@stylistic/declaration-block-trailing-semicolon": "always",
+    "@stylistic/function-comma-space-after": "always-single-line",
+    "@stylistic/function-comma-space-before": "never",
+    "@stylistic/function-whitespace-after": "always",
+    "@stylistic/linebreaks": "unix",
+    "@stylistic/max-line-length": 120,
+    "@stylistic/no-missing-end-of-source-newline": true,
+    "@stylistic/no-eol-whitespace": true,
+    "@stylistic/number-leading-zero": "always",
+    "@stylistic/number-no-trailing-zeros": true,
+    "@stylistic/property-case": "lower",
+    "@stylistic/selector-attribute-brackets-space-inside": "never",
+    "@stylistic/selector-attribute-operator-space-after": "never",
+    "@stylistic/selector-attribute-operator-space-before": "never",
+    "@stylistic/selector-combinator-space-after": "always",
+    "@stylistic/selector-combinator-space-before": "always",
+    "@stylistic/selector-pseudo-class-case": "lower",
+    "@stylistic/selector-pseudo-class-parentheses-space-inside": "never",
+    "@stylistic/selector-pseudo-element-case": "lower",
+    "@stylistic/string-quotes": "single",
+    "@stylistic/unit-case": "lower",
+    "@stylistic/value-list-comma-space-after": "always-single-line",
+    "@stylistic/value-list-comma-space-before": "never"
   }
 }
diff --git a/apps/demo/src/app/checkout/components/payment/payment-summary/payment-summary.component.scss b/apps/demo/src/app/checkout/components/payment/payment-summary/payment-summary.component.scss
@@ -21,9 +21,10 @@
 	}
 
 	&__title {
-		@include embolden();
-		margin-bottom: 5px;
 		grid-area: title;
+		@include embolden();
+		font-size: 1rem;
+		margin-bottom: 15px;
 		text-transform: uppercase;
 	}
 
@@ -53,11 +54,4 @@
 			margin-top: 15px;
 		}
 	}
-
-	&__title {
-		@include embolden();
-		font-size: 1rem;
-		margin-bottom: 15px;
-		text-transform: uppercase;
-	}
 }
diff --git a/apps/demo/src/app/checkout/pages/checkout-view/checkout-view.component.scss b/apps/demo/src/app/checkout/pages/checkout-view/checkout-view.component.scss
@@ -18,10 +18,15 @@
 
 	&__payment {
 		align-self: start;
+		padding-top: 30px;
 	}
 
 	&__review {
 		margin-top: 25px;
+
+		@include breakpoint(big-tablet) {
+			display: none;
+		}
 	}
 
 	&__shipping {
@@ -33,16 +38,6 @@
 		}
 	}
 
-	&__payment {
-		padding-top: 30px;
-	}
-
-	&__review {
-		@include breakpoint(big-tablet) {
-			display: none;
-		}
-	}
-
 	&__desktop-cart {
 		display: none;
 

diff --git a/apps/demo/src/app/routing/indicator/indicator.component.scss b/apps/demo/src/app/routing/indicator/indicator.component.scss
diff --git a/apps/demo/src/app/routing/indicator/indicator.component.ts b/apps/demo/src/app/routing/indicator/indicator.component.ts
@@ -18,7 +18,6 @@ import { RouterPercentEnum } from '../router-percent-enum';
 @Component({
   selector: 'demo-routing-indicator',
   templateUrl: './indicator.component.html',
-  styleUrls: ['./indicator.component.scss'],
 })
 export class DemoIndicatorComponent implements OnInit {
 

diff --git a/libs/design/button/src/button/raised/raised-theme.scss b/libs/design/button/src/button/raised/raised-theme.scss
@@ -10,7 +10,7 @@
 	}
 
 	@if theming.daff-contrast-ratio($base-color, theming.daff-text-contrast($base-color)) < 4.5 {
-		@error 'Button Hover State: '+ map.get(a11y.$wcag-aa-errors, 'text-contrast');
+		@error 'Button Hover State: ' + map.get(a11y.$wcag-aa-errors, 'text-contrast');
 	}
 
 	$black: theming.daff-color(theming.$daff-neutral, 110);

diff --git a/libs/design/container/src/container/container.component.scss b/libs/design/container/src/container/container.component.scss
@@ -1,29 +1,29 @@
 :host-context(.daff-manage-container-layout) {
 	display: inherit;
 	flex: inherit;
-	flex-direction: inherit;
 	flex-flow: inherit;
+	flex-direction: inherit;
 	flex-wrap: inherit;
+	place-items: inherit;
+	place-content: inherit;
 	justify-content: inherit;
 	justify-items: inherit;
 	align-items: inherit;
 	align-content: inherit;
 	gap: inherit;
+	grid: inherit;
+	grid-template: inherit;
+	grid-template-areas: inherit;
 	grid-template-columns: inherit;
 	grid-template-rows: inherit;
-	grid-template-areas: inherit;
-	grid-template: inherit;
 	grid-auto-columns: inherit;
 	grid-auto-rows: inherit;
 	grid-auto-flow: inherit;
-	grid: inherit;
+	grid-gap: inherit;
 	column-gap: inherit;
 	row-gap: inherit;
-	grid-gap: inherit;
 	grid-column-gap: inherit;
 	grid-row-gap: inherit;
-	place-items: inherit;
-	place-content: inherit;
 }
 
 :host {

diff --git a/libs/design/loading-icon/src/loading-icon/loading-icon.component.scss b/libs/design/loading-icon/src/loading-icon/loading-icon.component.scss
@@ -1,7 +1,7 @@
 @use 'sass:math';
 
 // Formula Constants
-$radius: 46; //This must be the same as the radius of the circle in the svg
+$radius: 46; // This must be the same as the radius of the circle in the svg
 $pi: 3.14159265359;
 $max-percentage-fill: math.div(3.5, 10);
 

diff --git a/libs/design/modal/src/modal/modal.component.scss b/libs/design/modal/src/modal/modal.component.scss
@@ -1,6 +1,7 @@
 @use '../../../scss/typography' as t;
 @use '../../../scss/layout';
 
+// stylelint-disable no-duplicate-selectors
 .daff-modal {
 	display: flex;
 	flex-direction: column;

diff --git a/libs/design/scss/core/map/map-deep-check/map-deep-check.scss b/libs/design/scss/core/map/map-deep-check/map-deep-check.scss
@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use 'sass:meta';
 
 //
 // Checks whether or not a map has a nested key
@@ -10,7 +11,7 @@
 // @throws error
 //
 @function daff-map-deep-check($map, $keys) {
-	@if (type-of($map) != 'map') {
+	@if (meta.type-of($map) != 'map') {
 		@error 'Expected first parameter to be of type `map`';
 	}
 

diff --git a/libs/design/scss/core/map/map-deep-get/map-deep-get.scss b/libs/design/scss/core/map/map-deep-get/map-deep-get.scss
@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use 'sass:string';
 @use '../../string/split/string-split';
 @use '../map-deep-check/map-deep-check';
 

diff --git a/libs/design/scss/core/string/split/string-split.scss b/libs/design/scss/core/string/split/string-split.scss
@@ -1,3 +1,6 @@
+@use 'sass:string';
+@use 'sass:list';
+
 //
 // @docs
 // @private
@@ -8,25 +11,25 @@
 //
 @function daff-string-split($string, $separator) {
 	$list: ();
-	$index: str-index($string, $separator);
+	$index: string.index($string, $separator);
 
 	@if ($index == null) {
 		@return $list;
 	}
 
-	@while $index !=null {
-		$item: str-slice($string, 1, $index - 1);
+	@while $index != null {
+		$item: string.slice($string, 1, $index - 1);
 
 		@if ($item != '') {
-			$list: append($list, $item, 'comma');
+			$list: list.append($list, $item, 'comma');
 		}
 
-		$string: str-slice($string, $index + 1);
-		$index: str-index($string, $separator);
+		$string: string.slice($string, $index + 1);
+		$index: string.index($string, $separator);
 	}
 
 	@if ($string != '') {
-		$list: append($list, $string, 'comma');
+		$list: list.append($list, $string, 'comma');
 	}
 
 	@return $list;

diff --git a/libs/design/scss/theming/_theme-css-variables.scss b/libs/design/scss/theming/_theme-css-variables.scss
@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use 'sass:color';
 @use '../core';
 @use '../theming';
 
@@ -15,9 +16,9 @@
 	$white: core.daff-map-deep-get($theme, 'core.white');
 	$black: core.daff-map-deep-get($theme, 'core.black');
 
-	--daff-theme-rgb: #{red($base), green($base), blue($base)};
-	--daff-theme-contrast-rgb: #{red($base-contrast), green($base-contrast),
-		blue($base-contrast)};
+	--daff-theme-rgb: #{color.red($base), color.green($base), color.blue($base)};
+	--daff-theme-contrast-rgb: #{color.red($base-contrast), color.green($base-contrast),
+		color.blue($base-contrast)};
 	--daff-theme: #{$base};
 	--daff-theme-contrast: #{$base-contrast};
 	--daff-theme-primary: #{theming.daff-color($primary)};

diff --git a/libs/design/scss/theming/contrast/contrast-ratio/contrast-ratio.spec.scss b/libs/design/scss/theming/contrast/contrast-ratio/contrast-ratio.spec.scss
diff --git a/libs/design/scss/theming/contrast/luminance/luminance.scss b/libs/design/scss/theming/contrast/luminance/luminance.scss
@@ -1,3 +1,5 @@
+@use 'sass:color';
+@use 'sass:list';
 @use 'variables' as v;
 
 // Calculate the luminance of a color.
@@ -8,12 +10,12 @@
 // See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
 
 @function daff-luminance($color) {
-	$red-index: red($color) + 1;
-	$green-index: green($color) + 1;
-	$blue-index: blue($color) + 1;
+	$red-index: color.red($color) + 1;
+	$green-index: color.green($color) + 1;
+	$blue-index: color.blue($color) + 1;
 
-	$red: nth(v.$linear-channel-values, $red-index);
-	$green: nth(v.$linear-channel-values, $green-index);
-	$blue: nth(v.$linear-channel-values, $blue-index);
+	$red: list.nth(v.$linear-channel-values, $red-index);
+	$green: list.nth(v.$linear-channel-values, $green-index);
+	$blue: list.nth(v.$linear-channel-values, $blue-index);
 	@return 0.2126 * $red + 0.7152 * $green + 0.0722 * $blue;
 }
diff --git a/libs/design/scss/theming/contrast/text-contrast/text-contrast.spec.scss b/libs/design/scss/theming/contrast/text-contrast/text-contrast.spec.scss