continue drafting rules section of README.md...

Shopify · Dec 9, 2022 · f4cb391 · f4cb391
1 parent b1781b1
commit f4cb391
Show file tree

Hide file tree

Showing 3 changed files with 103 additions and 46 deletions.
diff --git a/stylelint-polaris/README.md b/stylelint-polaris/README.md
@@ -180,18 +180,41 @@ yarn run stylelint path/to/component.scss
 
 ### Conventions
 
-#### unit-disallowed-list
+Allows definition of custom properties not prefixed with `--p-`, `--pc-`, or `--polaris-version-`.
+
+#### custom-property-allowed-list
 
 ```diff
-- font-size: 12px;
-- line-height: 1.5rem
-- transition-duration: 200ms;
+root: {
+- --p-animation-name-drag-handle-pulse: osui_drag-handle-pulse;
+};
 ```
 
 ```diff
-+ font-size: var(--p-font-size-75);
-+ line-height: var(--p-font-line-height-3);
-+ transition-duration: var(--p-duration-200);
+root: {
++ --osui_animation-name-drag-handle-pulse: osui_drag-handle-pulse;
+};
+```
+
+Flags declaration property values using `--p-*` that are not valid Polaris tokens.
+
+```diff
+- font-size: var(--p-fontsize-200);
+```
+
+```diff
++ font-size: var(--p-font-size-200);
+```
+
+Flags declaration property values using private `--pc-*` tokens.
+
+```diff
+- background: var(--pc-button-color-depressed);
+
+```
+
+```diff
++ background: var(--p-action-secondary-depressed);
 ```
 
 ### Colors
@@ -223,51 +246,71 @@ yarn run stylelint path/to/component.scss
 #### declaration-property-value-disallowed-list
 
 ```diff
-
+- background: black;
+- opacity: 0.15;
 ```
 
-#### declaration-property-unit-disallowed-list
-
 ```diff
-
++ background: var(--p-hint-from-direct-light);
 ```
 
 #### function-disallowed-list
 
 ```diff
+- color: rgb(140, 145, 150);
+- background: color('hover')
+```
+
+```diff
++ color: var(--p-text-disabled);
++ background: var(--p-action-secondary-hovered-dark);
 
 ```
 
 #### at-rule-disallowed-list
 
 ```diff
+- fill: recolor-icon(--p-text-subdued);
+```
 
+```diff
++ fill: var(--p-icon-subdued);
 ```
 
-#### property-disallowed-list
+#### global-disallowed-list
 
-```diff
+Disallows use of legacy custom properties.
 
+```diff
+- border: var(--p-override-transparent);
 ```
 
-### Typography
+```diff
++ border: transparent;
+```
 
-#### declaration-property-value-disallowed-list
+Disallows use of legacy mixin map data.
 
 ```diff
-
+- @type map $filter-palette-data: $polaris-color-filters;
 ```
 
-#### declaration-property-unit-disallowed-list
+### Motion
+
+#### function-disallowed-list
 
 ```diff
 
 ```
 
-#### function-disallowed-list
+#### declaration-property-unit-disallowed-list
 
 ```diff
+- transition-duration: 200ms;
+```
 
+```diff
++ transition-duration: var(--p-duration-200);
 ```
 
 #### at-rule-disallowed-list
@@ -276,13 +319,13 @@ yarn run stylelint path/to/component.scss
 
 ```
 
-#### property-disallowed-list
+#### global-disallowed-list
 
 ```diff
 
 ```
 
-### Shape
+### Typography
 
 #### declaration-property-value-disallowed-list
 
@@ -293,7 +336,13 @@ yarn run stylelint path/to/component.scss
 #### declaration-property-unit-disallowed-list
 
 ```diff
+- font-size: 12px;
+- line-height: 1.5rem
+```
 
+```diff
++ font-size: var(--p-font-size-75);
++ line-height: var(--p-font-line-height-3);
 ```
 
 #### function-disallowed-list
@@ -314,7 +363,7 @@ yarn run stylelint path/to/component.scss
 
 ```
 
-### Spacing
+### Shape
 
 #### declaration-property-value-disallowed-list
 
@@ -325,7 +374,13 @@ yarn run stylelint path/to/component.scss
 #### declaration-property-unit-disallowed-list
 
 ```diff
+- border-width: 2px;
+- border-radius: 0.5rem;
+```
 
+```diff
++ border-width: var(--p-border-width-2);
++ border-radius: var(--p-border-radius-2);
 ```
 
 #### function-disallowed-list
@@ -346,7 +401,7 @@ yarn run stylelint path/to/component.scss
 
 ```
 
-### Depth
+### Spacing
 
 #### declaration-property-value-disallowed-list
 
@@ -357,7 +412,13 @@ yarn run stylelint path/to/component.scss
 #### declaration-property-unit-disallowed-list
 
 ```diff
+- gap: 2px;
+- margin: 12px  0;
+```
 
+```diff
++ gap: var(--p-space-05);
++ margin: var(--p-space-3) 0;
 ```
 
 #### function-disallowed-list
