@primer/stylelint-config 13.0.0-rc.99be5f2 → 13.0.0-rc.af5663d

package/dist/index.cjs

@@ -422,7 +422,7 @@ function closest(node, test) {
 function createVariableRule(ruleName, rules, url) {
   const plugin = stylelint.createPlugin(ruleName, (enabled, options = {}, context) => {
     if (enabled === false) {
-      return noop$3
+      return noop$2
     }
 
     let actualRules = rules;
@@ -499,7 +499,7 @@ function createVariableRule(ruleName, rules, url) {
   return plugin
 }
 
-function noop$3() {}
+function noop$2() {}
 
 var borders = createVariableRule(
   'primer/borders',
@@ -627,9 +627,9 @@ var colors = createVariableRule(
   'https://primer.style/primitives/colors',
 );
 
-const ruleName$3 = 'primer/responsive-widths';
+const ruleName$2 = 'primer/responsive-widths';
 
-const messages$3 = stylelint.utils.ruleMessages(ruleName$3, {
+const messages$2 = stylelint.utils.ruleMessages(ruleName$2, {
   rejected: value => {
     return `A value larger than the smallest viewport could break responsive pages. Use a width value smaller than ${value}. https://primer.style/css/support/breakpoints`
   },
@@ -649,9 +649,9 @@ const walkGroups$1 = (root, validate) => {
 };
 
 // eslint-disable-next-line no-unused-vars
-var responsiveWidths = stylelint.createPlugin(ruleName$3, (enabled, options = {}, context) => {
+var responsiveWidths = stylelint.createPlugin(ruleName$2, (enabled, options = {}, context) => {
   if (!enabled) {
-    return noop$2
+    return noop$1
   }
 
   const lintResult = (root, result) => {
@@ -662,7 +662,7 @@ var responsiveWidths = stylelint.createPlugin(ruleName$3, (enabled, options = {}
       }
 
       if (decl.type !== 'decl' || !decl.prop.match(/^(min-width|width)/)) {
-        return noop$2
+        return noop$1
       }
 
       const problems = [];
@@ -685,7 +685,7 @@ var responsiveWidths = stylelint.createPlugin(ruleName$3, (enabled, options = {}
             if (parseInt(valueUnit.number) > 320) {
               problems.push({
                 index: declarationValueIndex(decl) + node.sourceIndex,
-                message: messages$3.rejected(node.value),
+                message: messages$2.rejected(node.value),
               });
             }
             break
@@ -693,7 +693,7 @@ var responsiveWidths = stylelint.createPlugin(ruleName$3, (enabled, options = {}
             if (parseInt(valueUnit.number) > 100) {
               problems.push({
                 index: declarationValueIndex(decl) + node.sourceIndex,
-                message: messages$3.rejected(node.value),
+                message: messages$2.rejected(node.value),
               });
             }
             break
@@ -707,7 +707,7 @@ var responsiveWidths = stylelint.createPlugin(ruleName$3, (enabled, options = {}
             message: err.message,
             node: decl,
             result,
-            ruleName: ruleName$3,
+            ruleName: ruleName$2,
           });
         }
       }
@@ -717,7 +717,7 @@ var responsiveWidths = stylelint.createPlugin(ruleName$3, (enabled, options = {}
   return lintResult
 });
 
-function noop$2() {}
+function noop$1() {}
 
 const require$2 = node_module.createRequire((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.src || new URL('index.cjs', document.baseURI).href)));
 
@@ -738,8 +738,11 @@ async function primitivesVariables(type) {
     for (const key of Object.keys(data)) {
       const size = data[key];
       const values = size['value'];
-      values.push(`${parseInt(size['original']['value']) + 1}px`);
-      values.push(`${parseInt(size['original']['value']) - 1}px`);
+      const intValue = parseInt(size['original']['value']);
+      if (![2, 6].includes(intValue)) {
+        values.push(`${intValue + 1}px`);
+        values.push(`${intValue - 1}px`);
+      }
 
       variables.push({
         name: `--${size['name']}`,
@@ -767,8 +770,8 @@ const walkGroups = (root, validate) => {
   return root
 };
 
-const ruleName$2 = 'primer/spacing';
-const messages$2 = ruleMessages(ruleName$2, {
+const ruleName$1 = 'primer/spacing';
+const messages$1 = ruleMessages(ruleName$1, {
   rejected: (value, replacement) => {
     if (!replacement) {
       return `Please use a primer size variable instead of '${value}'. Consult the primer docs for a suitable replacement. https://primer.style/foundations/primitives/size`
@@ -792,7 +795,7 @@ const ruleFunction = (primary, secondaryOptions, context) => {
 
     const sizes = await primitivesVariables('size');
 
-    const validOptions = validateOptions(result, ruleName$2, {
+    const validOptions = validateOptions(result, ruleName$1, {
       actual: primary,
       possible: [true],
     });
@@ -847,7 +850,7 @@ const ruleFunction = (primary, secondaryOptions, context) => {
           problems.push({
             index: declarationValueIndex(declNode) + node.sourceIndex,
             endIndex: declarationValueIndex(declNode) + node.sourceIndex + node.value.length,
-            message: messages$2.rejected(node.value, replacement),
+            message: messages$1.rejected(node.value, replacement),
           });
         }
 
@@ -866,7 +869,7 @@ const ruleFunction = (primary, secondaryOptions, context) => {
             message: err.message,
             node: declNode,
             result,
-            ruleName: ruleName$2,
+            ruleName: ruleName$1,
           });
         }
       }
@@ -874,11 +877,11 @@ const ruleFunction = (primary, secondaryOptions, context) => {
   }
 };
 
-ruleFunction.ruleName = ruleName$2;
-ruleFunction.messages = messages$2;
+ruleFunction.ruleName = ruleName$1;
+ruleFunction.messages = messages$1;
 ruleFunction.meta = meta;
 
-var spacing = createPlugin(ruleName$2, ruleFunction);
+var spacing = createPlugin(ruleName$1, ruleFunction);
 
 var typography = createVariableRule(
   'primer/typography',
@@ -903,583 +906,6 @@ var typography = createVariableRule(
   'https://primer.style/css/utilities/typography',
 );
 
-// Meant as temp until we can move to primitives or css
-const colorTypes = ['accent', 'success', 'attention', 'severe', 'danger', 'open', 'closed', 'done', 'sponsors'];
-
-var utilities$1 = {
-  color: [
-    {
-      value: 'var(--color-fg-default)',
-      utilityClass: 'color-fg-default',
-    },
-    {
-      value: 'var(--color-fg-muted)',
-      utilityClass: 'color-fg-muted',
-    },
-    {
-      value: 'var(--color-fg-subtle)',
-      utilityClass: 'color-fg-subtle',
-    },
-  ].concat(
-    colorTypes.map(type => {
-      return {
-        value: `var(--color-${type}-fg)`,
-        utilityClass: `color-fg-${type}`,
-      }
-    }),
-  ),
-  'background-color': [
-    {
-      value: 'var(--color-canvas-default)',
-      utilityClass: 'color-bg-default',
-    },
-    {
-      value: 'var(--color-canvas-overlay)',
-      utilityClass: 'color-bg-overlay',
-    },
-    {
-      value: 'var(--color-canvas-inset)',
-      utilityClass: 'color-bg-inset',
-    },
-    {
-      value: 'var(--color-canvas-subtle)',
-      utilityClass: 'color-bg-subtle',
-    },
-    {
-      value: 'transparent',
-      utilityClass: 'color-bg-transparent',
-    },
-  ]
-    .concat(
-      colorTypes.map(type => {
-        return {
-          value: `var(--color-${type}-subtle)`,
-          utilityClass: `color-bg-${type}`,
-        }
-      }),
-    )
-    .concat(
-      colorTypes.map(type => {
-        return {
-          value: `var(--color-${type}-emphasis)`,
-          utilityClass: `color-bg-${type}-emphasis`,
-        }
-      }),
-    ),
-  'border-color': [
-    {
-      value: 'var(--color-border-default',
-      utilityClass: 'color-border-default',
-    },
-    {
-      value: 'var(--color-border-muted',
-      utilityClass: 'color-border-muted',
-    },
-    {
-      value: 'var(--color-border-subtle',
-      utilityClass: 'color-border-subtle',
-    },
-  ]
-    .concat(
-      colorTypes.map(type => {
-        return {
-          value: `var(--color-${type}-muted)`,
-          utilityClass: `color-border-${type}`,
-        }
-      }),
-    )
-    .concat(
-      colorTypes.map(type => {
-        return {
-          value: `var(--color-${type}-emphasis)`,
-          utilityClass: `color-border-${type}-emphasis`,
-        }
-      }),
-    ),
-  margin: Array.from(new Array(6)).map((_, i) => {
-    return {
-      value: `$spacer-${i + 1}`,
-      utilityClass: `m-${i + 1}`,
-    }
-  }),
-  'margin-top': Array.from(new Array(6)).map((_, i) => {
-    return {
-      value: `$spacer-${i + 1}`,
-      utilityClass: `mt-${i + 1}`,
-    }
-  }),
-  'margin-right': Array.from(new Array(6)).map((_, i) => {
-    return {
-      value: `$spacer-${i + 1}`,
-      utilityClass: `mr-${i + 1}`,
-    }
-  }),
-  'margin-bottom': Array.from(new Array(6)).map((_, i) => {
-    return {
-      value: `$spacer-${i + 1}`,
-      utilityClass: `mb-${i + 1}`,
-    }
-  }),
-  'margin-left': Array.from(new Array(6)).map((_, i) => {
-    return {
-      value: `$spacer-${i + 1}`,
-      utilityClass: `ml-${i + 1}`,
-    }
-  }),
-  padding: Array.from(new Array(6)).map((_, i) => {
-    return {
-      value: `$spacer-${i + 1}`,
-      utilityClass: `p-${i + 1}`,
-    }
-  }),
-  'padding-top': Array.from(new Array(6)).map((_, i) => {
-    return {
-      value: `$spacer-${i + 1}`,
-      utilityClass: `pt-${i + 1}`,
-    }
-  }),
-  'padding-right': Array.from(new Array(6)).map((_, i) => {
-    return {
-      value: `$spacer-${i + 1}`,
-      utilityClass: `pr-${i + 1}`,
-    }
-  }),
-  'padding-bottom': Array.from(new Array(6)).map((_, i) => {
-    return {
-      value: `$spacer-${i + 1}`,
-      utilityClass: `pb-${i + 1}`,
-    }
-  }),
-  'padding-left': Array.from(new Array(6)).map((_, i) => {
-    return {
-      value: `$spacer-${i + 1}`,
-      utilityClass: `pl-${i + 1}`,
-    }
-  }),
-  'line-height': [
-    {
-      value: '$lh-condensed-ultra',
-      utilityClass: 'lh-condensed-ultra',
-    },
-    {
-      value: '$lh-condensed',
-      utilityClass: 'lh-condensed',
-    },
-    {
-      value: '$lh-default',
-      utilityClass: 'lh-default',
-    },
-    {
-      value: '0',
-      utilityClass: 'lh-0',
-    },
-  ],
-  'text-align': [
-    {
-      value: 'left',
-      utilityClass: 'text-left',
-    },
-    {
-      value: 'right',
-      utilityClass: 'text-right',
-    },
-    {
-      value: 'center',
-      utilityClass: 'text-center',
-    },
-  ],
-  'font-style': [
-    {
-      value: 'italic',
-      utilityClass: 'text-italic',
-    },
-  ],
-  'text-transform': [
-    {
-      value: 'uppercase',
-      utilityClass: 'text-uppercase',
-    },
-  ],
-  'text-decoration': [
-    {
-      value: 'underline',
-      utilityClass: 'text-underline',
-    },
-    {
-      value: 'none',
-      utilityClass: 'no-underline',
-    },
-  ],
-  'white-space': [
-    {
-      value: 'nowrap',
-      utilityClass: 'no-wrap',
-    },
-    {
-      value: 'normal',
-      utilityClass: 'ws-normal',
-    },
-  ],
-  'word-break': [
-    {
-      value: 'break-all',
-      utilityClass: 'wb-break-all',
-    },
-  ],
-  width: [
-    {
-      value: '100%',
-      utilityClass: 'width-full',
-    },
-    {
-      value: 'auto%',
-      utilityClass: 'width-auto',
-    },
-  ],
-  overflow: [
-    {
-      value: 'visible',
-      utilityClass: 'overflow-visible',
-    },
-    {
-      value: 'hidden',
-      utilityClass: 'overflow-hidden',
-    },
-    {
-      value: 'auto',
-      utilityClass: 'overflow-auto',
-    },
-    {
-      value: 'scroll',
-      utilityClass: 'overflow-scroll',
-    },
-  ],
-  'overflow-x': [
-    {
-      value: 'visible',
-      utilityClass: 'overflow-x-visible',
-    },
-    {
-      value: 'hidden',
-      utilityClass: 'overflow-x-hidden',
-    },
-    {
-      value: 'auto',
-      utilityClass: 'overflow-x-auto',
-    },
-    {
-      value: 'scroll',
-      utilityClass: 'overflow-x-scroll',
-    },
-  ],
-  'overflow-y': [
-    {
-      value: 'visible',
-      utilityClass: 'overflow-y-visible',
-    },
-    {
-      value: 'hidden',
-      utilityClass: 'overflow-y-hidden',
-    },
-    {
-      value: 'auto',
-      utilityClass: 'overflow-y-auto',
-    },
-    {
-      value: 'scroll',
-      utilityClass: 'overflow-y-scroll',
-    },
-  ],
-  height: [
-    {
-      value: '100%',
-      utilityClass: 'height-full',
-    },
-  ],
-  'max-width': [
-    {
-      value: '100%',
-      utilityClass: 'width-fit',
-    },
-  ],
-  'max-height': [
-    {
-      value: '100%',
-      utilityClass: 'height-fit',
-    },
-  ],
-  'min-width': [
-    {
-      value: '0',
-      utilityClass: 'min-width-0',
-    },
-  ],
-  float: [
-    {
-      value: 'left',
-      utilityClass: 'float-left',
-    },
-    {
-      value: 'right',
-      utilityClass: 'float-right',
-    },
-    {
-      value: 'none',
-      utilityClass: 'float-none',
-    },
-  ],
-  'list-style': [
-    {
-      value: 'none',
-      utilityClass: 'list-style-none',
-    },
-  ],
-  'user-select': [
-    {
-      value: 'none',
-      utilityClass: 'user-select-none',
-    },
-  ],
-  visibility: [
-    {
-      value: 'hidden',
-      utilityClass: 'v-hidden',
-    },
-    {
-      value: 'visible',
-      utilityClass: 'v-visible',
-    },
-  ],
-  'vertical-align': [
-    {
-      value: 'middle',
-      utilityClass: 'v-align-middle',
-    },
-    {
-      value: 'top',
-      utilityClass: 'v-align-top',
-    },
-    {
-      value: 'bottom',
-      utilityClass: 'v-align-bottom',
-    },
-    {
-      value: 'text-top',
-      utilityClass: 'v-align-text-top',
-    },
-    {
-      value: 'text-bottom',
-      utilityClass: 'v-align-text-bottom',
-    },
-    {
-      value: 'text-baseline',
-      utilityClass: 'v-align-baseline',
-    },
-  ],
-  'font-weight': [
-    {
-      value: '$font-weight-normal',
-      utilityClass: 'text-normal',
-    },
-    {
-      value: '$font-weight-bold',
-      utilityClass: 'text-bold',
-    },
-    {
-      value: '$font-weight-semibold',
-      utilityClass: 'text-semibold',
-    },
-    {
-      value: '$font-weight-light',
-      utilityClass: 'text-light',
-    },
-  ],
-  top: [
-    {
-      value: '0',
-      utilityClass: 'top-0',
-    },
-    {
-      value: 'auto',
-      utilityClass: 'top-auto',
-    },
-  ],
-  right: [
-    {
-      value: '0',
-      utilityClass: 'right-0',
-    },
-    {
-      value: 'auto',
-      utilityClass: 'right-auto',
-    },
-  ],
-  bottom: [
-    {
-      value: '0',
-      utilityClass: 'bottom-0',
-    },
-    {
-      value: 'auto',
-      utilityClass: 'bottom-auto',
-    },
-  ],
-  left: [
-    {
-      value: '0',
-      utilityClass: 'left-0',
-    },
-    {
-      value: 'auto',
-      utilityClass: 'left-auto',
-    },
-  ],
-  position: [
-    {
-      value: 'static',
-      utilityClass: 'position-static',
-    },
-    {
-      value: 'relative',
-      utilityClass: 'position-relative',
-    },
-    {
-      value: 'absolute',
-      utilityClass: 'position-absolute',
-    },
-    {
-      value: 'fixed',
-      utilityClass: 'position-fixed',
-    },
-    {
-      value: 'sticky',
-      utilityClass: 'position-sticky',
-    },
-  ],
-  'box-shadow': [
-    {
-      value: 'none',
-      utilityClass: 'box-shadow-none',
-    },
-    {
-      value: 'var(--color-shadow-small)',
-      utilityClass: 'box-shadow-small',
-    },
-    {
-      value: 'var(--color-shadow-medium)',
-      utilityClass: 'box-shadow-medium',
-    },
-    {
-      value: 'var(--color-shadow-large)',
-      utilityClass: 'box-shadow-large',
-    },
-    {
-      value: 'var(--color-shadow-extra-large)',
-      utilityClass: 'box-shadow-extra-large',
-    },
-  ],
-  border: [
-    {
-      value: '$border',
-      utilityClass: 'border',
-    },
-    {
-      value: '0',
-      utilityClass: 'border-0',
-    },
-  ],
-  'border-top': [
-    {
-      value: '$border',
-      utilityClass: 'border-top',
-    },
-    {
-      value: '0',
-      utilityClass: 'border-top-0',
-    },
-  ],
-  'border-right': [
-    {
-      value: '$border',
-      utilityClass: 'border-right',
-    },
-    {
-      value: '0',
-      utilityClass: 'border-right-0',
-    },
-  ],
-  'border-bottom': [
-    {
-      value: '$border',
-      utilityClass: 'border-bottom',
-    },
-    {
-      value: '0',
-      utilityClass: 'border-bottom-0',
-    },
-  ],
-  'border-left': [
-    {
-      value: '$border',
-      utilityClass: 'border-left',
-    },
-    {
-      value: '0',
-      utilityClass: 'border-left-0',
-    },
-  ],
-};
-
-const ruleName$1 = 'primer/utilities';
-
-const messages$1 = stylelint.utils.ruleMessages(ruleName$1, {
-  rejected: (selector, utilityClass) => {
-    return `Consider using the Primer utility '.${utilityClass}' instead of the selector '${selector}' in your html. https://primer.style/css/utilities`
-  },
-});
-
-// eslint-disable-next-line no-unused-vars
-var utilities = stylelint.createPlugin(ruleName$1, (enabled, options = {}, context) => {
-  if (!enabled) {
-    return noop$1
-  }
-
-  const utilityReplacement = (declaration, value) => {
-    const declarationUtilities = utilities$1[declaration];
-    if (declarationUtilities) {
-      return declarationUtilities.find(utility => {
-        return utility.value === value
-      })
-    }
-  };
-
-  const lintResult = (root, result) => {
-    root.walkRules(rule => {
-      if (!/^\.[\w\-_]+$/.exec(rule.selector)) {
-        return
-      }
-      const decls = rule.nodes.filter(decl => decl.type === 'decl');
-
-      if (decls.length === 1) {
-        const replacement = utilityReplacement(decls[0].prop, decls[0].value);
-        if (replacement) {
-          stylelint.utils.report({
-            index: rule.sourceIndex,
-            message: messages$1.rejected(rule.selector, replacement.utilityClass),
-            node: rule,
-            result,
-            ruleName: ruleName$1,
-          });
-        }
-      }
-    });
-  };
-
-  return lintResult
-});
-
-function noop$1() {}
-
 const ruleName = 'primer/no-display-colors';
 const messages = stylelint.utils.ruleMessages(ruleName, {
   rejected: varName => `${varName} is in alpha and should be used with caution with approval from the Primer team`,
@@ -1545,7 +971,6 @@ var index = {
     responsiveWidths,
     spacing,
     typography,
-    utilities,
     noDisplayColors,
   ],
   rules: {
@@ -1613,7 +1038,6 @@ var index = {
     'primer/responsive-widths': true,
     'primer/spacing': true,
     'primer/typography': true,
-    'primer/utilities': null,
     'primer/no-display-colors': true,
     'property-no-unknown': [
       true,
@@ -1668,7 +1092,6 @@ var index = {
         'primer/borders': null,
         'primer/typography': null,
         'primer/box-shadow': null,
-        'primer/utilities': null,
       },
     },
     {
@@ -1723,7 +1146,6 @@ var index = {
         'primer/borders': null,
         'primer/typography': null,
         'primer/box-shadow': null,
-        'primer/utilities': null,
       },
     },
   ],