[stylelint-polaris] Custom stylelint messages (#7696)

### WHY are these changes introduced?

Closes #7506 

#### To do

- [x] Bring in changes from
https://github.com/Shopify/polaris/pull/7814/files
- [ ] ~Finish adding examples to coverage/README.md~ (handling in
separate [PR](#7878))
- [x] Update screenshots to reflect current approach
- [x] Update/add comments to notable changes/fixes/open questions

### WHAT is this pull request doing?

This pull request adds support for configuring
`stylelint-polaris/coverage` rules with custom messages and metadata, so
that error and warning messages tell admin builders how to resolve the
problem and VS Code diagnostics link to the `@shopify/stylelint-polaris`
documentation.

For example: 

<img width="610" alt="Screenshot 2022-12-09 at 1 41 40 PM"
src="https://user-images.githubusercontent.com/18447883/206791342-cc12ccab-9d36-44db-a619-d7c59dd2b265.png">

This PR also includes a bit of polish:

- Added typing and descriptions to `polaris/coverage` plugin so that
primary options are clear in the config and in the plugin's code
- Updated plugin names to be singular instead of plural 

```diff
- custom-properties-allowed-list
+ custom-property-allowed-list

- media-queries-allowed-list
+ media-query-allowed-list
```
     
     

<!--
  Summary of the changes committed.

Before / after screenshots are appreciated for UI changes. Make sure to
include alt text that describes the screenshot.

If you include an animated gif showing your change, wrapping it in a
details tag is recommended. Gifs usually autoplay, which can cause
accessibility issues for people reviewing your PR:

    <details>
      <summary>Summary of your gif(s)</summary>
      <img src="..." alt="Description of what the gif shows">
    </details>
-->

<!-- ℹ️ Delete the following for small / trivial changes -->

### How to 🎩

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development)
🗒 [General tophatting
guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md)
📄 [Changelog
guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)

<!--
  Give as much information as needed to experiment with the component
  in the playground.
-->

<details>
<summary>Copy-paste this code in
<code>playground/Playground.tsx</code>:</summary>

```jsx
import React from 'react';
import {Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
    </Page>
  );
}
```

</details>

### 🎩 checklist

- [ ] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [ ] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [ ] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [ ] Updated the component's `README.md` with documentation changes
- [ ] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide

.changeset/thirty-jobs-vanish.md

@@ -0,0 +1,5 @@
+---
+'@shopify/stylelint-polaris': patch
+---
+
+Implemented custom message configuration support for polaris/coverage plugin

.stylelintrc.js

@@ -1,9 +1,9 @@
 /** @type {import('stylelint').Config} */
 module.exports = {
   extends: ['@shopify/stylelint-plugin/prettier', './stylelint-polaris'],
-  // Disabling @shopify/stylelint-plugin/configs/core no-unknown-animations as stylelint
-  // is not aware of global Polaris keyframes
+  // Disabling @shopify/stylelint-plugin/configs/core no-unknown-animations as stylelint is not aware of global Polaris keyframes
   // TODO: create custom plugin to ensure animation-names match Polaris keyframe names
+  customSyntax: 'postcss-scss',
   rules: {
     'no-unknown-animations': null,
     'value-keyword-case': ['lower', {camelCaseSvgKeywords: true}],

polaris-react/src/components/Button/Button.scss

@@ -251,7 +251,7 @@
 .plain {
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   @include recolor-icon(var(--p-interactive));
-  // stylelint-disable-next-line polaris/conventions/polaris/custom-properties-allowed-list -- generated by polaris-migrator DO NOT COPY
+  // stylelint-disable-next-line -- polaris/conventions/polaris/custom-property-allowed-list
   margin: calc(-1 * var(--pc-button-vertical-padding))
     calc(-1 * var(--p-space-2));
   padding-left: var(--p-space-2);
@@ -357,10 +357,10 @@
   }
 
   &.sizeLarge {
-    // stylelint-disable polaris/conventions/polaris/custom-properties-allowed-list -- generated by polaris-migrator DO NOT COPY
+    // stylelint-disable -- polaris/conventions/polaris/custom-property-allowed-list
     margin: calc(-1 * var(--pc-button-large-vertical-padding))
       calc(-1 * var(--p-space-5));
-    // stylelint-enable polaris/conventions/polaris/custom-properties-allowed-list
+    // stylelint-enable -- polaris/conventions/polaris/custom-property-allowed-list
   }
 
   &.iconOnly {
@@ -411,7 +411,6 @@
     margin-right: 0;
   }
 }
-// stylelint-enable selector-max-specificity, selector-max-class
 
 .fullWidth {
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY

polaris-react/src/components/DropZone/DropZone.scss

@@ -94,7 +94,7 @@ $dropzone-stacking-order: (
   &:not(.focused) {
     &::after {
       @include reset-after;
-      // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
+
       @include set-border-radius;
       border-color: var(--p-border-neutral-subdued);
     }
@@ -145,7 +145,6 @@ $dropzone-stacking-order: (
 }
 
 .Overlay {
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   @include set-border-radius;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   position: absolute;

polaris-react/src/components/Filters/components/ConnectedFilterControl/ConnectedFilterControl.scss

@@ -5,10 +5,10 @@
 // stylelint-disable selector-max-compound-selectors -- generated by polaris-migrator DO NOT COPY
 // stylelint-disable selector-max-type -- generated by polaris-migrator DO NOT COPY
 .ConnectedFilterControl {
-  // stylelint-disable polaris/conventions/polaris/custom-properties-allowed-list -- generated by polaris-migrator DO NOT COPY
+  // stylelint-disable -- polaris/conventions/polaris/custom-property-allowed-list
   --pc-connceted-filter-control-item: 10;
   --pc-connceted-filter-control-focused: 20;
-  // stylelint-enable polaris/conventions/polaris/custom-properties-allowed-list
+  // stylelint-enable -- polaris/conventions/polaris/custom-property-allowed-list
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   display: flex;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
@@ -125,8 +125,3 @@
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   flex-grow: 0;
 }
-// stylelint-enable selector-max-specificity
-// stylelint-enable selector-max-combinators
-// stylelint-enable selector-max-class
-// stylelint-enable selector-max-type
-// stylelint-enable selector-max-compound-selectors

polaris-react/src/components/RangeSlider/components/DualThumb/DualThumb.scss

@@ -208,14 +208,13 @@ $range-output-size: 32px;
     transform: translateY(calc(-1 * var(--pc-range-slider-output-spacing)));
 
     @media #{$p-breakpoints-md-up} {
-      // stylelint-disable polaris/conventions/polaris/custom-properties-allowed-list -- generated by polaris-migrator DO NOT COPY
+      // stylelint-disable-next-line -- polaris/conventions/polaris/custom-property-allowed-list
       transform: translateY(
         calc(-1 * (var(--pc-range-slider-output-spacing) * 0.5))
       );
-      // stylelint-enable polaris/conventions/polaris/custom-properties-allowed-list
     }
   }
-  // stylelint-enable selector-max-specificity, selector-max-combinators, selector-max-class
+  // stylelint-enable selector-max-specificity, selector-max-combinators, selector-max-class -- generated by polaris-migrator DO NOT COPY
 
   > :first-child {
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY

polaris-react/src/components/RangeSlider/components/SingleThumb/SingleThumb.scss

@@ -103,12 +103,12 @@
     width: 100%;
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     height: var(--pc-range-slider-track-height);
-    // stylelint-disable polaris/conventions/polaris/custom-properties-allowed-list -- Polaris component custom properties
+    // stylelint-disable -- polaris/conventions/polaris/custom-property-allowed-list -- Polaris component custom properties
     background-image: linear-gradient(
       to right,
       var(--pc-single-thumb-gradient-colors)
     );
-    // stylelint-enable polaris/conventions/polaris/custom-properties-allowed-list
+    // stylelint-enable -- polaris/conventions/polaris/custom-property-allowed-list
     border: none;
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     border-radius: var(--pc-range-slider-track-height);
@@ -141,19 +141,19 @@
 
   &::-ms-thumb {
     margin-top: 0;
-    // stylelint-disable polaris/conventions/polaris/custom-properties-allowed-list -- generated by polaris-migrator DO NOT COPY
+    // stylelint-disable -- polaris/conventions/polaris/custom-property-allowed-list -- generated by polaris-migrator DO NOT COPY
     transform: translateY(calc(var(--pc-range-slider-thumb-size) * 0.2))
       scale(0.4);
-    // stylelint-enable polaris/conventions/polaris/custom-properties-allowed-list
+    // stylelint-enable -- polaris/conventions/polaris/custom-property-allowed-list
   }
 
   &::-webkit-slider-thumb {
-    // stylelint-disable polaris/conventions/polaris/custom-properties-allowed-list, function-calc-no-unspaced-operator -- generated by polaris-migrator DO NOT COPY
+    // stylelint-disable -- polaris/conventions/polaris/custom-property-allowed-list, function-calc-no-unspaced-operator
     margin-top: calc(
       (var(--pc-range-slider-thumb-size) - var(--pc-range-slider-track-height)) *
         -0.5
     );
-    // stylelint-enable polaris/conventions/polaris/custom-properties-allowed-list, function-calc-no-unspaced-operator
+    // stylelint-enable -- polaris/conventions/polaris/custom-property-allowed-list, function-calc-no-unspaced-operator
   }
 
   &:active {
@@ -202,11 +202,11 @@
 
 /// Output value indicator
 $range-output-size: 32px;
-// stylelint-disable polaris/conventions/polaris/custom-properties-allowed-list -- generated by polaris-migrator DO NOT COPY
+// stylelint-disable -- polaris/conventions/polaris/custom-property-allowed-list
 $range-output-translate-x: calc(
   -50% + var(--pc-range-slider-output-factor) * var(--pc-range-slider-thumb-size)
 );
-// stylelint-enable polaris/conventions/polaris/custom-properties-allowed-list
+// stylelint-enable -- polaris/conventions/polaris/custom-property-allowed-list
 
 .Output {
   // stylelint-disable-next-line -- Polaris component custom properties
@@ -228,17 +228,17 @@ $range-output-translate-x: calc(
   transition-timing-function: var(--p-ease);
 
   .Input:active + & {
-    // stylelint-disable polaris/layout/polaris/global-disallowed-list -- generated by polaris-migrator DO NOT COPY
+    // stylelint-disable -- polaris/layout/polaris/global-disallowed-list
     $range-thumb-size-difference: var(--p-range-slider-thumb-size-active) -
       var(--p-range-slider-thumb-size-base);
-    // stylelint-enable polaris/layout/polaris/global-disallowed-list
+    // stylelint-enable -- polaris/layout/polaris/global-disallowed-list
     opacity: 1;
     visibility: visible;
-    // stylelint-disable polaris/layout/declaration-property-value-disallowed-list, polaris/conventions/polaris/custom-properties-allowed-list -- generated by polaris-migrator DO NOT COPY
+    // stylelint-disable -- polaris/layout/declaration-property-value-disallowed-list, polaris/conventions/polaris/custom-property-allowed-list -- generated by polaris-migrator DO NOT COPY
     bottom: calc(
       var(--pc-range-slider-thumb-size) + #{$range-thumb-size-difference}
     );
-    // stylelint-enable polaris/layout/declaration-property-value-disallowed-list, polaris/conventions/polaris/custom-properties-allowed-list
+    // stylelint-enable -- polaris/layout/declaration-property-value-disallowed-list, polaris/conventions/polaris/custom-property-allowed-list
   }
 }
 
@@ -268,11 +268,10 @@ $range-output-translate-x: calc(
     transform: translateY(calc(-1 * var(--pc-range-slider-output-spacing)));
 
     @media #{$p-breakpoints-md-up} {
-      // stylelint-disable polaris/conventions/polaris/custom-properties-allowed-list -- generated by polaris-migrator DO NOT COPY
+      // stylelint-disable-next-line -- polaris/conventions/polaris/custom-property-allowed-list
       transform: translateY(
         calc(-1 * (var(--pc-range-slider-output-spacing) * 0.4))
       );
-      // stylelint-enable polaris/conventions/polaris/custom-properties-allowed-list
     }
   }
   // stylelint-enable selector-max-specificity, selector-max-combinators, selector-max-class