chore(styles): Upgrade stylelint to v16 (#2504)

Upgrade manually stylelint to v16 because of relation with the following packages: #2418 #2419 #2431 #2434 We could have a special rule in renovate to group them, but I'm not sure that they totally aligned to a major version. I think this upgrade of stylelint is pretty unique. https://github.com/prettier/stylelint-config-prettier was removed as it is deprecated since v15. Fixes in SCSS code are not due to the upgrade.
swisspost · Jan 24, 2024 · d1d6513 · d1d6513
1 parent 21cbf59
commit d1d6513
Show file tree

Hide file tree

Showing 11 changed files with 151 additions and 230 deletions.
diff --git a/packages/styles/package.json b/packages/styles/package.json
@@ -59,11 +59,10 @@
     "prettier": "3.2.2",
     "rimraf": "5.0.5",
     "sass": "1.69.7",
-    "stylelint": "15.11.0",
-    "stylelint-config-prettier": "9.0.5",
-    "stylelint-config-sass-guidelines": "10.0.0",
-    "stylelint-prettier": "4.1.0",
-    "stylelint-scss": "5.3.2",
+    "stylelint": "16.1.0",
+    "stylelint-config-sass-guidelines": "11.0.0",
+    "stylelint-prettier": "5.0.0",
+    "stylelint-scss": "6.0.0",
     "typescript": "4.9.5"
   },
   "sass": {

diff --git a/packages/styles/src/components/tabs/_tab-title.scss b/packages/styles/src/components/tabs/_tab-title.scss
@@ -6,7 +6,7 @@
 @use './../../variables/spacing';
 @use './../../variables/components/nav';
 
-.tab-title[role=tab]{
+.tab-title[role='tab'] {
   display: inline-block;
   position: relative;
   box-sizing: border-box;

diff --git a/packages/styles/src/variables/components/_badge.scss b/packages/styles/src/variables/components/_badge.scss
@@ -14,7 +14,10 @@ $badge-height: button.$btn-height-rg;
 $badge-gap: spacing.$size-mini;
 $badge-border-color: var(--post-gray-60);
 $badge-border-width: commons.$border-thick;
-$badge-transition: color 250ms, background-color 250ms, border-color 250ms;
+$badge-transition:
+  color 250ms,
+  background-color 250ms,
+  border-color 250ms;
 $badge-hover-color: color.$black;
 $badge-hover-bg-color: color.$gray-10;
 $badge-active-color: color.$black;

diff --git a/packages/styles/src/variables/components/_breadcrumbs.scss b/packages/styles/src/variables/components/_breadcrumbs.scss
@@ -1,3 +1,4 @@
+@use 'sass:string';
 @use './../color';
 @use './../commons';
 
@@ -16,6 +17,6 @@ $breadcrumb-divider-color: color.$gray-60 !default;
 $breadcrumb-link-color: color.$gray-60 !default;
 $breadcrumb-hover-color: color.$black !default;
 $breadcrumb-active-color: color.$gray-60 !default;
-$breadcrumb-divider: quote('/') !default;
+$breadcrumb-divider: string.quote('/') !default;
 
 $breadcrumb-border-radius: commons.$border-radius !default;
diff --git a/packages/styles/src/variables/components/_form-check.scss b/packages/styles/src/variables/components/_form-check.scss
@@ -74,7 +74,8 @@ $form-check-feedback-margin-top: spacing.$size-small-regular !default;
 $form-switch-padding-start: 0 !default;
 $form-switch-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-16 -16 32 32'><circle r='15' stroke='#{$form-switch-border-color}' stroke-width='2' fill='#{$form-switch-color}'/></svg>") !default;
 $form-switch-border-radius: $form-switch-width !default;
-$form-switch-transition: background-position animation.$transition-base-timing,
+$form-switch-transition:
+  background-position animation.$transition-base-timing,
   background-color animation.$transition-time-default !default;
 $form-switch-checked-color: color.$white !default;
 $form-switch-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-16 -16 32 32'><circle r='15' stroke='#{$form-switch-checked-border-color}' stroke-width='2' fill='#{$form-switch-checked-color}'/></svg>") !default;

diff --git a/packages/styles/src/variables/components/_form-validation.scss b/packages/styles/src/variables/components/_form-validation.scss
@@ -23,6 +23,7 @@ $form-feedback-invalid-bg: color.$error !default;
 $form-feedback-invalid-text: color.$white !default;
 $form-feedback-custom-color: color.$success !default;
 $form-feedback-custom-bg: color.$success !default;
-$form-feedback-invalid-box-shadow: 0 0 0 forms.$input-focus-width rgba($form-feedback-invalid-color, 0.25) !default;
+$form-feedback-invalid-box-shadow: 0 0 0 forms.$input-focus-width
+  rgba($form-feedback-invalid-color, 0.25) !default;
 $form-feedback-custom-text: color.$white !default;
 $form-feedback-custom-box-shadow: 0 0 0 0.2rem rgba($form-feedback-custom-color, 0.25) !default;
diff --git a/packages/styles/src/variables/components/_forms.scss b/packages/styles/src/variables/components/_forms.scss
@@ -84,8 +84,9 @@ $input-height-content-lg: type.$font-size-medium * $input-line-height-lg !defaul
 $input-height-inner-lg: $input-height-content-lg + ($input-padding-y-lg * 2) !default; // Design System
 $input-height-lg: calc(#{$input-height-inner-lg} + #{$input-height-border}) !default;
 
-$input-transition: border-color 0.15s ease-in-out,
-box-shadow 0.15s ease-in-out !default;
+$input-transition:
+  border-color 0.15s ease-in-out,
+  box-shadow 0.15s ease-in-out !default;
 
 $form-text-color: var(--post-contrast-color);
 $form-text-font-size: type.$font-size-tiny;
@@ -105,8 +106,9 @@ $form-range-thumb-width: 2rem !default;
 $form-range-thumb-height: $form-range-thumb-width !default;
 $form-range-thumb-bg: color.$white !default;
 $form-range-thumb-border: 2px solid color.$black !default;
-$form-range-thumb-focus-box-shadow: 0 0 0 1px color.$black,
-0 0 0 0.2rem rgba(color.$gray-80, 0.25) !default;
+$form-range-thumb-focus-box-shadow:
+  0 0 0 1px color.$black,
+  0 0 0 0.2rem rgba(color.$gray-80, 0.25) !default;
 $form-range-thumb-focus-box-shadow-width: 0.2rem; // For focus box shadow issue in Edge
 $form-range-thumb-active-bg: color.$white !default;
 $form-range-thumb-disabled-bg: $form-range-thumb-bg !default;
@@ -129,8 +131,8 @@ $form-floating-label-color: $input-placeholder-color;
 $form-floating-label-font-size: type.$font-size-bigger-regular;
 $form-floating-label-font-size-small: type.$font-size-tiny;
 $form-floating-label-scale: math.div(
-    $form-floating-label-font-size-small,
-    $form-floating-label-font-size
+  $form-floating-label-font-size-small,
+  $form-floating-label-font-size
 );
 $form-floating-label-upscale: math.div(1, $form-floating-label-scale);
 $form-floating-label-padding-t: calc(
@@ -140,10 +142,12 @@ $form-floating-label-padding-t: calc(
 $form-floating-label-translate-x: $form-floating-padding-x * (1 - $form-floating-label-scale);
 $form-floating-label-transform: scale($form-floating-label-scale);
 $form-floating-transition: animation.$transition-base;
-$form-floating-transition-in: $form-floating-transition,
-width 0ms list.nth(animation.$transition-base, 2);
-$form-floating-transition-out: $form-floating-transition,
-width 0ms linear;
+$form-floating-transition-in:
+  $form-floating-transition,
+  width 0ms list.nth(animation.$transition-base, 2);
+$form-floating-transition-out:
+  $form-floating-transition,
+  width 0ms linear;
 $form-floating-select-bg-size: 32px 32px;
 
 $form-floating-label-font-size-sm: type.$font-size-12;

diff --git a/packages/styles/src/variables/components/_nav.scss b/packages/styles/src/variables/components/_nav.scss
@@ -1,3 +1,4 @@
+@use 'sass:color' as sass-color;
 @use './../color';
 @use './../commons';
 @use './../type';
@@ -10,7 +11,9 @@ $nav-link-font-size: null !default;
 $nav-link-font-weight: null !default;
 $nav-link-color: color.$gray-60 !default;
 $nav-link-hover-color: color.$black !default;
-$nav-link-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
+$nav-link-transition:
+  color 0.15s ease-in-out,
+  background-color 0.15s ease-in-out,
   border-color 0.15s ease-in-out !default;
 $nav-link-disabled-color: color.$gray-20 !default;
 
@@ -29,11 +32,13 @@ $nav-pills-link-active-bg: color.$gray-80 !default;
 // Design System custom variables
 $nav-link-padding: spacing.$spacer !default;
 
-$nav-tabs-link-hover-bg: lighten(color.$gray-10, 5%) !default;
+$nav-tabs-link-hover-bg: sass-color.adjust(color.$gray-10, $lightness: 5%) !default;
 $nav-tabs-link-text-color: color.$gray-60 !default;
 $nav-tabs-link-active-font-weight: bold !default;
 
-$nav-tabs-focus-box-shadow: 0 0 0 1px color.$white, 0 0 0 2px color.$gray-80 !default;
+$nav-tabs-focus-box-shadow:
+  0 0 0 1px color.$white,
+  0 0 0 2px color.$gray-80 !default;
 $nav-tabs-focus-box-shadow-width: 2px !default;
 
 $nav-tabs-i-border-color: rgba(var(--post-contrast-color-inverted-rgb), 0.4) !default;

diff --git a/packages/styles/src/variables/components/_notification.scss b/packages/styles/src/variables/components/_notification.scss
@@ -1,3 +1,5 @@
+@use 'sass:map';
+@use 'sass:list';
 @use './../color';
 @use './../commons';
 @use './../spacing';
@@ -14,7 +16,7 @@ $notification-heading-font-weight: type.$headings-font-weight !default;
 $notification-buttons-gap: spacing.$size-mini !default;
 
 $notification-padding-x-map: () !default;
-$notification-padding-x-map: map-merge(
+$notification-padding-x-map: map.merge(
   $notification-padding-x-map,
   (
     'alert': spacing.$size-small-large,
@@ -23,7 +25,7 @@ $notification-padding-x-map: map-merge(
 );
 
 $notification-padding-y-map: () !default;
-$notification-padding-y-map: map-merge(
+$notification-padding-y-map: map.merge(
   $notification-padding-y-map,
   (
     'alert': spacing.$size-regular,
@@ -32,7 +34,7 @@ $notification-padding-y-map: map-merge(
 );
 
 $notification-font-size-map: () !default;
-$notification-font-size-map: map-merge(
+$notification-font-size-map: map.merge(
   $notification-font-size-map,
   (
     'alert': type.$font-size-base,
@@ -41,7 +43,7 @@ $notification-font-size-map: map-merge(
 );
 
 $notification-heading-font-size-map: () !default;
-$notification-heading-font-size-map: map-merge(
+$notification-heading-font-size-map: map.merge(
   $notification-heading-font-size-map,
   (
     'alert': type.$font-size-bigger-regular,
@@ -50,7 +52,7 @@ $notification-heading-font-size-map: map-merge(
 );
 
 $notification-hr-margin-block-map: () !default;
-$notification-hr-margin-block-map: map-merge(
+$notification-hr-margin-block-map: map.merge(
   $notification-hr-margin-block-map,
   (
     'alert': spacing.$size-mini spacing.$size-small-regular,
@@ -59,7 +61,7 @@ $notification-hr-margin-block-map: map-merge(
 );
 
 $notification-icon-size-map: () !default;
-$notification-icon-size-map: map-merge(
+$notification-icon-size-map: map.merge(
   $notification-icon-size-map,
   (
     'alert': spacing.$size-small-huge,
@@ -68,7 +70,7 @@ $notification-icon-size-map: map-merge(
 );
 
 $notification-variants: () !default;
-$notification-variants: join(
+$notification-variants: list.join(
   $notification-variants,
   (
     'primary' color.$gray-80 3134,

diff --git a/packages/styles/src/variables/components/_tables.scss b/packages/styles/src/variables/components/_tables.scss
@@ -1,3 +1,4 @@
+@use 'sass:color' as sass-color;
 @use './../color';
 @use './../commons';
 @use './../spacing';
@@ -29,7 +30,7 @@ $table-head-color: color.$gray-40 !default;
 $table-dark-bg: color.$gray-80 !default;
 $table-dark-accent-bg: rgba(color.$white, 0.05) !default;
 $table-dark-hover-bg: rgba(color.$white, 0.075) !default;
-$table-dark-border-color: lighten(color.$gray-80, 7.5%) !default;
+$table-dark-border-color: sass-color.adjust(color.$gray-80, $lightness: 7.5%) !default;
 $table-dark-color: color.$black !default;
 
 $table-striped-order: odd !default;