Introduce @stylistic/stylelint-plugin to watch over stylistic rules…

… removed in Stylelint 16

package.json

@@ -66,6 +66,7 @@
     "@babel/preset-env": "^7.22.14",
     "@babel/preset-react": "^7.22.5",
     "@babel/register": "^7.22.5",
+    "@stylistic/stylelint-config": "^1.0.1",
     "@svgr/webpack": "^8.1.0",
     "@testing-library/jest-dom": "^6.1.2",
     "@testing-library/react": "^14.0.0",

src/components/Grid/_settings.scss

@@ -8,11 +8,11 @@ $grid-responsive-properties: [
     align-items,
     justify-content,
     justify-items,
-]; // stylelint-disable-line indentation -- Broken rule?
+]; // stylelint-disable-line @stylistic/indentation -- Broken rule?
 
 $grid-span-responsive-properties: [
     column-span,
     row-span,
-]; // stylelint-disable-line indentation -- Broken rule?
+]; // stylelint-disable-line @stylistic/indentation -- Broken rule?
 
 $initial-fallback-value: initial;

stylelint.config.js

@@ -4,8 +4,15 @@ module.exports = {
     '@visionappscz/stylelint-config/order',
     '@visionappscz/stylelint-config/scss',
     '@visionappscz/stylelint-config/cssModules',
+    '@stylistic/stylelint-config',
   ],
   rules: {
+    // Allow @else and @elseif to be on the same line as the closing brace of the @if block.
+    '@stylistic/block-closing-brace-newline-after': 'always-single-line',
+
+    // Use 4 spaces for indentation.
+    '@stylistic/indentation': 4,
+
     // Check that custom property name starts with `rui` prefix and follows either SUIT CSS convention
     // (for components theming) or kebab-case syntax (for global design tokens and local properties).
     //
@@ -20,6 +27,7 @@ module.exports = {
         message: 'Expected custom property name to start with `rui-*` and follow either SUIT CSS or kebab-case syntax',
       },
     ],
+
     // 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.
     //