Add stylelint-polaris/media-queries-allowed-list plugin

[aaronccasanova]

WHAT is this pull request doing?

This PR introduces a new stylelint-polaris/media-queries-allowed-list plugin to ensure @media rules only use the new Polaris breakpoints aliases and other support media types.

e.g. stylelint **/*.scss

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Copy-paste this code in playground/Playground.tsx:

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>
  );
}

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility
• Updated the component's README.md with documentation changes
• Tophatted documentation changes in the style guide

[alex-page]

Looking at the screenshot, I see the output as errors and I think these should be warnings. We want to encourage consistency and push towards the Polaris values. Once there is a high level of adoption these can become errors. I might be reading this wrong though!

[aaronccasanova]

I see the output as errors and I think these should be warnings.

@alex-page Good call! I set the internal config to warn on main and will revert it back on the next-breakpoints branch.

[gui-santos]

🌮

[lgriffee]

🚢✨🎉

[aaronccasanova]

Added a last minute update to the allowedScssInterpolations config to check against the inner expression. This avoids redundancy by not requiring authors to defined #{} to each match pattern e.g.
From allowedScssInterpolations: ['#{$my-expression}', '#{1 + 1}']
To allowedScssInterpolations: ['$my-expression', '1 + 1']