Deps: Update dependency stylelint to v16

configs/stylelint-config-spirit/index.js

@@ -1,7 +1,8 @@
-const prettierPlugin = require('./plugins/prettier');
-const styleRules = require('./rules/style');
-const unstableRules = require('./rules/unstable');
+/* eslint-disable import/extensions -- Cannot find module error */
+import prettierPlugin from './plugins/prettier.js';
+import styleRules from './rules/style.js';
+import unstableRules from './rules/unstable.js';
 
-module.exports = {
-  extends: ['@lmc-eu/stylelint-config', prettierPlugin, styleRules, unstableRules],
+export default {
+  extends: ['@almacareer/stylelint-config', prettierPlugin, styleRules, unstableRules],
 };

configs/stylelint-config-spirit/package.json

@@ -20,15 +20,15 @@
     "url": "https://github.com/lmc-eu/spirit-design-system.git",
     "directory": "configs/stylelint-config-spirit"
   },
-  "type": "commonjs",
+  "type": "module",
   "main": "./index.js",
   "peerDependencies": {
-    "stylelint": "^15.11.0"
+    "stylelint": "^16.0.0"
   },
   "dependencies": {
-    "@lmc-eu/stylelint-config": "8.0.0",
-    "stylelint": "15.11.0",
-    "stylelint-config-prettier": "9.0.5",
-    "stylelint-order": "6.0.4"
+    "@almacareer/stylelint-config": "9.0.0",
+    "stylelint": "16.7.0",
+    "stylelint-order": "6.0.4",
+    "stylelint-prettier": "5.0.0"
   }
 }

configs/stylelint-config-spirit/plugins/prettier.js

