Shopify · BPScott · Dec 6, 2021 · Dec 4, 2021 · Dec 3, 2021 · Dec 4, 2021
diff --git a/UNRELEASED.md b/UNRELEASED.md
@@ -29,6 +29,7 @@ Use [the changelog guidelines](/documentation/Versioning%20and%20changelog.md) t
 - Bumped `postcss-modules` to `v4.2.2` ([#4701](https://github.com/Shopify/polaris-react/pull/4701))
 - Bumped `node-sass` to `v6.0.1` ([#4783](https://github.com/Shopify/polaris-react/pull/4783))
 - Bumped `sass-loader` to `v10.1.1` ([#4783](https://github.com/Shopify/polaris-react/pull/4783))
+- Bumped `stylelint` to `v14.1.0` and `@shopify/stylelint-plugin` to `v11.0.0` ([#4798](https://github.com/Shopify/polaris-react/pull/4798))
 
 ### Code quality
 

diff --git a/package.json b/package.json
@@ -103,7 +103,7 @@
     "@shopify/prettier-config": "^1.1.2",
     "@shopify/react-testing": "^3.2.4",
     "@shopify/storybook-a11y-test": "^0.0.1",
-    "@shopify/stylelint-plugin": "^10.0.1",
+    "@shopify/stylelint-plugin": "^11.0.0",
     "@shopify/typescript-configs": "^5.0.0",
     "@size-limit/preset-small-lib": "^5.0.3",
     "@storybook/addon-a11y": "^6.3.7",
@@ -145,7 +145,7 @@
     "shelljs": "^0.8.3",
     "shx": "^0.3.2",
     "size-limit": "^5.0.3",
-    "stylelint": "^13.13.1",
+    "stylelint": "^14.1.0",
     "svgo": "^1.3.0",
     "typescript": "~4.3.5"
   },

diff --git a/src/components/ActionMenu/components/SecondaryAction/SecondaryAction.scss b/src/components/ActionMenu/components/SecondaryAction/SecondaryAction.scss
@@ -13,11 +13,11 @@ $button-spacing: rem(12px);
     border-radius: var(--p-border-radius-base) !important;
     padding-left: $button-spacing;
     padding-right: $button-spacing;
-    // stylelint-disable-next-line selector-max-specificity
+
     &:hover {
       background: var(--p-background-hovered) !important;
     }
-    // stylelint-disable-next-line selector-max-specificity
+
     &:active {
       background: var(--p-background-pressed) !important;
     }

diff --git a/src/components/Banner/Banner.scss b/src/components/Banner/Banner.scss
@@ -233,7 +233,6 @@ $spinner-size: rem(20px);
 // We need pretty high specificity to do the descendant selectors
 // onto the text, which needs to be the relative positioned wrapper
 // so that the borders/ backgrounds do not extend outside of it.
-// stylelint-disable selector-max-specificity
 
 .SecondaryAction {
   @include unstyled-button;

diff --git a/src/components/Breadcrumbs/Breadcrumbs.scss b/src/components/Breadcrumbs/Breadcrumbs.scss
@@ -37,15 +37,14 @@ $icon-size: rem(20px);
       @include recolor-icon(var(--p-icon-pressed));
     }
   }
-  // stylelint-disable selector-max-specificity
+
   &:focus {
     outline: none;
   }
 
   &:focus:not(:active) {
     @include focus-ring($style: 'focused');
   }
-  // stylelint-enable selector-max-specificity
 }
 
 .Content {

diff --git a/src/components/BulkActions/BulkActions.scss b/src/components/BulkActions/BulkActions.scss
@@ -65,7 +65,7 @@ $bulk-actions-offset-slide-in-start: rem(-40px);
 
   // We need the first item of button group on small screen to fill the space
   @include page-before-resource-list-small {
-    // stylelint-disable-next-line selector-max-specificity, selector-max-class, selector-max-combinators, selector-max-type
+    // stylelint-disable-next-line, selector-max-combinators, selector-max-type
     > div > div:first-child {
       flex: 1 1 auto;
     }

diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss
@@ -408,11 +408,11 @@ $stacking-order: (
   }
 
   &.plain {
-    // stylelint-disable selector-max-class, max-nesting-depth
+    // stylelint-disable selector-max-class
     .Text:not(.removeUnderline) {
       text-decoration: underline;
     }
-    // stylelint-enable selector-max-class, max-nesting-depth
+    // stylelint-enable selector-max-class
   }
 
   &.outline {
@@ -449,6 +449,7 @@ $stacking-order: (
     &:active {
       background-color: transparent;
       border-color: currentColor;
+
       &::before {
         opacity: 0.07;
       }
@@ -465,7 +466,6 @@ $stacking-order: (
 
     &:hover,
     &:active {
-      // stylelint-disable-next-line max-nesting-depth
       &::before {
         opacity: 0.05;
       }
@@ -515,18 +515,20 @@ $stacking-order: (
     border-bottom-left-radius: 0;
   }
 }
-// stylelint-disable selector-max-combinators, selector-max-compound-selectors, selector-max-specificity
+// stylelint-disable selector-max-combinators, selector-max-specificity
 [data-buttongroup-segmented='true'] {
   .Button,
   .Button::after {
     border-radius: 0;
   }
+
   > :first-child .Button,
   > :first-child .Button::after {
     border-radius: 0;
     border-top-left-radius: var(--p-border-radius-base);
     border-bottom-left-radius: var(--p-border-radius-base);
   }
+
   > :last-child .Button,
   > :last-child .Button::after {
     border-radius: 0;
@@ -557,4 +559,4 @@ $stacking-order: (
     @include button-full-width;
   }
 }
-// stylelint-enable selector-max-combinators, selector-max-compound-selectors, selector-max-specificity
+// stylelint-enable selector-max-combinators, selector-max-specificity
diff --git a/src/components/Checkbox/Checkbox.scss b/src/components/Checkbox/Checkbox.scss
@@ -5,7 +5,7 @@
   margin: var(--p-choice-margin);
 }
 
-// stylelint-disable selector-max-specificity, selector-max-class, selector-max-combinators, max-nesting-depth
+// stylelint-disable selector-max-specificity, selector-max-class
 .Input {
   @include visually-hidden;
 
@@ -21,6 +21,7 @@
     + .Backdrop {
       @include control-backdrop(active);
     }
+
     ~ .Icon {
       transition: opacity var(--p-duration-1-5-0) var(--p-ease),
         transform var(--p-duration-1-5-0) var(--p-ease);
@@ -38,13 +39,14 @@
   &:disabled:checked {
     + .Backdrop {
       background: var(--p-border-disabled);
+
       &::before {
         background: var(--p-border-disabled);
       }
     }
   }
 }
-// stylelint-enable selector-max-specificity, selector-max-class,  selector-max-combinators, max-nesting-depth
+// stylelint-enable selector-max-specificity, selector-max-class
 
 .Backdrop {
   @include control-backdrop;
@@ -73,7 +75,7 @@
   }
 }
 
-// stylelint-disable selector-max-specificity, selector-max-class, selector-max-combinators, max-nesting-depth
+// stylelint-disable selector-max-specificity, selector-max-class, selector-max-combinators
 .error {
   .Icon {
     @include recolor-icon(var(--p-icon-on-critical));
@@ -82,6 +84,7 @@
   .Backdrop {
     @include control-backdrop(error);
   }
+
   .Input:checked,
   .Input:active,
   .Input.Input-indeterminate {
@@ -90,4 +93,4 @@
     }
   }
 }
-// stylelint-enable selector-max-specificity, selector-max-class,  selector-max-combinators, max-nesting-depth
+// stylelint-enable selector-max-specificity, selector-max-class, selector-max-combinators
diff --git a/src/components/ColorPicker/ColorPicker.scss b/src/components/ColorPicker/ColorPicker.scss
@@ -23,9 +23,6 @@ $stacking-order: (
   display: flex;
 }
 
-// stylelint-disable selector-max-class
-// stylelint-disable selector-max-combinators
-
 .MainColor {
   @include checkers;
   position: relative;

diff --git a/src/components/Connected/Connected.scss b/src/components/Connected/Connected.scss
@@ -24,14 +24,11 @@ $stacking-order: (
 // This is a violation of our component model, but it’s the cleanest
 // way to remove the border radii on connected elements.
 // TextField.scss has a dependency due to this override.
-// stylelint-disable declaration-no-important
 .Item-primary {
   z-index: z-index(primary, $stacking-order);
   flex: 1 1 auto;
 }
 
-// stylelint-enable declaration-no-important
-
 .Item-focused {
   z-index: z-index(focused, $stacking-order);
 }
diff --git a/src/components/DatePicker/DatePicker.scss b/src/components/DatePicker/DatePicker.scss
@@ -68,7 +68,7 @@ $range-end-border-radius: rem(30px);
   }
 
   @include focus-ring;
-  // stylelint-disable-next-line selector-max-specificity
+
   &:focus:not(:active) {
     @include focus-ring($style: 'focused');
   }
@@ -173,11 +173,11 @@ $range-end-border-radius: rem(30px);
 
 .Day-firstInRange {
   border-radius: var(--p-border-radius-base);
-  // stylelint-disable-next-line selector-max-class
+
   &.Day-hasRange,
   &.Day-hoverRight {
     border-radius: $range-end-border-radius 0 0 $range-end-border-radius;
-    // stylelint-disable-next-line selector-max-specificity, selector-max-class
+
     &::after {
       border-radius: $range-end-border-radius 0 0 $range-end-border-radius;
     }
@@ -186,6 +186,7 @@ $range-end-border-radius: rem(30px);
 
 .Day-lastInRange {
   border-radius: 0 $range-end-border-radius $range-end-border-radius 0;
+
   &::after {
     border-radius: 0 $range-end-border-radius $range-end-border-radius 0;
   }
@@ -194,21 +195,20 @@ $range-end-border-radius: rem(30px);
 .Week {
   margin-bottom: rem(2px);
 
-  // stylelint-disable-next-line selector-max-specificity, selector-max-class, selector-max-combinators
+  // stylelint-disable-next-line selector-max-specificity
   > .Day-inRange:first-child:not(.Day-firstInRange):not(.Day-lastInRange) {
     border-radius: var(--p-border-radius-base) 0 0 var(--p-border-radius-base);
   }
 
-  // stylelint-disable-next-line selector-max-specificity, selector-max-class, selector-max-combinators
+  // stylelint-disable-next-line selector-max-specificity
   > .Day-inRange:last-child:not(.Day-firstInRange):not(.Day-lastInRange) {
     border-radius: 0 var(--p-border-radius-base) var(--p-border-radius-base) 0;
   }
 }
 
-// stylelint-disable-next-line selector-max-specificity, selector-max-class, selector-max-combinators
 .Day-inRange,
 .Day-inRange:not(:hover) + .Day {
-  // stylelint-disable-next-line selector-max-specificity, selector-max-class, selector-max-combinators
+  // stylelint-disable-next-line selector-max-specificity
   &::after {
     border-radius: 0 $range-end-border-radius $range-end-border-radius 0;
   }

diff --git a/src/components/DropZone/DropZone.scss b/src/components/DropZone/DropZone.scss
@@ -48,7 +48,6 @@ $dropzone-stacking-order: (
   }
 
   &:not(.focused) {
-    // stylelint-disable-next-line selector-max-specificity
     &::after {
       @include reset-after;
     }
@@ -78,9 +77,7 @@ $dropzone-stacking-order: (
     }
   }
 
-  // stylelint-disable-next-line selector-max-specificity
   &:not(.focused) {
-    // stylelint-disable-next-line selector-max-specificity
     &::after {
       @include reset-after;
       @include set-border-radius;
@@ -159,7 +156,6 @@ $dropzone-stacking-order: (
 
 .focused {
   &:not(.isDisabled) {
-    // stylelint-disable-next-line selector-max-specificity, selector-max-class
     .Container {
       @include focus-ring($style: 'focused');
     }

diff --git a/src/components/DropZone/components/FileUpload/FileUpload.scss b/src/components/DropZone/components/FileUpload/FileUpload.scss
@@ -56,7 +56,6 @@ $slim-vertical-padding: ($slim-min-height - line-height(body) - rem(2px)) / 2;
   &:not(.ActionTitle-disabled) {
     cursor: pointer;
 
-    // stylelint-disable-next-line selector-max-specificity
     &:hover,
     &:active {
       color: var(--p-interactive-pressed);

diff --git a/src/components/Frame/Frame.scss b/src/components/Frame/Frame.scss
@@ -236,6 +236,7 @@ $skip-vertical-offset: rem(10px);
   &.focused {
     pointer-events: all;
     opacity: 1;
+
     > a {
       @include focus-ring($style: 'focused');
     }

diff --git a/src/components/Modal/components/Dialog/Dialog.scss b/src/components/Modal/components/Dialog/Dialog.scss
@@ -23,6 +23,7 @@ $large-width: rem(980px);
     justify-content: center;
   }
 }
+
 .Dialog:focus {
   outline: 0;
 }

diff --git a/src/components/Navigation/Navigation.scss b/src/components/Navigation/Navigation.scss
@@ -239,6 +239,7 @@ $disabled-fade: 0.6;
 
 // Secondary styles
 $secondary-item-font-size: rem(15px);
+
 .SecondaryNavigation {
   flex-basis: 100%;
   margin-left: 0;
@@ -302,11 +303,13 @@ $secondary-item-font-size: rem(15px);
     &.keyFocused {
       color: var(--p-text-primary);
     }
+
     &:active {
       color: var(--p-text-primary);
       @include no-focus-ring;
     }
   }
+
   .Item-disabled {
     font-weight: 500;
     color: var(--p-text-disabled);

diff --git a/src/components/Navigation/_variables.scss b/src/components/Navigation/_variables.scss
@@ -68,6 +68,7 @@ $nav-animation-variables: (
     font-weight: 600;
     line-height: $item-line-height-small;
   }
+
   &::-moz-focus-inner {
     border: 0;
   }
@@ -130,6 +131,7 @@ $nav-animation-variables: (
   position: relative;
   display: flex;
   flex-wrap: wrap;
+
   .RollupSection &,
   .SecondaryNavigation & {
     opacity: 1;
@@ -163,6 +165,7 @@ $nav-animation-variables: (
   0% {
     opacity: 0;
   }
+
   100% {
     opacity: 1;
   }
@@ -171,6 +174,7 @@ $nav-animation-variables: (
 @mixin usermenu-section-attributes {
   position: relative;
   margin-top: spacing();
+
   &::before {
     content: '';
     position: absolute;

diff --git a/src/components/OptionList/components/Checkbox/Checkbox.scss b/src/components/OptionList/components/Checkbox/Checkbox.scss
@@ -19,7 +19,6 @@
     @include focus-ring($style: 'focused');
   }
 
-  // stylelint-disable-next-line selector-max-class
   &:active:not(:disabled),
   &:checked,
   &.Input-indeterminate {
@@ -37,12 +36,10 @@
     }
   }
 
-  // stylelint-disable-next-line selector-max-class
   &:disabled + .Backdrop {
     @include control-backdrop(disabled);
   }
 
-  // stylelint-disable-next-line selector-max-class
   &:disabled:checked {
     // stylelint-disable-next-line selector-max-specificity
     + .Backdrop,
-Original file line number
+Diff line change
@@ Expand Up / @@ -23,6 +23,7 @@ $large-width: rem(980px); @@
         justify-content: center;
       }
     }
     .Dialog:focus {
       outline: 0;
     }
@@ Expand Down @@