Fix Stylelint configuration (#10169)

.stylelintrc.js

@@ -1,6 +1,5 @@
 module.exports = {
-  extends: "stylelint-config-standard",
-  customSyntax: "postcss-scss",
+  extends: "stylelint-config-standard-scss",
   ignoreFiles: ["src/main/scss/_bootstrap.scss"],
   rules: {
     "no-descending-specificity": null,
@@ -14,23 +13,8 @@ module.exports = {
       },
     ],
     "property-no-vendor-prefix": null,
-    "at-rule-no-unknown": [
-      true,
-      {
-        ignoreAtRules: [
-          "function",
-          "if",
-          "each",
-          "include",
-          "mixin",
-          "for",
-          "use",
-        ],
-      },
-    ],
     "alpha-value-notation": "number",
     "number-max-precision": 5,
-    "function-no-unknown": null,
     "no-duplicate-selectors": null,
     "hue-degree-notation": "number",
   },

package.json

@@ -47,7 +47,7 @@
     "style-loader": "4.0.0",
     "stylelint": "16.13.2",
     "stylelint-checkstyle-reporter": "1.0.0",
-    "stylelint-config-standard": "36.0.1",
+    "stylelint-config-standard-scss": "14.0.0",
     "webpack": "5.97.1",
     "webpack-cli": "6.0.1",
     "webpack-remove-empty-scripts": "1.0.4"

src/main/scss/abstracts/_theme.scss

@@ -16,7 +16,6 @@ $colors: (
   "white": #fff,
   "black": oklch(from var(--accent-color) 2% 0.075 h),
 );
-
 $semantics: (
   "accent": var(--blue),
   "text": var(--black),
@@ -146,11 +145,13 @@ $semantics: (
   --btn-line-height: 1rem;
   --btn-large-font-size: var(--font-size-sm);
   --btn-large-line-height: 1.25rem;
+
   // Deprecated - Button primary
   --button-color--primary: var(--background);
   --btn-primary-bg: #063f61;
-  --btn-primary-bg-hover: #{lighten(#063f61, 7.5%)};
-  --btn-primary-bg-active: #{lighten(#063f61, 12%)};
+  --btn-primary-bg-hover: #{color.adjust(#063f61, $lightness: 7.5%)};
+  --btn-primary-bg-active: #{color.adjust(#063f61, $lightness: 12%)};
+
   // Deprecated - Button primary
   --btn-secondary-color: var(--secondary);
   --btn-secondary-bg: var(--btn-text-color);
@@ -164,6 +165,7 @@ $semantics: (
   --btn-secondary-color--active: var(--primary-active);
   --btn-secondary-bg--active: var(--btn-secondary-bg);
   --btn-secondary-border--active: var(--primary-active);
+
   // Deprecated - Button link
   --btn-link-color: var(--accent-color);
   --btn-link-font-weight: var(--link-font-weight);
@@ -315,7 +317,6 @@ $semantics: (
   --form-item-max-width--medium: min(50vw, 1400px);
   --form-item-max-width--small: min(35vw, 1200px);
 
-  /* stylelint-disable-next-line media-query-no-invalid */
   @media screen and (max-width: breakpoints.$tablet-breakpoint) {
     --section-padding: 1.25rem;
     --form-item-max-width: 100%;

src/main/scss/base/_layout-commons.scss

@@ -33,7 +33,6 @@
 }
 
 .app-page-body__sidebar {
-  /* stylelint-disable-next-line media-query-no-invalid */
   @media (min-width: breakpoints.$tablet-breakpoint) {
     &--sticky {
       position: sticky;
@@ -101,7 +100,6 @@ body.two-column #side-panel {
   width: var(--side-panel-width);
 }
 
-/* stylelint-disable-next-line media-query-no-invalid */
 @media (max-width: breakpoints.$tablet-breakpoint) {
   body.two-column #page-body {
     flex-wrap: wrap;

src/main/scss/base/_style.scss

@@ -275,6 +275,7 @@ pre.console {
 .bottom-sticker,
 #bottom-sticker {
   position: sticky;
+
   // This has to be set to -1px so that IntersectionObserver can add the
   // &--stuck class when the element is stuck to the bottom of the screen
   // https://css-tricks.com/how-to-detect-when-a-sticky-element-gets-pinned/

src/main/scss/base/_typography.scss

@@ -26,7 +26,6 @@ textarea,
 select {
   font-size: var(--font-size-sm);
 
-  /* stylelint-disable-next-line media-query-no-invalid */
   @media (max-width: breakpoints.$tablet-breakpoint) {
     font-size: var(--font-size-base);
   }

src/main/scss/components/_command-palette.scss

@@ -56,7 +56,6 @@
   overflow: scroll;
   padding-top: var(--inset);
 
-  /* stylelint-disable-next-line media-query-no-invalid */
   @media (max-width: breakpoints.$tablet-breakpoint) {
     --inset: 10vh;
   }
@@ -70,7 +69,6 @@
   pointer-events: auto;
   margin: 0 auto var(--inset);
 
-  /* stylelint-disable-next-line media-query-no-invalid */
   @media (max-width: breakpoints.$tablet-breakpoint) {
     width: calc(100% - (var(--section-padding) * 2));
   }
@@ -108,6 +106,7 @@
     border-radius: 1rem;
     backdrop-filter: var(--command-palette-results-backdrop-filter);
     box-shadow: var(--command-palette-inset-shadow);
+
     // If set to 0, Safari won't always show the backdrop-filter
     height: 1px;
     transition: height var(--standard-transition);

src/main/scss/components/_icons.scss

@@ -36,6 +36,7 @@
 .icon-blue-anime,
 .icon-red-anime {
   will-change: transform;
+
   // animation: blink 1s infinite linear;
 }
 

src/main/scss/components/_notifications.scss

@@ -1,9 +1,12 @@
+@use "sass:color";
+@use "sass:string";
+
 .jenkins-notification {
   position: fixed;
   left: 1.2rem;
   bottom: 1.2rem;
   min-width: 321px;
-  max-width: min(600px, #{unquote("calc(100vw - 2.4rem)")});
+  max-width: min(600px, #{string.unquote("calc(100vw - 2.4rem)")});
   display: grid;
   grid-template-columns: auto 1fr;
   grid-gap: 1.5ch;
@@ -13,8 +16,8 @@
   line-height: 1.66;
   color: var(--text-color);
   box-shadow:
-    0 0 1px 1px rgba(darken(#024cb6, 50%), 0.075),
-    0 10px 30px rgba(darken(#024cb6, 50%), 0.25),
+    0 0 1px 1px rgba(color.adjust(#024cb6, $lightness: -50%), 0.075),
+    0 10px 30px rgba(color.adjust(#024cb6, $lightness: -50%), 0.25),
     0 0 30px 5px var(--background);
   will-change: opacity, transform;
   z-index: 999;

src/main/scss/components/_side-panel-tasks.scss

@@ -10,7 +10,6 @@ $background-outset: 0.7rem;
   margin: var(--section-padding);
   gap: 0.125rem;
 
-  /* stylelint-disable-next-line media-query-no-invalid */
   @media (min-width: breakpoints.$tablet-breakpoint) {
     margin-right: calc($background-outset);
   }

src/main/scss/form/_file-upload.scss

@@ -28,6 +28,7 @@
     outline: none;
     margin: 0 1rem 0 0;
     padding: 0.5rem 0.85rem 0.5rem 2.5rem;
+
     // Firefox doesn't support pseudo elements on inputs so don't increase padding to accommodate
     @supports (-moz-appearance: none) {
       padding: 0.5rem 0.85rem;

src/main/scss/form/_input.scss

@@ -6,6 +6,7 @@
   border-radius: var(--form-input-border-radius);
   width: 100%;
   box-shadow: var(--form-input-glow);
+
   // Set height transition to 0s as vertical resizing has a delay/lag otherwise
   transition:
     all var(--standard-transition),

src/main/scss/form/_layout.scss

@@ -57,6 +57,7 @@
 
 .jenkins-form-description {
   display: block;
+
   // Tweaked margin so that it appears visually centred when placed next to `.jenkins-form-label`
   margin: -0.2rem 0 0.5rem;
   color: var(--text-color-secondary);

src/main/scss/form/_radio.scss

@@ -88,6 +88,7 @@ $jenkins-radio-glow-active-size: 0.3125rem;
     padding: 0 0 0 2rem;
     cursor: pointer;
     font-weight: var(--form-label-font-weight);
+
     // remove 300ms pause on mobile
     touch-action: manipulation;
 

src/main/scss/form/_search-bar.scss

@@ -187,7 +187,6 @@
     width: 100%;
     margin-block: -6px;
 
-    /* stylelint-disable-next-line media-query-no-invalid */
     @media (min-width: breakpoints.$tablet-breakpoint) {
       max-width: 50vw;
     }

src/main/scss/pages/_job.scss

@@ -94,7 +94,7 @@
 }
 
 .app-builds-container__item {
-  @include mixins.item();
+  @include mixins.item;
 
   display: grid;
   grid-template-columns: auto 1fr auto;

src/main/scss/pluginSetupWizard.scss

@@ -744,7 +744,7 @@
           mask-size: contain;
           mask-position: center;
 
-          @include spin();
+          @include spin;
         }
       }
 
@@ -757,7 +757,7 @@
           mask-size: contain;
           mask-position: center;
 
-          @include no-spin();
+          @include no-spin;
         }
       }
 
@@ -770,7 +770,7 @@
           mask-size: contain;
           mask-position: center;
 
-          @include no-spin();
+          @include no-spin;
         }
       }
     }

src/main/scss/simple-page.scss

@@ -122,6 +122,7 @@
   flex-direction: column;
   gap: 1rem;
   animation: fade-in-jenkins-booting 0.4s both 0.2s;
+
   // Optical compensation to visually center content
   margin-top: -3rem;