@@ -378,7 +439,7 @@ yarn run stylelint path/to/component.scss
 
 ```
 
-### Motion
+### Depth
 
 #### declaration-property-value-disallowed-list
 
@@ -389,7 +450,11 @@ yarn run stylelint path/to/component.scss
 #### declaration-property-unit-disallowed-list
 
 ```diff
+- box-shadow: inset 0 0 0 1px var(--p-border-subdued);
+```
 
+```diff
++ box-shadow: inset 0 0 0 var(--p-space-025) var(--p-border-subdued);
 ```
 
 #### function-disallowed-list
@@ -418,13 +483,13 @@ yarn run stylelint path/to/component.scss
 
 ```
 
-#### stylelint-polaris/media-queries-allowed-list
+#### media-queries-allowed-list
 
 ```diff
 
 ```
 
-#### stylelint-polaris/at-rule-disallowed-list
+#### at-rule-disallowed-list
 
 ```diff
 
@@ -444,7 +509,7 @@ yarn run stylelint path/to/component.scss
 
 ```
 
-#### stylelint-polaris/global-disallowed-list
+#### global-disallowed-list
 
 ```diff
 
@@ -458,12 +523,6 @@ yarn run stylelint path/to/component.scss
 
 ```
 
-#### declaration-property-unit-disallowed-list
-
-```diff
-
-```
-
 #### function-disallowed-list
 
 ```diff
@@ -484,7 +543,7 @@ yarn run stylelint path/to/component.scss
 
 ### Legacy
 
-#### stylelint-polaris/at-rule-disallowed-list
+#### at-rule-disallowed-list
 
 ```diff
 
@@ -496,7 +555,7 @@ yarn run stylelint path/to/component.scss
 
 ```
 
-#### stylelint-polaris/global-disallowed-list
+#### global-disallowed-list
 
 ```diff
 

diff --git a/stylelint-polaris/index.js b/stylelint-polaris/index.js
@@ -39,7 +39,6 @@ const stylelintPolarisCoverageOptions = {
           // Legacy mixins
           /([\w-]+\.)?color-icon($|\()/,
           /([\w-]+\.)?recolor-icon($|\()/,
-          /([\w-]+\.)?control-backdrop($|\()/,
           /([\w-]+\.)?ms-high-contrast-color/,
         ],
       },
@@ -62,7 +61,6 @@ const stylelintPolarisCoverageOptions = {
   ],
   motion: [
     {
-      'at-rule-disallowed-list': ['keyframes'],
       'function-disallowed-list': [
         /([\w-]+\.)?control-icon-transition/,
         /([\w-]+\.)?duration/,
@@ -74,6 +72,7 @@ const stylelintPolarisCoverageOptions = {
           '/^transition/': ['ms', 's'],
         },
       ],
+      'at-rule-disallowed-list': ['keyframes'],
       'polaris/at-rule-disallowed-list': {
         include: [/([\w-]+\.)?skeleton-shimmer($|\()/],
       },

diff --git a/stylelint-polaris/plugins/coverage/index.js b/stylelint-polaris/plugins/coverage/index.js
@@ -99,6 +99,7 @@ module.exports = stylelint.createPlugin(
               ` (${stylelintRuleName})`,
               '',
             );
+
             // We insert the meta for the rules on the stylelint result, because the rules are reported with dynamic rule names instead of each category being its own plugin. See Stylelint issue for context: https://github.com/stylelint/stylelint/issues/6513
             result.stylelint.ruleMetadata[ruleName] = meta;
 
@@ -109,11 +110,9 @@ module.exports = stylelint.createPlugin(
             stylelint.utils.report({
               result,
               ruleName,
-              meta,
               message,
               severity: severity || 'error',
-              // If `warning.node` is NOT present, the warning is
-              // referring to a misconfigured rule
+              // If `warning.node` is NOT present, the warning is referring to a misconfigured rule
               ...(warning.node ? {node: warning.node} : forceReport),
             });
           },
@@ -135,16 +134,16 @@ function normalizeConfig(config) {
   return Array.isArray(config) ? config : [config, {}];
 }
 
-function validatePrimaryOptions(primaryOptions) {
-  if (!isPlainObject(primaryOptions)) return false;
+function validatePrimaryOptions(categorizedRules) {
+  if (!isPlainObject(categorizedRules)) return false;
 
-  for (const categoryConfigRules of Object.values(primaryOptions)) {
+  for (const categoryConfig of Object.values(categorizedRules)) {
     if (
       !(
-        isPlainObject(categoryConfigRules) ||
-        (Array.isArray(categoryConfigRules) &&
-          categoryConfigRules.length === 2 &&
-          categoryConfigRules.every(isPlainObject))
+        isPlainObject(categoryConfig) ||
+        (Array.isArray(categoryConfig) &&
+          categoryConfig.length === 2 &&
+          categoryConfig.every(isPlainObject))
       )
     ) {
       return false;