Upgrade stylelint-polaris to stylelint v16 (#12337)

### WHAT is this pull request doing?

This PR upgrades `stylelint-polaris` to `stylelint` v16 and drops
support for v15 and v16.

As part of this upgrade, the following updates were made:
- Upgraded dependencies
  - `stylelint` to `^16.6.1`
  - `stylelint-scss` to `^6.3.2`
  - `@shopify/eslint-plugin` to `^45.0.0`
  - `@shopify/stylelint-plugin` to `^14.0.0`
  - `eslint` to `^8.56.0`
  - `jest-preset-stylelint` to `^7.0.1`
  - `prettier` to `^3.2.2`
- Patched `stylelint` to report errors on async rules. See Stylelint
issue for more details:
stylelint/stylelint#7820
- Added `--experimental-vm-modules` flag to `jest` calls to enable
support for async plugins
- Updated relevant `stylelint-polaris` plugins and `stylelint` APIs to
be asynchronous
- Updated `prettier.format` calls to be asynchronous
- Resolved `eslint` and `stylelint` failures after dependency upgrades
- Temporarily removed the `styles-insert-stylelint-disable` migration as
`result.messages` `node`s are now detached from the `root` AST. Calls
such as `node.prev()` and `node.before(comment)` now throw exceptions as
the reported nodes don't have access to properties and methods
previously exposed. The consensus speaking with @kyledurand and
@sophschneider is that we can revisit adding support for this migration
if and when it is needed again.

### How to 🎩

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#install-dependencies-and-build-workspaces)
🗒 [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)

### 🎩 checklist

- [ ] Tested a
[snapshot](https://github.com/Shopify/polaris/blob/main/documentation/Releasing.md#-snapshot-releases)
- [ ] 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

---------

Co-authored-by: Jess Telford <[email protected]>
Co-authored-by: Kyle Durand <[email protected]>

.changeset/little-impalas-knock.md

@@ -0,0 +1,5 @@
+---
+'@shopify/stylelint-polaris': major
+---
+
+Dropped support for `stylelint` v14 and v15

.changeset/tricky-mayflies-push.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris-migrator': major
+---
+
+Removed `styles-insert-stylelint-disable` migration

.eslintrc.js

@@ -69,6 +69,7 @@ module.exports = {
     '@typescript-eslint/consistent-type-imports': 'error',
     '@typescript-eslint/consistent-type-exports': 'error',
     '@typescript-eslint/naming-convention': 'off',
+    '@typescript-eslint/consistent-indexed-object-style': 'off',
     'jsx-a11y/label-has-for': [
       2,
       {
@@ -86,6 +87,8 @@ module.exports = {
     'jsx-a11y/click-events-have-key-events': 'off',
     'jsx-a11y/no-noninteractive-element-interactions': 'off',
     'jsx-a11y/no-noninteractive-element-to-interactive-role': 'off',
+    'jest/no-conditional-in-test': 'off',
+    'jest/no-standalone-expect': 'off',
     'no-restricted-imports': [
       'error',
       {

.prettierignore

@@ -1,4 +1,8 @@
 .next
+pnpm-lock.yaml
+**/CHANGELOG.md
+/polaris-migrator/src/migrations/**/tests/*.scss
+/polaris-migrator/templates/**/*.hbs
 dist
 node_modules
 /polaris-react/build

.stylelintrc.js

@@ -9,6 +9,13 @@ module.exports = {
     'value-keyword-case': ['lower', {camelCaseSvgKeywords: true}],
     'at-rule-no-unknown': null,
     'scss/at-rule-no-unknown': true,
+    'selector-max-class': 5,
+    'selector-max-combinators': 5,
+    'selector-max-compound-selectors': 5,
+    'selector-max-specificity': '0,5,0',
+    // Disabling this rule as it's not forward-compatible with new CSS rules
+    // that get added. See: https://github.com/stylelint/stylelint/issues/7630
+    'declaration-block-no-redundant-longhand-properties': null,
   },
   overrides: [
     {

package.json

@@ -40,32 +40,37 @@
     "@rollup/plugin-replace": "^5.0.2",
     "@rollup/plugin-virtual": "^3.0.1",
     "@rollup/pluginutils": "^5.0.2",
-    "@shopify/eslint-plugin": "^42.0.1",
-    "@shopify/stylelint-plugin": "^11.0.0",
+    "@shopify/eslint-plugin": "^45.0.0",
+    "@shopify/stylelint-plugin": "^14.0.0",
     "@shopify/typescript-configs": "^5.1.0",
     "@size-limit/preset-small-lib": "^5.0.3",
     "@types/jest": "^29.5.12",
     "@types/node": "^20.10.0",
     "babel-loader": "^9.1.2",
-    "eslint": "^8.3.0",
+    "eslint": "^8.56.0",
     "eslint-plugin-storybook": "^0.8.0",
     "execa": "^5.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "jest-preset-stylelint": "^5.0.3",
+    "jest-preset-stylelint": "^7.0.1",
     "jest-watch-typeahead": "^2.2.2",
     "js-yaml": "^4.1.0",
     "npm-run-all": "^4.1.5",
     "postinstall-postinstall": "^2.1.0",
-    "prettier": "^2.5.0",
+    "prettier": "^3.3.2",
     "rollup": "^3.12.0",
     "rollup-plugin-node-externals": "^5.1.0",
     "size-limit": "^5.0.3",
-    "stylelint": "^14.15.0",
+    "stylelint": "^16.6.1",
     "ts-node": "^10.7.0",
     "turbo": "^1.11.1",
     "typescript": "^4.9.3"
   },
+  "pnpm": {
+    "patchedDependencies": {
+      "[email protected]": "patches/[email protected]"
+    }
+  },
   "size-limit": [
     {
       "name": "polaris-react-cjs",

patches/stylelint@16.6.1.patch

@@ -0,0 +1,26 @@
+diff --git a/lib/utils/checkAgainstRule.cjs b/lib/utils/checkAgainstRule.cjs
+index 862f0c77f2ec60a26ac670230c531be88cead26f..e2c40a2009941ccd9e6c4a8f49f654c8e6ae1ef3 100644
+--- a/lib/utils/checkAgainstRule.cjs
++++ b/lib/utils/checkAgainstRule.cjs
+@@ -45,7 +45,7 @@ async function checkAgainstRule(options, callback) {
+ 	const [primary, secondary] = settings;
+ 	const ruleFunc = rule(primary, secondary || {}, context);
+
+-	ruleFunc(
++	await ruleFunc(
+ 		root,
+
+ 		// NOTE: This temporary PostCSS result doesn't have a property for Stylelint use.
+diff --git a/lib/utils/checkAgainstRule.mjs b/lib/utils/checkAgainstRule.mjs
+index c82c6c82734ba7a41f59a57aa7a89f149378599f..168270665e953635e3cb223fe5ebdbbbaf69ff54 100644
+--- a/lib/utils/checkAgainstRule.mjs
++++ b/lib/utils/checkAgainstRule.mjs
+@@ -42,7 +42,7 @@ export default async function checkAgainstRule(options, callback) {
+ 	const [primary, secondary] = settings;
+ 	const ruleFunc = rule(primary, secondary || {}, context);
+
+-	ruleFunc(
++	await ruleFunc(
+ 		root,
+
+ 		// NOTE: This temporary PostCSS result doesn't have a property for Stylelint use.