@primer/stylelint-config 13.0.0-rc.6ef7302 → 13.0.0-rc.77d8c5f

package/plugins/lib/primer-utilities.js

@@ -1,526 +0,0 @@
-// Meant as temp until we can move to primitives or css
-const colorTypes = ['accent', 'success', 'attention', 'severe', 'danger', 'open', 'closed', 'done', 'sponsors']
-
-export default {
-  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',
-    },
-  ],
-}

package/plugins/new-color-vars-have-fallback.js

@@ -1,35 +0,0 @@
-import stylelint from 'stylelint'
-import variables from './lib/new-color-css-vars-map.json' with {type: 'json'}
-
-export const ruleName = 'primer/new-color-vars-have-fallback'
-export const messages = stylelint.utils.ruleMessages(ruleName, {
-  expectedFallback: variable =>
-    `Expected a fallback value for CSS variable ${variable}. New color variables fallbacks, check primer.style/primitives to find the correct value`,
-})
-
-export default stylelint.createPlugin(ruleName, enabled => {
-  if (!enabled) {
-    return noop
-  }
-
-  return (root, result) => {
-    root.walkDecls(node => {
-      for (const variable of variables) {
-        if (node.value.includes(`var(${variable})`)) {
-          // Check if the declaration uses a CSS variable from the JSON
-          const match = node.value.match(new RegExp(`var\\(${variable},(.*)\\)`))
-          if (!match || match[1].trim() === '') {
-            stylelint.utils.report({
-              ruleName,
-              result,
-              node,
-              message: messages.expectedFallback(variable),
-            })
-          }
-        }
-      }
-    })
-  }
-})
-
-function noop() {}

package/plugins/no-deprecated-colors.js

@@ -1,97 +0,0 @@
-import stylelint from 'stylelint'
-import matchAll from 'string.prototype.matchall'
-import variableChecks from './lib/primitives-v8.json' with {type: 'json'}
-export const ruleName = 'primer/no-deprecated-colors'
-export const messages = stylelint.utils.ruleMessages(ruleName, {
-  rejected: (varName, replacement, property) => {
-    if (replacement === null) {
-      return `Variable ${varName} is deprecated for property ${property}. Please consult the primer color docs for a replacement. https://primer.style/primitives/storybook/?path=/story/migration-tables`
-    }
-
-    return `Variable ${varName} is deprecated for property ${property}. Please use the replacement ${replacement}.`
-  },
-})
-
-// Match CSS variable references (e.g var(--color-text-primary))
-// eslint-disable-next-line no-useless-escape
-const variableReferenceRegex = /var\(([^\),]+)(,.*)?\)/g
-
-const replacedVars = {}
-const newVars = {}
-
-export default stylelint.createPlugin(ruleName, (enabled, options = {}, context) => {
-  const {inlineFallback = false} = options
-
-  if (!enabled) {
-    return noop
-  }
-
-  const {verbose = false} = options
-  // eslint-disable-next-line no-console
-  const log = verbose ? (...args) => console.warn(...args) : noop
-
-  // Keep track of declarations we've already seen
-  const seen = new WeakMap()
-
-  const lintResult = (root, result) => {
-    // Walk all declarations
-    root.walk(node => {
-      if (seen.has(node)) {
-        return
-      } else {
-        seen.set(node, true)
-      }
-
-      // walk these nodes
-      if (node.type !== 'decl') {
-        return
-      }
-
-      for (const [, variableName] of matchAll(node.value, variableReferenceRegex)) {
-        if (variableName in variableChecks) {
-          let replacement = variableChecks[variableName]
-          if (typeof replacement === 'object') {
-            if (node.prop) {
-              for (const prop of replacement) {
-                // Check if node.prop starts with one of the props array elements
-                if (prop['props'].some(p => node.prop.startsWith(p))) {
-                  replacement = prop['replacement']
-                  break
-                }
-              }
-            }
-            if (typeof replacement === 'object') {
-              replacement = null
-            }
-          }
-
-          if (context.fix && replacement !== null) {
-            replacement = `${replacement}${inlineFallback ? `, var(${variableName})` : ''}`
-            replacedVars[variableName] = true
-            newVars[replacement] = true
-            if (node.type === 'atrule') {
-              node.params = node.params.replace(variableName, replacement)
-            } else {
-              node.value = node.value.replace(variableName, replacement)
-            }
-            continue
-          }
-
-          stylelint.utils.report({
-            message: messages.rejected(variableName, replacement, node.prop),
-            node,
-            ruleName,
-            result,
-          })
-        }
-      }
-    })
-  }
-
-  log(
-    `${Object.keys(replacedVars).length} deprecated variables replaced with ${Object.keys(newVars).length} variables.`,
-  )
-  return lintResult
-})
-
-function noop() {}