Fix all style linting errors + enforce in CI.

Author: mkrause

package.json

@@ -44,9 +44,9 @@
     "storybook:build": "storybook build --docs",
     "check:types": "tsc --noEmit",
     "lint:style": "stylelint 'src/**/*.scss'",
-    "lint:script": "biome",
+    "lint:script": "biome lint",
     "lint": "npm run lint:style && npm run lint:script",
-    "test": "npm run check:types",
+    "test": "npm run check:types && npm run lint:style",
     "test-ui": "vitest --ui",
     "coverage": "vitest run --coverage",
     "start": "npm run storybook:serve",

package.json.js

@@ -63,13 +63,13 @@ const packageConfig = {
     // Static analysis
     'check:types': 'tsc --noEmit',
     'lint:style': `stylelint 'src/**/*.scss'`,
-    'lint:script': 'biome',
+    'lint:script': 'biome lint',
     'lint': 'npm run lint:style && npm run lint:script',
 
     // Test
     // Note: use `vitest run --root=. src/...` to run a single test file
     //'test': 'vitest run --root=.', // Need to specify `--root=.` since the vite root is set to `./app`
-    'test': 'npm run check:types',
+    'test': 'npm run check:types && npm run lint:style',
     'test-ui': 'vitest --ui',
     'coverage': 'vitest run --coverage',
 

src/components/navigations/Stepper/Stepper.module.scss

@@ -15,7 +15,7 @@
 
     &.bk-stepper--vertical {
       .bk-stepper__item {
-        &:not(:first-child):not(:first-child) {
+        &:not(:first-child) {
           margin-top: bk.$spacing-9;
 
           .bk-stepper__item__circle {

src/components/overlays/Toast/Toast.module.scss

@@ -6,10 +6,9 @@
 
 @layer baklava.components {
   .bk-toast {
-    width: auto !important; // Override style for .Toastify__toast-container
     padding: 0 !important; // Override style for .Toastify__toast-container
     width: 400px !important; // Override style for .Toastify__toast-container
-
+    
     &:has(.bk-close--dark) {
       .bk-toast__body {
         margin-right: bk.$spacing-4 !important; // Override style for .Toastify__toast-body

src/components/overlays/Toast/ToastyOverride.scss

@@ -2,6 +2,8 @@
 |* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of
 |* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
+/* stylelint-disable selector-class-pattern */
+
 @use '../../../styling/defs.scss' as bk;
 
 // Define styling to override react-toastify's styles, as overriding directly from Toast.module.scss is not possible.

src/components/overlays/Tooltip/Tooltip.module.scss

@@ -39,7 +39,7 @@
   background: var(--c1);
 
   &::before {
-    content: "";
+    content: '';
     position: absolute;
     z-index: -1;
     inset: 0;
@@ -72,16 +72,16 @@
     100% min(100%,var(--p) + var(--h)*tan(var(--a)/2)),
     calc(100% + var(--h)) var(--p),
     100% max(0%  ,var(--p) - var(--h)*tan(var(--a)/2)));
-  border-image: conic-gradient(var(--c1) 0 0) fill 0/
-    max(0%,var(--p) - var(--h)*tan(var(--a)/2)) 0 max(0%,100% - var(--p) - var(--h)*tan(var(--a)/2)) var(--r)/0 var(--h) 0 0;
+  border-image: conic-gradient(var(--c1) 0 0) fill 0
+    / max(0%,var(--p) - var(--h)*tan(var(--a)/2)) 0 max(0%,100% - var(--p) - var(--h)*tan(var(--a)/2)) var(--r)/0 var(--h) 0 0;
 
   &::before {
     clip-path: polygon(100% 0,0 0,0 100%,100% 100%,
       calc(100% - var(--b)) min(100% - var(--b),var(--p) + var(--h)*tan(var(--a)/2) - var(--b)*tan(45deg - var(--a)/4)),
       calc(100% + var(--h) - var(--b)/sin(var(--a)/2)) var(--p),
       calc(100% - var(--b)) max(       var(--b),var(--p) - var(--h)*tan(var(--a)/2) + var(--b)*tan(45deg - var(--a)/4)));
-    border-image: conic-gradient(var(--c2) 0 0) fill 0/
-      max(var(--b),var(--p) - var(--h)*tan(var(--a)/2)) 0 max(var(--b),100% - var(--p) - var(--h)*tan(var(--a)/2)) var(--r)/0 var(--h) 0 0;
+    border-image: conic-gradient(var(--c2) 0 0) fill 0
+      / max(var(--b),var(--p) - var(--h)*tan(var(--a)/2)) 0 max(var(--b),100% - var(--p) - var(--h)*tan(var(--a)/2)) var(--r)/0 var(--h) 0 0;
   }
 }
 @mixin bk-tooltip-arrow-bottom {
@@ -108,16 +108,16 @@
     0 min(100%,var(--p) + var(--h)*tan(var(--a)/2)),
     calc(-1*var(--h)) var(--p),
     0 max(0%  ,var(--p) - var(--h)*tan(var(--a)/2)));
-  border-image: conic-gradient(var(--c1) 0 0) fill 0/
-    max(0%,var(--p) - var(--h)*tan(var(--a)/2)) var(--r) max(0%,100% - var(--p) - var(--h)*tan(var(--a)/2)) 0/0 0 0 var(--h);
+  border-image: conic-gradient(var(--c1) 0 0) fill 0
+    / max(0%,var(--p) - var(--h)*tan(var(--a)/2)) var(--r) max(0%,100% - var(--p) - var(--h)*tan(var(--a)/2)) 0/0 0 0 var(--h);
 
   &::before {
     clip-path: polygon(0 0,100% 0,100% 100%,0 100%,
       var(--b) min(100% - var(--b),var(--p) + var(--h)*tan(var(--a)/2) - var(--b)*tan(45deg - var(--a)/4)),
       calc(var(--b)/sin(var(--a)/2) - var(--h)) var(--p),
       var(--b) max(       var(--b),var(--p) - var(--h)*tan(var(--a)/2) + var(--b)*tan(45deg - var(--a)/4)));
-    border-image: conic-gradient(var(--c2) 0 0) fill 0/
-      max(var(--b),var(--p) - var(--h)*tan(var(--a)/2)) var(--r) max(var(--b),100% - var(--p) - var(--h)*tan(var(--a)/2)) 0/0 0 0 var(--h);
+    border-image: conic-gradient(var(--c2) 0 0) fill 0
+      / max(var(--b),var(--p) - var(--h)*tan(var(--a)/2)) var(--r) max(var(--b),100% - var(--p) - var(--h)*tan(var(--a)/2)) 0/0 0 0 var(--h);
   }
 }
 

src/layouts/AppLayout/Sidebar/Sidebar.module.scss

@@ -20,10 +20,6 @@
       transition: all 300ms ease-in-out;
       transition-property: width, grid-template-columns;
 
-      &.-collapsed {
-        width: var(--bk-sizing-5);
-      }
-      
       .bk-app-layout-sidebar__action-collapse {
         margin: var(--bk-sizing-2);
         padding: var(--bk-sizing-1) var(--bk-sizing-2);

stylelint.config.mjs

@@ -11,7 +11,7 @@ export default {
   'rules': {
     // Override `stylelint-config-standard-scss` rules
     'scss/load-partial-extension': 'always',
-    'scss/at-import-partial-extension': 'always',
+    //'scss/at-import-partial-extension': 'always',
     'comment-empty-line-before': null,
     'comment-whitespace-inside': null,
     'scss/comment-no-empty': null,