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": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
     "@visionappscz/eslint-config-visionapps": "^1.7.0",
-    "@visionappscz/stylelint-config": "^3.0.0",
+    "@visionappscz/stylelint-config": "^4.0.0-beta1",
     "autoprefixer": "^10.4.19",
     "babel-jest": "^29.7.0",
     "babel-loader": "^9.1.3",
@@ -94,8 +94,8 @@
     "prop-types": "^15.8.1",
     "sass": "^1.77.6",
     "sass-loader": "^14.2.1",
-    "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.10",
     "webpack": "^5.92.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/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/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/form-fields/_box-field-layout.scss

@@ -125,8 +125,7 @@
 
         .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.
         }
     }
 }

stylelint.config.js

@@ -20,6 +20,28 @@ module.exports = {
         message: 'Expected custom property name to start with `rui-*` and follow either SUIT CSS or kebab-case syntax',
       },
     ],
+
+    // Override `@visionappscz/stylelint-config/order` rules to ignore all block at rules:
+    'order/order': [
+      'dollar-variables',
+      'custom-properties',
+      {
+        name: 'extend',
+        type: 'at-rule',
+      },
+      {
+        hasBlock: false,
+        name: 'include',
+        type: 'at-rule',
+      },
+      'declarations',
+      'rules',
+      // {
+      //   hasBlock: true,
+      //   type: 'at-rule',
+      // },
+    ],
+
     // Require camelCase pattern for class names as they are picked up by dot notation in JS.
     // Also allow kebab-case class names for global helper and utility classes.
     //