Upgrade Stylelint to v16 and @visionappscz/stylelint-config to v4.0…

….0-beta1 #484

For now, the order plugin is being repeatedly disabled in places
where the new config requires line rules to precede block rules.
This may be addressed in the new version of the config.

package.json

@@ -71,7 +71,7 @@
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
     "@visionappscz/eslint-config-visionapps": "^1.7.0",
-    "@visionappscz/stylelint-config": "^3.0.0",
+    "@visionappscz/stylelint-config": "^4.0.0-beta1",
     "autoprefixer": "^10.4.15",
     "babel-jest": "^29.6.4",
     "babel-loader": "^9.1.3",
@@ -94,8 +94,8 @@
     "prop-types": "^15.8.1",
     "sass": "^1.66.1",
     "sass-loader": "^13.3.2",
-    "stylelint": "^14.16.1",
-    "stylelint-webpack-plugin": "^4.1.1",
+    "stylelint": "^16.7.0",
+    "stylelint-webpack-plugin": "^5.0.1",
     "terser-webpack-plugin": "^5.3.9",
     "webpack": "^5.69.1",
     "webpack-cli": "^5.1.4",

src/components/Button/_base.scss

@@ -45,10 +45,7 @@
 
     .feedbackIcon {
         position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
+        inset: 0;
         z-index: 1;
         align-items: center;
     }

src/components/Button/_tools.scss

@@ -41,6 +41,7 @@
             + "Choose one of #{settings.$themeable-states}.";
     }
 
+    // stylelint-disable-next-line order/order -- Prefer the "return/error early" approach.
     $properties: map.get(settings.$themeable-priority-properties, $priority);
 
     // 2.

src/components/Grid/Grid.module.scss

@@ -35,10 +35,8 @@
         grid-template-rows: var(--rui-local-rows); // 2.
         grid-auto-flow: var(--rui-local-auto-flow); // 2.
         grid-gap: var(--rui-local-row-gap) var(--rui-local-column-gap); // 2.
-        align-content: var(--rui-local-align-content); // 2.
-        align-items: var(--rui-local-align-items); // 2.
-        justify-content: var(--rui-local-justify-content); // 2.
-        justify-items: var(--rui-local-justify-items); // 2.
+        place-content: var(--rui-local-align-content) var(--rui-local-justify-content); // 2.
+        place-items: var(--rui-local-align-items) var(--rui-local-justify-items); // 2.
     }
 
     // stylelint-disable-next-line selector-max-universal -- Reset any previously added margins.

src/components/Grid/_tools.scss

@@ -15,6 +15,7 @@
             @return $fallback-cascade;
         }
 
+        // stylelint-disable-next-line order/order -- Prefer the "return/error early" approach.
         $fallback-cascade: var(--rui-local-#{$property-name}-#{$breakpoint}, $fallback-cascade);
     }
 }

src/components/Modal/Modal.module.scss

@@ -21,11 +21,11 @@
         max-width: var(--rui-local-max-width);
         max-height: var(--rui-local-max-height);
         overflow-y: auto;
-        overscroll-behavior: contain;
         border-radius: settings.$border-radius;
         background: theme.$background;
         box-shadow: theme.$box-shadow;
         transform: translateX(-50%);
+        overscroll-behavior: contain;
 
         @include breakpoint.up(sm) {
             --rui-local-outer-spacing: #{theme.$outer-spacing-sm};

src/components/ScrollView/ScrollView.module.scss

@@ -103,8 +103,7 @@ $_arrow-outer-spacing: spacing.of(4);
 
     .isRootVertical .viewport {
         height: 100%;
-        overflow-x: clip; // 7., 8.
-        overflow-y: auto; // 2.
+        overflow: clip auto; // 7., 8. / 2.
     }
 
     .isRootVertical .arrowPrev {
@@ -183,8 +182,7 @@ $_arrow-outer-spacing: spacing.of(4);
     }
 
     .isRootHorizontal .viewport {
-        overflow-x: auto; // 2.
-        overflow-y: clip; // 5., 7., 8.
+        overflow: auto clip; // 2. / 5., 7., 8.
     }
 
     .isRootHorizontal .content {

src/styles/tools/_spacing.scss

@@ -17,6 +17,7 @@
             + "Choose one of #{map.keys(spacing.$bottom)}.";
     }
 
+    // stylelint-disable-next-line order/order -- Prefer the "return/error early" approach.
     &:not(:last-child) {
         margin-bottom: map.get(spacing.$bottom, $category);
     }

src/styles/tools/_transition.scss

@@ -48,6 +48,7 @@ $_reduced-motion-disallowed-transitions: (transform);
         @error "Transition properties must be a string or a Sass list, `#{$properties}` given.";
     }
 
+    // stylelint-disable-next-line order/order -- Prefer the "return/error early" approach.
     $property-list: list.join($property-list, $properties);
 
     @if not _validate-transitions($property-list) {

src/styles/tools/form-fields/_box-field-layout.scss

@@ -67,6 +67,7 @@
         --rui-local-vertical-gap: #{settings.$vertical-inner-gap-large};
     }
 
+    // stylelint-disable-next-line order/order -- Conditional styles.
     display: inline-flex; // 1.
     flex-direction: column;
     min-width: 0; // 1.
@@ -119,14 +120,14 @@
                 padding-bottom: #{theme.$horizontal-label-padding-y};
             }
 
+            // stylelint-disable-next-line order/order -- Conditional styles.
             padding-right: settings.$horizontal-inner-gap; // 4.
             text-align: theme.$horizontal-label-text-align;
         }
 
         .field {
             grid-area: field;
-            align-self: theme.$horizontal-field-vertical-alignment; // 13.
-            justify-self: start; // 7.
+            place-self: theme.$horizontal-field-vertical-alignment start; // 13. / 7.
         }
     }
 }
@@ -219,6 +220,7 @@
             }
         }
 
+        // stylelint-disable-next-line order/order -- Conditional styles.
         &.isRootLayoutHorizontal .label,
         &.isRootLayoutHorizontal .field,
         &.isRootLayoutHorizontal .inputContainer,

src/styles/tools/form-fields/_inline-field-elements.scss

@@ -71,6 +71,7 @@
         $input-width: theme.$check-input-toggle-width;
     }
 
+    // stylelint-disable-next-line order/order -- Conditional styles.
     $tap-target-offset: calc((#{$input-width} - #{theme.$check-tap-target-size}) / 2);
 
     @include accessibility.min-tap-target($size: theme.$check-tap-target-size, $center: false);

src/styles/tools/form-fields/_inline-field-layout.scss

@@ -40,6 +40,7 @@
         justify-content: flex-end;
     }
 
+    // stylelint-disable-next-line order/order -- Conditional styles.
     .input {
         flex: none;
     }

src/styles/tools/form-fields/_variants.scss

@@ -30,6 +30,7 @@
             + "Choose one of #{map.keys(settings.$themeable-state-properties)}.";
     }
 
+    // stylelint-disable-next-line order/order -- Prefer the "return/error early" approach.
     $properties: map.get(settings.$themeable-state-properties, $state);
     $infix: $type;
     $fallback-state: "default";
@@ -70,6 +71,7 @@
             + "Choose one of #{map.keys(settings.$themeable-variant-states)}.";
     }
 
+    // stylelint-disable-next-line order/order -- Prefer the "return/error early" approach.
     $themeable-states: map.get(map.get(settings.$themeable-variant-states, $type), $variant);
 
     @if list.index($themeable-states, "hover") {