@@ -1,3 +1,6 @@
-module.exports = {
-  extends: ['stylelint-config-prettier'],
+export default {
+  plugins: ['stylelint-prettier'],
+  rules: {
+    'prettier/prettier': true,
+  },
 };

configs/stylelint-config-spirit/rules/style.js

@@ -1,6 +1,6 @@
 const OFF = null;
 
-module.exports = {
+export default {
   rules: {
     // This rule can lead to less readable code
     // @see: https://github.com/stylelint/stylelint-config-recommended/issues/14

configs/stylelint-config-spirit/rules/unstable.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   rules: {
     // Allow UNSTABLE_Component classnames
     // @see: https://github.com/lmc-eu/spirit-design-system/blob/main/docs/contributtion/experimental-code.md

packages/design-tokens/package.json

@@ -38,7 +38,7 @@
     "npm-run-all2": "6.2.0",
     "rimraf": "5.0.7",
     "shx": "0.3.4",
-    "stylelint": "15.11.0",
+    "stylelint": "16.7.0",
     "stylelint-config-spirit": "workspace:^",
     "typescript": "5.5.2",
     "vite": "5.3.2",

packages/web/package.json

@@ -61,9 +61,11 @@
     "@lmc-eu/spirit-common": "^0.3.5",
     "@lmc-eu/spirit-demo": "^0.1.3",
     "@rollup/plugin-typescript": "11.1.6",
+    "@types/eslint": "^9",
     "@types/jest": "29.5.12",
     "autoprefixer": "10.4.19",
     "clean-css-cli": "5.6.3",
+    "eslint": "8.57.0",
     "glob": "10.4.2",
     "jest": "29.7.0",
     "npm-run-all": "4.1.5",
@@ -74,7 +76,7 @@
     "sass": "1.77.6",
     "sass-true": "8.0.0",
     "shx": "0.3.4",
-    "stylelint": "15.11.0",
+    "stylelint": "16.7.0",
     "stylelint-config-spirit": "workspace:^",
     "tslib": "2.6.3",
     "typescript": "5.5.2"

packages/web/src/scss/components/Alert/_Alert.scss

@@ -25,7 +25,6 @@
 }
 
 @include dictionaries.generate-colors('Alert', theme.$color-dictionary, theme.$color-dictionary-config);
-
 @include dictionaries.generate-colors(
     'Alert',
     theme.$color-dictionary,

packages/web/src/scss/components/Button/_Button.scss

@@ -44,7 +44,6 @@
     $overrides: theme.$color-dictionary-overrides,
     $generate-data-attribute: true
 );
-
 @include dictionaries.generate-sizes('Button', theme.$sizes);
 
 .Button--block {

packages/web/src/scss/components/Grid/_Grid.scss

@@ -25,5 +25,4 @@
 }
 
 @include tools.equal-columns(theme.$grid-equal-columns, theme.$breakpoints);
-
 @include tools.item(theme.$breakpoints);

packages/web/src/scss/components/Tag/_Tag.scss

@@ -12,15 +12,13 @@
 }
 
 @include dictionaries.generate-sizes('Tag', theme.$sizes);
-
 @include dictionaries.generate-colors(
     'Tag',
     theme.$color-dictionary,
     theme.$color-dictionary-config,
     null,
     theme.$color-dictionary-overrides
 );
-
 @include dictionaries.generate-colors(
     'Tag--subtle.Tag',
     theme.$color-dictionary,

packages/web/src/scss/components/UNSTABLE_Section/_UNSTABLE_Section.scss

@@ -2,7 +2,7 @@
     margin-bottom: 2.5rem;
 }
 
-@media (min-width: 768px) {
+@media (width >= 768px) {
     .UNSTABLE_Section:not(:last-child) {
         margin-bottom: 4rem;
     }

packages/web/src/scss/tools/__tests__/_breakpoint.test.scss

@@ -13,7 +13,7 @@
             }
 
             @include test.expect() {
-                @media (min-width: 600px) {
+                @media (width >= 600px) {
                     .selector {
                         color: #bada55;
                     }
@@ -53,7 +53,7 @@
             }
 
             @include test.expect() {
-                @media (max-width: 599px) {
+                @media (width < 600px) {
                     .selector {
                         color: #bada55;
                     }

packages/web/src/scss/tools/__tests__/_form-fields.test.scss

@@ -11,6 +11,7 @@
                     @include form-fields.label-disabled();
                 }
             }
+
             @include test.expect() {
                 .label-disabled-test {
                     color: form-fields-theme.$label-color-disabled;
@@ -30,6 +31,7 @@
                     @include form-fields.input-disabled();
                 }
             }
+
             @include test.expect() {
                 .input-disabled-test {
                     color: form-fields-theme.$input-color-disabled;
@@ -46,6 +48,7 @@
                     @include form-fields.box-field-fluid();
                 }
             }
+
             @include test.expect() {
                 .box-field-fluid-test {
                     width: 100%;

packages/web/src/scss/tools/__tests__/_list.test.scss

@@ -4,9 +4,7 @@
 @include test.describe('to-string function') {
     @include test.it('should convert a list to a string with the specified separator') {
         @include test.assert-equal(list.to-string((1, 2, 3), '-'), '1-2-3');
-
         @include test.assert-equal(list.to-string(('a', 'b', 'c'), '_'), 'a_b_c');
-
         @include test.assert-equal(list.to-string(('apple', 'banana', 'cherry')), 'apple banana cherry');
     }
 }

packages/web/src/scss/tools/__tests__/_placement.test.scss

@@ -8,6 +8,7 @@
                 --cross-axis-direction-left: #{placement.get-cross-axis-direction('left')};
                 --cross-axis-direction-bottom: #{placement.get-cross-axis-direction('bottom')};
             }
+
             @include test.expect() {
                 --cross-axis-direction-left: vertical;
                 --cross-axis-direction-bottom: horizontal;
@@ -21,6 +22,7 @@
                 --is-logical-left: #{placement.is-logical('left')};
                 --is-logical-start: #{placement.is-logical('start')};
             }
+
             @include test.expect() {
                 --is-logical-left: false;
                 --is-logical-start: true;
@@ -34,6 +36,7 @@
                 --logical-to-physical-start-horizontal: #{placement.translate-logical-to-physical('start', 'horizontal')};
                 --logical-to-physical-start-vertical: #{placement.translate-logical-to-physical('start', 'vertical')};
             }
+
             @include test.expect() {
                 --logical-to-physical-start-horizontal: left;
                 --logical-to-physical-start-vertical: top;
@@ -61,6 +64,7 @@
                         $physical-direction: 'horizontal'
                     )};
             }
+
             @include test.expect() {
                 --transform-axis-left: left;
                 --transform-axis-left-inverse: right;
@@ -94,6 +98,7 @@
                         )};
                     --transform-left-top-spaces: #{placement.transform('left-top', $join-with: ' ')};
                 }
+
                 @include test.expect() {
                     --transform-left: left;
                     --transform-left-top: left-top;
@@ -131,6 +136,7 @@
                         )};
                     --transform-top-start-spaces: #{placement.transform('top-start', $join-with: ' ')};
                 }
+
                 @include test.expect() {
                     --transform-top-start: top-start;
                     --transform-top-start-main-axis-inverse: bottom-start;
@@ -150,6 +156,7 @@
                     @include placement.parent();
                 }
             }
+
             @include test.expect() {
                 .parent-test {
                     position: relative;
@@ -165,6 +172,7 @@
                     @include placement.child($z-index: 3);
                 }
             }
+
             @include test.expect() {
                 .child-test {
                     position: absolute;
@@ -181,6 +189,7 @@
                     @include placement.child-controlled('test', 10px);
                 }
             }
+
             @include test.expect() {
                 .child-controlled-test {
                     --test-offset-orthogonal: 0;
@@ -200,6 +209,7 @@
                     @include placement.child-variant($prefix: 'test', $placement: 'top', $offset: 10px);
                 }
             }
+
             @include test.expect() {
                 .child-variant-test {
                     --test-offset: 10px;
@@ -222,6 +232,7 @@
                     );
                 }
             }
