[stylelint-polaris ] Explore secondary option structure

.changeset/purple-knives-enjoy.md

@@ -0,0 +1,5 @@
+---
+'@shopify/stylelint-polaris': minor
+---
+
+Categorize coverage rules

.stylelintrc.js

@@ -1,27 +1,20 @@
 /** @type {import('stylelint').Config} */
 module.exports = {
-  extends: ['@shopify/stylelint-plugin/prettier', './stylelint-polaris'],
-  // Disabling @shopify/stylelint-plugin/configs/core no-unknown-animations as styelint
-  // is not aware of global Polaris keyframes
+  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
   // TODO: create custom plugin to ensure animation-names match Polaris keyframe names
+  customSyntax: 'postcss-scss',
   rules: {
-    'no-unknown-animations': undefined,
+    'no-unknown-animations': null,
     'value-keyword-case': ['lower', {camelCaseSvgKeywords: true}],
   },
   overrides: [
-    {
-      files: ['polaris-react/**/*.{css,scss}'],
-      extends: [
-        '@shopify/stylelint-plugin/prettier',
-        './stylelint-polaris/configs/internal',
-      ],
-    },
     {
       files: ['polaris-migrator/**/tests/*.{css,scss}'],
       rules: {
-        'comment-empty-line-before': undefined,
-        'declaration-property-value-disallowed-list': undefined,
-        'function-disallowed-list': undefined,
+        'comment-empty-line-before': null,
+        'declaration-property-value-disallowed-list': null,
+        'function-disallowed-list': null,
       },
     },
   ],

package.json

@@ -79,7 +79,7 @@
     "rollup": "^2.70.2",
     "rollup-plugin-node-externals": "^4.0.0",
     "size-limit": "^5.0.3",
-    "stylelint": "^14.1.0",
+    "stylelint": "^14.15.0",
     "ts-node": "^10.7.0",
     "turbo": "^1.2.8",
     "typescript": "^4.6.3"

polaris-react/src/components/Frame/components/ContextualSaveBar/ContextualSaveBar.scss

@@ -1,13 +1,12 @@
 @import '../../../../styles/common';
 
 .ContextualSaveBar {
-  // Used to apply dark theme to action buttons
-  /* stylelint-disable stylelint-polaris/custom-properties-allowed-list */
+  /* stylelint-disable -- polaris: Used to apply dark theme to action buttons */
   --p-surface: var(--p-surface-dark);
   --p-text: var(--p-text-on-dark);
   --p-action-secondary-hovered: var(--p-action-secondary-hovered-dark);
   --p-action-secondary-pressed: var(--p-action-secondary-pressed-dark);
-  /* stylelint-enable stylelint-polaris/custom-properties-allowed-list */
+  /* stylelint-enable */
   display: flex;
   height: $top-bar-height;
   background: var(--p-surface-dark);