chore: Make sure stylelint issues fail the build (#3640)

Author: just-boris

package.json

@@ -17,7 +17,7 @@
     "test:motion": "gulp test:motion",
     "lint": "npm-run-all --parallel lint:*",
     "lint:eslint": "eslint .",
-    "lint:stylelint": "stylelint --ignore-path .gitignore --fix '{src,pages}/**/*.{css,scss}'",
+    "lint:stylelint": "stylelint --ignore-path .gitignore '{src,pages}/**/*.{css,scss}'",
     "start": "npm-run-all --parallel start:watch start:dev",
     "start:watch": "gulp watch",
     "start:dev": "cross-env NODE_ENV=development webpack serve --config pages/webpack.config.cjs",

src/app-layout/visual-refresh/styles.scss

@@ -3,15 +3,15 @@
  SPDX-License-Identifier: Apache-2.0
 */
 
-@use './background.scss';
-@use './breadcrumbs.scss';
-@use './drawers.scss';
-@use './header.scss';
-@use './layout.scss';
-@use './main.scss';
-@use './mobile-toolbar.scss';
-@use './navigation.scss';
-@use './notifications.scss';
-@use './split-panel.scss';
-@use './tools.scss';
-@use './trigger-button.scss';
+@use './background';
+@use './breadcrumbs';
+@use './drawers';
+@use './header';
+@use './layout';
+@use './main';
+@use './mobile-toolbar';
+@use './navigation';
+@use './notifications';
+@use './split-panel';
+@use './tools';
+@use './trigger-button';

src/button/styles.scss

@@ -95,8 +95,10 @@
           'vertical': awsui.$space-button-icon-focus-outline-gutter-vertical,
           'horizontal': awsui.$space-button-focus-outline-gutter,
         ),
-        $border-radius:
-          var(#{custom-props.$styleFocusRingBorderRadius}, awsui.$border-radius-control-default-focus-ring),
+        $border-radius: var(
+            #{custom-props.$styleFocusRingBorderRadius},
+            awsui.$border-radius-control-default-focus-ring
+          ),
         $box-shadow: var(#{custom-props.$styleFocusRingBoxShadow})
       );
     }

src/content-layout/styles.scss

@@ -12,7 +12,9 @@
   #{custom-props.$contentLayoutMainGap}: 0px;
   display: grid;
   grid-template-columns: 0 0 1fr minmax(0, var(#{custom-props.$contentLayoutMaxContentWidth})) 1fr 0 0;
-  grid-template-rows: var(#{custom-props.$contentLayoutMainGap}) min-content min-content auto awsui.$space-dark-header-overlap-distance 1fr;
+  grid-template-rows:
+    var(#{custom-props.$contentLayoutMainGap})
+    min-content min-content auto awsui.$space-dark-header-overlap-distance 1fr;
   min-block-size: 100%;
 
   @include styles.media-breakpoint-down(styles.$breakpoint-x-small) {
@@ -48,10 +50,8 @@
   &.default-padding {
     #{custom-props.$contentLayoutMainGap}: awsui.$space-scaled-m;
     grid-template-columns:
-      var(#{custom-props.$togglesLeftWidth}, 0) var(#{custom-props.$contentLayoutDefaultHorizontalPadding}, 0) 1fr minmax(
-        0,
-        var(#{custom-props.$contentLayoutMaxContentWidth})
-      )
+      var(#{custom-props.$togglesLeftWidth}, 0) var(#{custom-props.$contentLayoutDefaultHorizontalPadding}, 0)
+      1fr minmax(0, var(#{custom-props.$contentLayoutMaxContentWidth}))
       1fr var(#{custom-props.$contentLayoutDefaultHorizontalPadding}, 0) var(#{custom-props.$togglesRightWidth}, 0);
   }
 

src/icon/styles.scss

@@ -29,25 +29,25 @@
   @include mixins.make-icon-variants;
 
   &:is(
-      .name-angle-left-double,
-      .name-angle-left,
-      .name-angle-right-double,
-      .name-angle-right,
-      .name-arrow-left,
-      .name-arrow-right,
-      .name-caret-left-filled,
-      .name-caret-right-filled,
-      .name-audio-full,
-      .name-audio-half,
-      .name-audio-off,
-      .name-external,
-      .name-redo,
-      .name-resize-area,
-      .name-send,
-      .name-shrink,
-      .name-undo,
-      .name-view-vertical
-    ) {
+    .name-angle-left-double,
+    .name-angle-left,
+    .name-angle-right-double,
+    .name-angle-right,
+    .name-arrow-left,
+    .name-arrow-right,
+    .name-caret-left-filled,
+    .name-caret-right-filled,
+    .name-audio-full,
+    .name-audio-half,
+    .name-audio-off,
+    .name-external,
+    .name-redo,
+    .name-resize-area,
+    .name-send,
+    .name-shrink,
+    .name-undo,
+    .name-view-vertical
+  ) {
     @include styles.with-direction('rtl') {
       transform: scaleX(-1);
     }

src/input/styles.scss

@@ -84,7 +84,8 @@
     @include styles.form-invalid-control();
     &.input-has-icon-left {
       padding-inline-start: calc(
-        #{styles.$control-icon-horizontal-padding} - (#{styles.$invalid-control-left-border} - #{awsui.$border-width-field})
+        #{styles.$control-icon-horizontal-padding} -
+          (#{styles.$invalid-control-left-border} - #{awsui.$border-width-field})
       );
     }
   }
@@ -93,7 +94,8 @@
     @include styles.form-warning-control();
     &.input-has-icon-left {
       padding-inline-start: calc(
-        #{styles.$control-icon-horizontal-padding} - (#{styles.$invalid-control-left-border} - #{awsui.$border-width-field})
+        #{styles.$control-icon-horizontal-padding} -
+          (#{styles.$invalid-control-left-border} - #{awsui.$border-width-field})
       );
     }
   }

src/internal/base-component/styles.scss

@@ -8,7 +8,7 @@
  SPDX-License-Identifier: Apache-2.0
 */
 @use 'awsui:globals';
-@use '../styles/global.scss';
+@use '../styles/global';
 @use '../generated/custom-css-properties' as custom-styles;
 
 :root {

src/link/constants.scss

@@ -98,8 +98,7 @@ $link-variants: (
   ),
   // Need separate variant used for backwards compatible styles in classic
   // (vr - button style, classic - underlined link style),
-  'recovery':
-    (
+  'recovery': (
       'text-color-default': awsui.$color-text-link-default,
       'text-color-hover': awsui.$color-text-link-hover,
       'text-color-active': awsui.$color-text-link-hover,
@@ -113,8 +112,7 @@ $link-variants: (
 
 $link-styles: (
   // A link without an href to be styled like a button
-  'button':
-    (
+  'button': (
       'text-color-default': awsui.$color-text-link-button-normal-default,
       'text-color-hover': awsui.$color-text-link-button-normal-hover,
       'text-color-active': awsui.$color-text-link-button-normal-active,

src/property-filter/styles.scss

@@ -151,7 +151,9 @@ $operator-field-width: 120px;
 
     display: grid;
     gap: awsui.$space-s;
-    grid-template-columns: minmax(min-content, 2fr) minmax(min-content, $operator-field-width) minmax(min-content, 3fr) min-content;
+    grid-template-columns:
+      minmax(min-content, 2fr) minmax(min-content, $operator-field-width) minmax(min-content, 3fr)
+      min-content;
 
     &-group {
       display: contents;