+
             @include test.expect() {
                 .child-variant-test {
                     --test-offset: 10px;
@@ -240,6 +251,7 @@
                     @include placement.arrow('test', '10px', '10px', '5px');
                 }
             }
+
             @include test.expect() {
                 .arrow-test {
                     --test-arrow-width: 10px;
@@ -260,6 +272,7 @@
                     @include placement.arrow-variant('test', 'top');
                 }
             }
+
             @include test.expect() {
                 .arrow-variant-test {
                     inset: auto auto 100% 50%;

packages/web/src/scss/tools/__tests__/_string.test.scss

@@ -4,7 +4,6 @@
 @include test.describe('convert-kebab-case-to-camel-case function') {
     @include test.it('should convert kebab-case to camelCase') {
         @include test.assert-equal(string.convert-kebab-case-to-camel-case('top-start'), 'topStart');
-
         @include test.assert-equal(
             string.convert-kebab-case-to-camel-case('my-long-variable-name'),
             'myLongVariableName'
@@ -15,7 +14,6 @@
 @include test.describe('convert-pascal-case-to-kebab-case function') {
     @include test.it('should convert PascalCase to kebab-case') {
         @include test.assert-equal(string.convert-pascal-case-to-kebab-case('TopStart'), 'top-start');
-
         @include test.assert-equal(
             string.convert-pascal-case-to-kebab-case('MyLongVariableName'),
             'my-long-variable-name'
@@ -26,9 +24,7 @@
 @include test.describe('replace function') {
     @include test.it('should replace all occurrences of a substring with another string') {
         @include test.assert-equal(string.replace('top-start', '-', ''), 'topstart');
-
         @include test.assert-equal(string.replace('some-other-text', 'e', 'a'), 'soma-othar-taxt');
-
         @include test.assert-equal(string.replace('no-replacement-here', 'z', 'y'), 'no-replacement-here');
     }
 }

packages/web/src/scss/tools/__tests__/_typography.test.scss

@@ -27,7 +27,7 @@
             }
 
             @include test.expect() {
-                @media (min-width: map.get(tokens.$breakpoints, 'tablet')) {
+                @media (width >= #{map.get(tokens.$breakpoints, 'tablet')}) {
                     .typography-test {
                         font-style: italic;
                         font-weight: 700;

packages/web/src/scss/tools/_breakpoint.scss

@@ -1,30 +1,32 @@
-// Mixin to get the min-width media query for a breakpoint value.
+@use 'sass:string';
+
+// Mixin to get the width media query for a breakpoint value in up direction.
 //
 // Example: up(0) { … } will return …
-// Example: up(768px) { … } will return @media (min-width: 768px) { … }
+// Example: up(768px) { … } will return @media (width >= 768px) { … }
 //
 // Parameters are:
 // * $breakpoint-value: the breakpoint value (in pixels)
 @mixin up($breakpoint-value) {
     @if $breakpoint-value > 0 {
-        @media (min-width: $breakpoint-value) {
+        @media (width >= $breakpoint-value) {
             @content;
         }
     } @else {
         @content;
     }
 }
 
-// Mixin to get the max-width media query for a breakpoint value.
+// Mixin to get the width media query for a breakpoint value in down direction.
 //
 // Example: down(0) { … } will return …
-// Example: down(768px) { … } will return @media (max-width: 767px) { … }
+// Example: down(768px) { … } will return @media (width < 768px) { … }
 //
 // Parameters are:
 // * $breakpoint-value: the breakpoint value (in pixels)
 @mixin down($breakpoint-value) {
     @if $breakpoint-value > 0 {
-        @media (max-width: ($breakpoint-value - 1px)) {
+        @media (width < $breakpoint-value) {
             @content;
         }
     } @else {
@@ -45,10 +47,10 @@
 @function get-modifier($modifier, $name, $breakpoint-value) {
     @if $breakpoint-value > 0 {
         @if $modifier == 'infix' {
-            @return unquote($name + '--');
+            @return string.unquote($name + '--');
         }
 
-        @return unquote('-' + $name);
+        @return string.unquote('-' + $name);
     }
 
     @return '';