fix(css): remove Stylelint multiline comments from built CSS files (#…

…1935)

.github/workflows/css.yml

@@ -44,3 +44,15 @@ jobs:
 
       - name: Run CSS tests
         run: npm run css-test
+
+      # Check that there are no stylelint multiline comments (e.g. /* stylelint-disable */)
+      - name: Check built CSS files
+        shell: bash
+        run: |
+          if [[ $(find dist/css/ -name "*.css" | xargs grep -F "/* stylelint" | wc -l | bc) -eq 0 ]]; then
+            echo "All good, no stylelint multiline comments found"
+            exit 0
+          else
+            echo "Found stylelint multiline comments!"
+            exit 1
+          fi

scss/_button-group.scss

@@ -79,7 +79,8 @@
 //
 
 .dropdown-toggle-split {
-  min-width: add($dropdown-padding-x * 2, calc(#{$caret-width} * 2)); /* stylelint-disable-line function-disallowed-list */ // Boosted mod
+  // stylelint-disable-next-line function-disallowed-list
+  min-width: add($dropdown-padding-x * 2, calc(#{$caret-width} * 2)); // Boosted mod
   padding-right: subtract($dropdown-padding-x, $btn-border-width); // Boosted mod
   padding-left: subtract($dropdown-padding-x, $btn-border-width); // Boosted mod
   border-color: currentcolor; // Boosted mod

scss/_nav.scss

@@ -149,7 +149,7 @@
 
   // Boosted mod
   .nav-item + .nav-item {
-    margin-left: calc(var(--#{$prefix}nav-link-padding-y) * .5); /* stylelint-disable-line function-disallowed-list */
+    margin-left: calc(var(--#{$prefix}nav-link-padding-y) * .5); // stylelint-disable-line function-disallowed-list
   }
   // End mod
 }

scss/_navbar.scss

@@ -52,7 +52,7 @@
   padding: var(--#{$prefix}navbar-padding-y) var(--#{$prefix}navbar-padding-x);
   // Boosted mod
   font-weight: var(--#{$prefix}navbar-font-weight);
-  box-shadow: inset 0 calc(-1 * var(--#{$prefix}navbar-border-width)) 0 var(--#{$prefix}navbar-border-color); /* stylelint-disable-line function-disallowed-list */
+  box-shadow: inset 0 calc(-1 * var(--#{$prefix}navbar-border-width)) 0 var(--#{$prefix}navbar-border-color); // stylelint-disable-line function-disallowed-list
   @include transition($navbar-transition);
   // End mod
   @include gradient-bg();
@@ -137,7 +137,7 @@
   //// Ensure headings variant align consistently
   .title,
   .two-lined {
-    margin: divide(-2em, 7) $spacer divide(-1em, 7) calc(var(--#{$prefix}navbar-brand-logo-size) / 2); /* stylelint-disable-line function-disallowed-list */
+    margin: divide(-2em, 7) $spacer divide(-1em, 7) calc(var(--#{$prefix}navbar-brand-logo-size) / 2); // stylelint-disable-line function-disallowed-list
     @include font-size(var(--#{$prefix}navbar-brand-font-size));
     line-height: 1;
     letter-spacing: var(--#{$prefix}navbar-brand-letter-spacing);
@@ -184,7 +184,7 @@
   .nav-link {
     position: relative;
     padding-top: subtract(var(--#{$prefix}navbar-nav-link-padding-y), var(--#{$prefix}navbar-border-width));
-    margin-left: calc(-1 * var(--#{$prefix}navbar-nav-link-padding-x)); /* stylelint-disable-line function-disallowed-list */
+    margin-left: calc(-1 * var(--#{$prefix}navbar-nav-link-padding-x)); // stylelint-disable-line function-disallowed-list
     word-break: break-all;
 
     &:hover {
@@ -211,7 +211,7 @@
 
     .nav-link.nav-icon {
       padding: var(--#{$prefix}navbar-nav-icon-padding-y) var(--#{$prefix}navbar-nav-icon-padding-x);
-      margin-left: calc(-1 * var(--#{$prefix}navbar-nav-icon-padding-x)); /* stylelint-disable-line function-disallowed-list */
+      margin-left: calc(-1 * var(--#{$prefix}navbar-nav-icon-padding-x)); // stylelint-disable-line function-disallowed-list
       white-space: nowrap;
 
       svg,
@@ -280,7 +280,7 @@
     border-top: var(--#{$prefix}navbar-border-width) solid var(--#{$prefix}navbar-border-color);
 
     @include media-breakpoint-up(md) {
-      margin-bottom: calc(-1 * var(--#{$prefix}navbar-padding-y)); /* stylelint-disable-line function-disallowed-list */
+      margin-bottom: calc(-1 * var(--#{$prefix}navbar-padding-y)); // stylelint-disable-line function-disallowed-list
     }
   }
 
@@ -294,8 +294,10 @@
 
 // Button for toggling the navbar when in its collapsed state
 .navbar-toggler {
-  padding: var(--#{$prefix}navbar-toggler-padding-y) calc(var(--#{$prefix}navbar-toggler-padding-x) / 2) var(--#{$prefix}navbar-toggler-padding-y) var(--#{$prefix}navbar-toggler-padding-x); /* stylelint-disable-line function-disallowed-list */ // Boosted mod
-  margin-right: calc(-.5 * var(--#{$prefix}navbar-toggler-padding-x)); /* stylelint-disable-line function-disallowed-list */ // Boosted mod
+  // stylelint-disable-next-line function-disallowed-list
+  padding: var(--#{$prefix}navbar-toggler-padding-y) calc(var(--#{$prefix}navbar-toggler-padding-x) / 2) var(--#{$prefix}navbar-toggler-padding-y) var(--#{$prefix}navbar-toggler-padding-x); // Boosted mod
+  // stylelint-disable-next-line function-disallowed-list
+  margin-right: calc(-.5 * var(--#{$prefix}navbar-toggler-padding-x)); // Boosted mod
   @include font-size(var(--#{$prefix}navbar-toggler-font-size));
   line-height: 1;
   color: var(--#{$prefix}navbar-color);
@@ -397,19 +399,19 @@
             border: 0;
 
             &:first-child > .nav-link {
-              margin-left: calc(-1 * var(--#{$prefix}navbar-nav-link-padding-x)); /* stylelint-disable-line function-disallowed-list */
+              margin-left: calc(-1 * var(--#{$prefix}navbar-nav-link-padding-x)); // stylelint-disable-line function-disallowed-list
             }
 
             &:last-child > .nav-link {
-              margin-right: calc(-1 * var(--#{$prefix}navbar-nav-link-padding-x)); /* stylelint-disable-line function-disallowed-list */
+              margin-right: calc(-1 * var(--#{$prefix}navbar-nav-link-padding-x)); // stylelint-disable-line function-disallowed-list
             }
 
             &:first-child > .nav-icon {
-              margin-left: calc(-1 * var(--#{$prefix}navbar-nav-icon-padding-x)); /* stylelint-disable-line function-disallowed-list */
+              margin-left: calc(-1 * var(--#{$prefix}navbar-nav-icon-padding-x)); // stylelint-disable-line function-disallowed-list
             }
 
             &:last-child > .nav-icon {
-              margin-right: calc(-1 * var(--#{$prefix}navbar-nav-icon-padding-x)); /* stylelint-disable-line function-disallowed-list */
+              margin-right: calc(-1 * var(--#{$prefix}navbar-nav-icon-padding-x)); // stylelint-disable-line function-disallowed-list
             }
           }
           // End mod

scss/_orange-navbar.scss

@@ -4,7 +4,7 @@
 // Brand exclusive thin navbar that can be used with orange navbar
 .supra {
   // scss-docs-start supra-navbar-css-vars
-  --#{$prefix}navbar-padding-y: 0px; /* stylelint-disable-line length-zero-no-unit */
+  --#{$prefix}navbar-padding-y: 0px; // stylelint-disable-line length-zero-no-unit
   --#{$prefix}navbar-nav-font-size: #{$font-size-sm};
   --#{$prefix}navbar-nav-line-height: #{$line-height-sm};
   --#{$prefix}navbar-nav-link-padding-y: #{$navbar-supra-link-padding-y};
@@ -28,7 +28,7 @@
 .header-minimized {
   // scss-docs-start minimized-navbar-css-vars
   @include media-breakpoint-up(md){
-    --#{$prefix}navbar-padding-y: 0px; /* stylelint-disable-line length-zero-no-unit */
+    --#{$prefix}navbar-padding-y: 0px; // stylelint-disable-line length-zero-no-unit
     --#{$prefix}navbar-brand-margin-y: #{$navbar-minimized-brand-margin-y};
     --#{$prefix}navbar-brand-logo-size: #{$navbar-brand-logo-size-xs};
     --#{$prefix}navbar-brand-font-size: #{$navbar-brand-font-size-xs};

scss/_popover.scss

@@ -62,7 +62,7 @@
 
 .bs-popover-top {
   > .popover-arrow {
-    bottom: calc((-1 * var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)); /* stylelint-disable-line function-disallowed-list */
+    bottom: calc((-1 * var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)); // stylelint-disable-line function-disallowed-list
 
     &::before,
     &::after {
@@ -84,7 +84,7 @@
 /* rtl:begin:ignore */
 .bs-popover-end {
   > .popover-arrow {
-    left: calc((-1 * var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)); /* stylelint-disable-line function-disallowed-list */
+    left: calc((-1 * var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)); // stylelint-disable-line function-disallowed-list
     width: var(--#{$prefix}popover-arrow-height);
     height: var(--#{$prefix}popover-arrow-width);
 
@@ -109,7 +109,7 @@
 
 .bs-popover-bottom {
   > .popover-arrow {
-    top: calc((-1 * var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)); /* stylelint-disable-line function-disallowed-list */
+    top: calc((-1 * var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)); // stylelint-disable-line function-disallowed-list
 
     &::before,
     &::after {
@@ -143,7 +143,7 @@
 /* rtl:begin:ignore */
 .bs-popover-start {
   > .popover-arrow {
-    right: calc((-1 * var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)); /* stylelint-disable-line function-disallowed-list */
+    right: calc((-1 * var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)); // stylelint-disable-line function-disallowed-list
     width: var(--#{$prefix}popover-arrow-height);
     height: var(--#{$prefix}popover-arrow-width);
 

scss/_variables.scss

@@ -898,7 +898,8 @@ $table-hover-bg:                        rgba($black, $table-hover-bg-factor) !de
 $table-variant-hover-bg-factor:         .2 !default; // Boosted mod
 
 $table-border-factor:                   .4 !default; // Boosted mod
-$table-border-width:                    calc(var(--#{$prefix}border-width) * .5) !default; /* stylelint-disable-line function-disallowed-list */ // Boosted mod
+// stylelint-disable-next-line function-disallowed-list
+$table-border-width:                    calc(var(--#{$prefix}border-width) * .5) !default;  // Boosted mod
 $table-border-color:                    var(--#{$prefix}border-color-translucent) !default; // Boosted mod
 
 $table-striped-order:                   odd !default;
@@ -1195,7 +1196,8 @@ $form-switch-transition:          background-position .15s ease-in-out, $transit
 // Boosted mod: no $form-switch-checked-color
 $form-switch-checked-bg-image:    $form-check-input-checked-bg-image !default; // Boosted mod
 $form-switch-checked-bg-size:     add(map-get($spacers, 2), map-get($spacers, 1)) !default; // Boosted mod
-$form-switch-checked-bg-position: calc(var(--#{$prefix}border-width) * 3) 50% !default; /* stylelint-disable-line function-disallowed-list */ // Boosted mod
+// stylelint-disable-next-line function-disallowed-list
+$form-switch-checked-bg-position: calc(var(--#{$prefix}border-width) * 3) 50% !default; // Boosted mod
 // scss-docs-end form-switch-variables
 
 // scss-docs-start input-group-variables
@@ -1387,13 +1389,15 @@ $nav-pills-link-active-bg:          $component-active-bg !default;
 
 $nav-underline-gap:                       0 !default; // Boosted mod: instead of 1rem
 $nav-underline-gap-lg:                    $spacer * .5 !default; // Boosted mod
-$nav-underline-border-width:              calc(var(--#{$prefix}border-width) * .5) !default; /* stylelint-disable-line function-disallowed-list */ // Boosted mod: instead of .125rem
+// stylelint-disable-next-line function-disallowed-list
+$nav-underline-border-width:              calc(var(--#{$prefix}border-width) * .5) !default; // Boosted mod: instead of .125rem
 $nav-underline-border-color:              $gray-500 !default; // Boosted mod
 $nav-underline-border-radius:             var(--#{$prefix}border-radius) !default; // Boosted mod
 $nav-underline-link-active-color:         var(--#{$prefix}emphasis-color) !default;
 $nav-underline-link-padding-x:            1.8125rem !default; // Boosted mod
 $nav-underline-link-hover-color:          $accessible-orange !default; // Boosted mod
-$nav-underline-link-border-width:         0 0 calc(var(--#{$prefix}nav-underline-border-width) * 4) !default;  /* stylelint-disable-line function-disallowed-list */ // Boosted mod
+// stylelint-disable-next-line function-disallowed-list
+$nav-underline-link-border-width:         0 0 calc(var(--#{$prefix}nav-underline-border-width) * 4) !default; // Boosted mod
 $nav-underline-link-active-bg:            var(--#{$prefix}body-bg) !default; // Boosted mod
 $nav-underline-link-active-border-color:  $accessible-orange !default; // Boosted mod
 // scss-docs-end nav-variables
@@ -1678,7 +1682,8 @@ $accordion-padding-y:                     $spacer * .5 !default; // Boosted mod
 $accordion-padding-x:                     0 !default; // Boosted mod
 $accordion-color:                         var(--#{$prefix}body-color) !default;
 $accordion-bg:                            var(--#{$prefix}body-bg) !default;
-$accordion-border-width:                  calc(var(--#{$prefix}border-width) * .5) !default; /* stylelint-disable-line function-disallowed-list */ // Boosted mod
+// stylelint-disable-next-line function-disallowed-list
+$accordion-border-width:                  calc(var(--#{$prefix}border-width) * .5) !default; // Boosted mod
 $accordion-border-color:                  $gray-500 !default; // Boosted mod
 $accordion-border-radius:                 var(--#{$prefix}border-radius) !default;
 $accordion-inner-border-radius:           subtract($accordion-border-radius, #{$accordion-border-width}) !default;
@@ -1744,7 +1749,8 @@ $tooltip-line-height:               $line-height-sm !default; // Boosted mod
 $tooltip-max-width:                 $spacer * 10 !default;
 $tooltip-color:                     var(--#{$prefix}body-color) !default; // Boosted mod: instead of `var(--#{$prefix}body-bg)`
 $tooltip-bg:                        var(--#{$prefix}body-bg) !default; // Boosted mod: instead of `var(--#{$prefix}emphasis-color)`
-$tooltip-border-width:              calc(var(--#{$prefix}border-width) * .5) !default; /* stylelint-disable-line function-disallowed-list */ // Boosted mod
+// stylelint-disable-next-line function-disallowed-list
+$tooltip-border-width:              calc(var(--#{$prefix}border-width) * .5) !default; // Boosted mod
 $tooltip-border-color:              var(--#{$prefix}emphasis-color) !default; // Boosted mod
 $tooltip-border-radius:             var(--#{$prefix}border-radius) !default;
 $tooltip-opacity:                   1 !default;
@@ -2118,16 +2124,19 @@ $carousel-transition:                transform $carousel-transition-duration $tr
 $spinner-width:           $spacer * 2 !default;
 $spinner-height:          $spinner-width !default;
 $spinner-vertical-align:  -.125em !default;
-$spinner-border-width:    calc(var(--#{$prefix}border-width) * 3) !default; /* stylelint-disable-line function-disallowed-list */ // Boosted mod
+// stylelint-disable-next-line function-disallowed-list
+$spinner-border-width:    calc(var(--#{$prefix}border-width) * 3) !default; // Boosted mod
 $spinner-animation-speed: .75s !default;
 
 $spinner-width-sm:        $spacer !default;
 $spinner-height-sm:       $spinner-width-sm !default;
-$spinner-border-width-sm: calc(var(--#{$prefix}border-width) * 2) !default; /* stylelint-disable-line function-disallowed-list */ // Boosted mod
+// stylelint-disable-next-line function-disallowed-list
+$spinner-border-width-sm: calc(var(--#{$prefix}border-width) * 2) !default; // Boosted mod
 
 $spinner-width-lg:        $spacer * 4 !default; // Boosted mod
 $spinner-height-lg:       $spinner-width-lg !default; // Boosted mod
-$spinner-border-width-lg: calc(var(--#{$prefix}border-width) * 4) !default; /* stylelint-disable-line function-disallowed-list */ // Boosted mod
+// stylelint-disable-next-line function-disallowed-list
+$spinner-border-width-lg: calc(var(--#{$prefix}border-width) * 4) !default; // Boosted mod
 // scss-docs-end spinner-variables
 
 

scss/forms/_form-check.scss

@@ -91,12 +91,16 @@
 
     @if $enable-gradients {
       --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-indeterminate-bg-image)}, var(--#{$prefix}gradient);
-      background-position: 50% add(50%, calc(var(--#{$prefix}border-width) * .25)), center; /* stylelint-disable-line function-disallowed-list */ // Boosted mod
-      background-size: map-get($spacers, 2) calc(var(--#{$prefix}border-width) * 1.5), auto; /* stylelint-disable-line function-disallowed-list */  // Boosted mod
+      // stylelint-disable-next-line function-disallowed-list
+      background-position: 50% add(50%, calc(var(--#{$prefix}border-width) * .25)), center; // Boosted mod
+      // stylelint-disable-next-line function-disallowed-list
+      background-size: map-get($spacers, 2) calc(var(--#{$prefix}border-width) * 1.5), auto; // Boosted mod
     } @else {
       --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-indeterminate-bg-image)};
-      background-position: 50% add(50%, calc(var(--#{$prefix}border-width) * .25)); /* stylelint-disable-line function-disallowed-list */  // Boosted mod
-      background-size: map-get($spacers, 2) calc(var(--#{$prefix}border-width) * 1.5); /* stylelint-disable-line function-disallowed-list */  // Boosted mod
+      // stylelint-disable-next-line function-disallowed-list
+      background-position: 50% add(50%, calc(var(--#{$prefix}border-width) * .25)); // Boosted mod
+      // stylelint-disable-next-line function-disallowed-list
+      background-size: map-get($spacers, 2) calc(var(--#{$prefix}border-width) * 1.5); // Boosted mod
     }
   }
 

scss/forms/_form-range.scss

@@ -41,7 +41,8 @@
     box-sizing: content-box; // Boosted mod
     width: $form-range-thumb-width;
     height: $form-range-thumb-height;
-    margin-top: calc((#{$form-range-track-height} - (#{$form-range-thumb-height} + var(--#{$prefix}border-width) * 2)) * .5); /* stylelint-disable-line function-disallowed-list */ // Webkit specific // Boosted mod
+    // stylelint-disable-next-line function-disallowed-list
+    margin-top: calc((#{$form-range-track-height} - (#{$form-range-thumb-height} + var(--#{$prefix}border-width) * 2)) * .5); // Webkit specific // Boosted mod
     cursor: grab; // Boosted mod
     @include gradient-bg($form-range-thumb-bg);
     border: $form-range-thumb-border;

scss/mixins/_caret.scss

@@ -47,7 +47,8 @@
       content: "";
       @if $direction == down {
         @include caret-down($width);
-        transform: translateY(calc(var(--#{$prefix}border-width) * .5)); /* stylelint-disable-line function-disallowed-list */ // Boosted mod
+        // stylelint-disable-next-line function-disallowed-list
+        transform: translateY(calc(var(--#{$prefix}border-width) * .5)); // Boosted mod
       } @else if $direction == up {
         @include caret-up($width);
       } @else if $direction == end {