eslint-plugin-primer-react 4.0.3 → 4.0.4-rc.5058fcb

package/src/rules/a11y-tooltip-interactive-trigger.js

@@ -7,7 +7,7 @@ const isInteractive = child => {
   const childName = getJSXOpeningElementName(child.openingElement)
   return (
     ['button', 'summary', 'select', 'textarea', 'a', 'input', 'link', 'iconbutton', 'textinput'].includes(
-      childName.toLowerCase()
+      childName.toLowerCase(),
     ) && !hasDisabledAttr(child)
   )
 }
@@ -22,10 +22,9 @@ const isAnchorTag = el => {
   return openingEl === 'a' || openingEl.toLowerCase() === 'link'
 }
 
-const isJSXValue = (attributes) => {
-  const node = attributes.find(attribute => propName(attribute) === 'href');
-  const isJSXExpression = node.value.type === 'JSXExpressionContainer' && node 
-    && typeof getPropValue(node) === 'string';
+const isJSXValue = attributes => {
+  const node = attributes.find(attribute => propName(attribute) === 'href')
+  const isJSXExpression = node.value.type === 'JSXExpressionContainer' && node && typeof getPropValue(node) === 'string'
 
   return isJSXExpression
 }
@@ -34,8 +33,8 @@ const isInteractiveAnchor = child => {
   const hasHref = getJSXOpeningElementAttribute(child.openingElement, 'href')
   if (!hasHref) return false
   const href = getJSXOpeningElementAttribute(child.openingElement, 'href').value.value
-  const hasJSXValue = isJSXValue(child.openingElement.attributes);
-  const isAnchorInteractive = (typeof href === 'string' && href !== '' || hasJSXValue)
+  const hasJSXValue = isJSXValue(child.openingElement.attributes)
+  const isAnchorInteractive = (typeof href === 'string' && href !== '') || hasJSXValue
 
   return isAnchorInteractive
 }
@@ -73,18 +72,18 @@ const checks = [
   {
     id: 'nonInteractiveLink',
     filter: jsxElement => isAnchorTag(jsxElement),
-    check: isInteractiveAnchor
+    check: isInteractiveAnchor,
   },
   {
     id: 'nonInteractiveInput',
     filter: jsxElement => isInputTag(jsxElement),
-    check: isInteractiveInput
+    check: isInteractiveInput,
   },
   {
     id: 'nonInteractiveTrigger',
     filter: jsxElement => isOtherThanAnchorOrInput(jsxElement),
-    check: isInteractive
-  }
+    check: isInteractive,
+  },
 ]
 
 const checkTriggerElement = jsxNode => {
@@ -137,10 +136,10 @@ module.exports = {
       {
         properties: {
           skipImportCheck: {
-            type: 'boolean'
-          }
-        }
-      }
+            type: 'boolean',
+          },
+        },
+      },
     ],
     messages: {
       nonInteractiveTrigger:
@@ -149,8 +148,8 @@ module.exports = {
         'Anchor tags without an href attribute are not interactive, therefore they cannot be used as a trigger for a tooltip. Please add an href attribute or use an alternative interactive element instead',
       nonInteractiveInput:
         'Hidden or disabled inputs are not interactive and cannot be used as a trigger for a tooltip. Please use an alternate input type or use a different interactive element instead',
-      singleChild: 'The `Tooltip` component expects a single React element as a child.'
-    }
+      singleChild: 'The `Tooltip` component expects a single React element as a child.',
+    },
   },
   create(context) {
     return {
@@ -166,23 +165,23 @@ module.exports = {
           if (jsxNode.children.filter(child => child.type === 'JSXElement').length > 1) {
             context.report({
               node: jsxNode,
-              messageId: 'singleChild'
+              messageId: 'singleChild',
             })
           } else {
             // Check if the child is interactive
             const errors = checkTriggerElement(jsxNode)
 
             if (errors) {
-              for (const [key, value] of errors.entries()) {
+              for (const [_key, value] of errors.entries()) {
                 context.report({
                   node: jsxNode,
-                  messageId: value
+                  messageId: value,
                 })
               }
             }
           }
         }
-      }
+      },
     }
-  }
+  },
 }

package/src/rules/direct-slot-children.js

@@ -13,7 +13,7 @@ const slotParentToChildMap = {
   RadioGroup: ['RadioGroup.Label', 'RadioGroup.Caption', 'RadioGroup.Validation'],
   CheckboxGroup: ['CheckboxGroup.Label', 'CheckboxGroup.Caption', 'CheckboxGroup.Validation'],
   MarkdownEditor: ['MarkdownEditor.Toolbar', 'MarkdownEditor.Actions', 'MarkdownEditor.Label'],
-  'MarkdownEditor.Footer': ['MarkdownEditor.Actions', 'MarkdownEditor.FooterButton']
+  'MarkdownEditor.Footer': ['MarkdownEditor.Actions', 'MarkdownEditor.FooterButton'],
 }
 
 const slotChildToParentMap = Object.entries(slotParentToChildMap).reduce((acc, [parent, children]) => {
@@ -34,14 +34,14 @@ module.exports = {
       {
         properties: {
           skipImportCheck: {
-            type: 'boolean'
-          }
-        }
-      }
+            type: 'boolean',
+          },
+        },
+      },
     ],
     messages: {
-      directSlotChildren: '{{childName}} must be a direct child of {{parentName}}.'
-    }
+      directSlotChildren: '{{childName}} must be a direct child of {{parentName}}.',
+    },
   },
   create(context) {
     const stack = []
@@ -67,8 +67,8 @@ module.exports = {
               messageId: 'directSlotChildren',
               data: {
                 childName: name,
-                parentName: expectedParentNames.length > 1 ? expectedParentNames.join(' or ') : expectedParentNames[0]
-              }
+                parentName: expectedParentNames.length > 1 ? expectedParentNames.join(' or ') : expectedParentNames[0],
+              },
             })
           }
         }
@@ -81,7 +81,7 @@ module.exports = {
       JSXClosingElement() {
         // Pop the current element off the stack
         stack.pop()
-      }
+      },
     }
-  }
+  },
 }

package/src/rules/new-color-css-vars-have-fallback.js

@@ -0,0 +1,87 @@
+const cssVars = require('../utils/new-color-css-vars-map')
+
+const reportError = (propertyName, valueNode, context) => {
+  // performance optimisation: exit early
+  if (valueNode.type !== 'Literal' && valueNode.type !== 'TemplateElement') return
+  // get property value
+  const value = valueNode.type === 'Literal' ? valueNode.value : valueNode.value.cooked
+  // return if value is not a string
+  if (typeof value !== 'string') return
+  // return if value does not include variable
+  if (!value.includes('var(')) return
+
+  const varRegex = /var\([^(),)]+\)/g
+
+  const match = value.match(varRegex)
+  // return if no matches
+  if (!match) return
+  const vars = match.flatMap(match =>
+    match
+      .slice(4, -1)
+      .trim()
+      .split(/\s*,\s*/g),
+  )
+  for (const cssVar of vars) {
+    // return if no repalcement exists
+    if (!cssVars?.includes(cssVar)) return
+    // report the error
+    context.report({
+      node: valueNode,
+      message: `Expected a fallback value for CSS variable ${cssVar}. New color variables fallbacks, check primer.style/primitives to find the correct value.`,
+    })
+  }
+}
+
+const reportOnObject = (node, context) => {
+  const propertyName = node.key.name
+  if (node.value?.type === 'Literal') {
+    reportError(propertyName, node.value, context)
+  } else if (node.value?.type === 'ConditionalExpression') {
+    reportError(propertyName, node.value.consequent, context)
+    reportError(propertyName, node.value.alternate, context)
+  }
+}
+
+const reportOnProperty = (node, context) => {
+  const propertyName = node.name.name
+  if (node.value?.type === 'Literal') {
+    reportError(propertyName, node.value, context)
+  } else if (node.value?.type === 'JSXExpressionContainer' && node.value.expression?.type === 'ConditionalExpression') {
+    reportError(propertyName, node.value.expression.consequent, context)
+    reportError(propertyName, node.value.expression.alternate, context)
+  }
+}
+
+const reportOnValue = (node, context) => {
+  if (node?.type === 'Literal') {
+    reportError(undefined, node, context)
+  } else if (node?.type === 'JSXExpressionContainer' && node.expression?.type === 'ConditionalExpression') {
+    reportError(undefined, node.value.expression.consequent, context)
+    reportError(undefined, node.value.expression.alternate, context)
+  }
+}
+
+const reportOnTemplateElement = (node, context) => {
+  reportError(undefined, node, context)
+}
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+  },
+  /** @param {import('eslint').Rule.RuleContext} context */
+  create(context) {
+    return {
+      // sx OR style property on elements
+      ['JSXAttribute:matches([name.name=sx], [name.name=style]) ObjectExpression Property']: node =>
+        reportOnObject(node, context),
+      // property on element like stroke or fill
+      ['JSXAttribute[name.name!=sx][name.name!=style]']: node => reportOnProperty(node, context),
+      // variable that is a value
+      [':matches(VariableDeclarator, ReturnStatement) > Literal']: node => reportOnValue(node, context),
+      // variable that is a value
+      [':matches(VariableDeclarator, ReturnStatement) > TemplateElement']: node =>
+        reportOnTemplateElement(node, context),
+    }
+  },
+}

package/src/rules/new-color-css-vars.js

@@ -1,106 +1,120 @@
 const cssVars = require('../utils/css-variable-map.json')
 
+const reportError = (propertyName, valueNode, context, suggestFix = true) => {
+  // performance optimisation: exit early
+  if (valueNode.type !== 'Literal' && valueNode.type !== 'TemplateElement') return
+  // get property value
+  const value = valueNode.type === 'Literal' ? valueNode.value : valueNode.value.cooked
+  // return if value is not a string
+  if (typeof value !== 'string') return
+  // return if value does not include variable
+  if (!value.includes('var(')) return
+
+  const varRegex = /var\([^)]+\)/g
+
+  const match = value.match(varRegex)
+  if (!match) return
+  const vars = match.flatMap(match =>
+    match
+      .slice(4, -1)
+      .trim()
+      .split(/\s*,\s*/g),
+  )
+
+  for (const cssVar of vars) {
+    // get the array of objects for the variable name (e.g. --color-fg-primary)
+    const cssVarObjects = cssVars[cssVar]
+    // get the object that contains the property name or the first one (default)
+    const varObjectForProp = propertyName
+      ? cssVarObjects?.find(prop => prop.props.includes(propertyName))
+      : cssVarObjects?.[0]
+    // return if no replacement exists
+    if (!varObjectForProp?.replacement) return
+    // report the error
+    context.report({
+      node: valueNode,
+      message: `Replace var(${cssVar}) with var(${varObjectForProp.replacement}, var(${cssVar}))`,
+      fix: suggestFix
+        ? fixer => {
+            const fixedString = value.replaceAll(cssVar, `${varObjectForProp.replacement}, var(${cssVar})`)
+            return fixer.replaceText(valueNode, valueNode.type === 'Literal' ? `'${fixedString}'` : fixedString)
+          }
+        : undefined,
+    })
+  }
+}
+
+const reportOnObject = (node, context) => {
+  const propertyName = node.key.name
+  if (node.value?.type === 'Literal') {
+    reportError(propertyName, node.value, context)
+  } else if (node.value?.type === 'ConditionalExpression') {
+    reportError(propertyName, node.value.consequent, context)
+    reportError(propertyName, node.value.alternate, context)
+  }
+}
+
+const reportOnProperty = (node, context) => {
+  const propertyName = node.name.name
+  if (node.value?.type === 'Literal') {
+    reportError(propertyName, node.value, context)
+  } else if (node.value?.type === 'JSXExpressionContainer' && node.value.expression?.type === 'ConditionalExpression') {
+    reportError(propertyName, node.value.expression.consequent, context)
+    reportError(propertyName, node.value.expression.alternate, context)
+  }
+}
+
+const reportOnValue = (node, context) => {
+  if (node?.type === 'Literal') {
+    reportError(undefined, node, context)
+  } else if (node?.type === 'JSXExpressionContainer' && node.expression?.type === 'ConditionalExpression') {
+    reportError(undefined, node.value.expression.consequent, context)
+    reportError(undefined, node.value.expression.alternate, context)
+  }
+}
+
+const reportOnTemplateElement = (node, context) => {
+  reportError(undefined, node, context, false)
+}
+
 module.exports = {
   meta: {
     type: 'suggestion',
     hasSuggestions: true,
     fixable: 'code',
     docs: {
-      description: 'Upgrade legacy CSS variables to Primitives v8 in sx prop'
+      description: 'Upgrade legacy CSS variables to Primitives v8 in sx prop',
     },
     schema: [
       {
         type: 'object',
         properties: {
           skipImportCheck: {
-            type: 'boolean'
+            type: 'boolean',
           },
           checkAllStrings: {
-            type: 'boolean'
-          }
+            type: 'boolean',
+          },
         },
-        additionalProperties: false
-      }
-    ]
+        additionalProperties: false,
+      },
+    ],
   },
   /** @param {import('eslint').Rule.RuleContext} context */
   create(context) {
-    const styledSystemProps = [
-      'bg',
-      'backgroundColor',
-      'color',
-      'borderColor',
-      'borderTopColor',
-      'borderRightColor',
-      'borderBottomColor',
-      'borderLeftColor',
-      'border',
-      'boxShadow',
-      'caretColor'
-    ]
-
     return {
-      /** @param {import('eslint').Rule.Node} node */
-      JSXAttribute(node) {
-        if (node.name.name === 'sx') {
-          if (node.value.expression.type === 'ObjectExpression') {
-            // example: sx={{ color: 'fg.default' }} or sx={{ ':hover': {color: 'fg.default'} }}
-            const rawText = context.sourceCode.getText(node.value)
-            checkForVariables(node.value, rawText)
-          } else if (node.value.expression.type === 'Identifier') {
-            // example: sx={baseStyles}
-            const variableScope = context.sourceCode.getScope(node.value.expression)
-            const variable = variableScope.set.get(node.value.expression.name)
-
-            // if variable is not defined in scope, give up (could be imported from different file)
-            if (!variable) return
-
-            const variableDeclarator = variable.identifiers[0].parent
-            const rawText = context.sourceCode.getText(variableDeclarator)
-            checkForVariables(variableDeclarator, rawText)
-          } else {
-            // worth a try!
-            const rawText = context.sourceCode.getText(node.value)
-            checkForVariables(node.value, rawText)
-          }
-        } else if (
-          styledSystemProps.includes(node.name.name) &&
-          node.value &&
-          node.value.type === 'Literal' &&
-          typeof node.value.value === 'string'
-        ) {
-          checkForVariables(node.value, node.value.value)
-        }
-      }
+      // sx OR style property on elements
+      ['JSXAttribute:matches([name.name=sx], [name.name=style]) ObjectExpression Property']: node =>
+        reportOnObject(node, context),
+      // variable that is an object
+      [':matches(VariableDeclarator, ReturnStatement, ConditionalExpression, ArrowFunctionExpression, CallExpression) > ObjectExpression Property, :matches(VariableDeclarator, ReturnStatement, ConditionalExpression, ArrowFunctionExpression, CallExpression) > ObjectExpression Property > ObjectExpression Property']:
+        node => reportOnObject(node, context),
+      // property on element like stroke or fill
+      ['JSXAttribute[name.name!=sx][name.name!=style]']: node => reportOnProperty(node, context),
+      // variable that is a value
+      [':matches(VariableDeclarator, ReturnStatement) > Literal']: node => reportOnValue(node, context),
+      // variable that is a value
+      ['VariableDeclarator TemplateElement']: node => reportOnTemplateElement(node, context),
     }
-
-    function checkForVariables(node, rawText) {
-      // performance optimisation: exit early
-      if (!rawText.includes('var')) return
-
-      Object.keys(cssVars).forEach(cssVar => {
-        if (Array.isArray(cssVars[cssVar])) {
-          cssVars[cssVar].forEach(cssVarObject => {
-            const regex = new RegExp(`var\\(${cssVar}\\)`, 'g')
-            if (
-              cssVarObject.props.some(prop => rawText.includes(prop)) &&
-              regex.test(rawText) &&
-              !rawText.includes(cssVarObject.replacement)
-            ) {
-              const fixedString = rawText.replace(regex, `var(${cssVarObject.replacement}, var(${cssVar}))`)
-              if (!rawText.includes(fixedString)) {
-                context.report({
-                  node,
-                  message: `Replace var(${cssVar}) with var(${cssVarObject.replacement}, var(${cssVar}))`,
-                  fix: function(fixer) {
-                    return fixer.replaceText(node, node.type === 'Literal' ? `"${fixedString}"` : fixedString)
-                  }
-                })
-              }
-            }
-          })
-        }
-      })
-    }
-  }
+  },
 }

package/src/rules/no-deprecated-colors.js

@@ -17,15 +17,15 @@ module.exports = {
         type: 'object',
         properties: {
           skipImportCheck: {
-            type: 'boolean'
+            type: 'boolean',
           },
           checkAllStrings: {
-            type: 'boolean'
-          }
+            type: 'boolean',
+          },
         },
-        additionalProperties: false
-      }
-    ]
+        additionalProperties: false,
+      },
+    ],
   },
   create(context) {
     // If `skipImportCheck` is true, this rule will check for deprecated colors
@@ -89,7 +89,7 @@ module.exports = {
                         path.node,
                         name,
                         str => [param, key, str].join('.'),
-                        str => str
+                        str => str,
                       )
                     }
 
@@ -132,9 +132,9 @@ module.exports = {
         if (['colors', 'shadows'].includes(key) && Object.keys(deprecations).includes(name)) {
           replaceDeprecatedColor(context, argument, name, str => [key, str].join('.'))
         }
-      }
+      },
     }
-  }
+  },
 }
 
 function isThemeGet(identifier, scope, skipImportCheck = false) {
@@ -156,7 +156,7 @@ function replaceDeprecatedColor(
   node,
   deprecatedName,
   transformName = str => str,
-  transformReplacementValue = str => JSON.stringify(str)
+  transformReplacementValue = str => JSON.stringify(str),
 ) {
   const replacement = deprecations[deprecatedName]
 
@@ -165,8 +165,8 @@ function replaceDeprecatedColor(
     context.report({
       node,
       message: `"${transformName(
-        deprecatedName
-      )}" is deprecated. Go to https://primer.style/primitives or reach out in the #primer channel on Slack to find a suitable replacement.`
+        deprecatedName,
+      )}" is deprecated. Go to https://primer.style/primitives or reach out in the #primer channel on Slack to find a suitable replacement.`,
     })
   } else if (Array.isArray(replacement)) {
     // Multiple possible replacements
@@ -177,8 +177,8 @@ function replaceDeprecatedColor(
         desc: `Use "${transformName(replacementValue)}" instead.`,
         fix(fixer) {
           return fixer.replaceText(node, transformReplacementValue(transformName(replacementValue)))
-        }
-      }))
+        },
+      })),
     })
   } else {
     // One replacement
@@ -187,7 +187,7 @@ function replaceDeprecatedColor(
       message: `"${transformName(deprecatedName)}" is deprecated. Use "${transformName(replacement)}" instead.`,
       fix(fixer) {
         return fixer.replaceText(node, transformReplacementValue(transformName(replacement)))
-      }
+      },
     })
   }
 }

package/src/rules/no-system-props.js

@@ -5,7 +5,7 @@ const {some, last} = require('lodash')
 
 // Components for which we allow all styled system props
 const alwaysExcludedComponents = new Set([
-  'BaseStyles' // BaseStyles will be deprecated eventually
+  'BaseStyles', // BaseStyles will be deprecated eventually
 ])
 
 // Excluded by default, but optionally included:
@@ -40,7 +40,7 @@ const excludedComponentProps = new Map([
   ['PageLayout.Pane', new Set(['padding', 'position', 'width'])],
   ['PageLayout.Content', new Set(['padding', 'width'])],
   ['ProgressBar', new Set(['bg'])],
-  ['PointerBox', new Set(['bg'])]
+  ['PointerBox', new Set(['bg'])],
 ])
 
 const alwaysExcludedProps = new Set(['variant', 'size'])
@@ -53,17 +53,17 @@ module.exports = {
       {
         properties: {
           skipImportCheck: {
-            type: 'boolean'
+            type: 'boolean',
           },
           includeUtilityComponents: {
-            type: 'boolean'
-          }
-        }
-      }
+            type: 'boolean',
+          },
+        },
+      },
     ],
     messages: {
-      noSystemProps: 'Styled-system props are deprecated ({{ componentName }} called with props: {{ propNames }})'
-    }
+      noSystemProps: 'Styled-system props are deprecated ({{ componentName }} called with props: {{ propNames }})',
+    },
   },
   create(context) {
     // If `skipImportCheck` is true, this rule will check for deprecated styled system props
@@ -74,7 +74,7 @@ module.exports = {
 
     const excludedComponents = new Set([
       ...alwaysExcludedComponents,
-      ...(includeUtilityComponents ? [] : utilityComponents)
+      ...(includeUtilityComponents ? [] : utilityComponents),
     ])
 
     return {
@@ -113,11 +113,11 @@ module.exports = {
             messageId: 'noSystemProps',
             data: {
               componentName,
-              propNames: systemProps.map(a => a.name.name).join(', ')
+              propNames: systemProps.map(a => a.name.name).join(', '),
             },
             fix(fixer) {
               const existingSxProp = jsxNode.attributes.find(
-                attribute => attribute.type === 'JSXAttribute' && attribute.name.name === 'sx'
+                attribute => attribute.type === 'JSXAttribute' && attribute.name.name === 'sx',
               )
               const systemPropstylesMap = stylesMapFromPropNodes(systemProps, context)
               if (existingSxProp && existingSxProp.value.expression.type !== 'ObjectExpression') {
@@ -137,19 +137,19 @@ module.exports = {
                         ? // Update an existing sx prop
                           fixer.insertTextAfter(
                             last(existingSxProp.value.expression.properties),
-                            `, ${objectEntriesStringFromStylesMap(stylesToAdd)}`
+                            `, ${objectEntriesStringFromStylesMap(stylesToAdd)}`,
                           )
                         : // Insert new sx prop
-                          fixer.insertTextAfter(last(jsxNode.attributes), sxPropTextFromStylesMap(systemPropstylesMap))
+                          fixer.insertTextAfter(last(jsxNode.attributes), sxPropTextFromStylesMap(systemPropstylesMap)),
                     ]
-                  : [])
+                  : []),
               ]
-            }
+            },
           })
         }
-      }
+      },
     }
-  }
+  },
 }
 
 const sxPropTextFromStylesMap = styles => {
@@ -165,8 +165,8 @@ const stylesMapFromPropNodes = (systemProps, context) => {
   return new Map(
     systemProps.map(a => [
       a.name.name,
-      a.value === null ? 'true' : a.value.raw || context.getSourceCode().getText(a.value.expression)
-    ])
+      a.value === null ? 'true' : a.value.raw || context.getSourceCode().getText(a.value.expression),
+    ]),
   )
 }
 
@@ -183,6 +183,6 @@ const excludeSxEntriesFromStyleMap = (stylesMap, sxProp) => {
   return new Map(
     [...stylesMap].filter(([key]) => {
       return !some(sxProp.value.expression.properties, p => p.type === 'Property' && p.key.name === key)
-    })
+    }),
   )
 }

package/src/url.js

@@ -7,4 +7,4 @@ module.exports = ({id}) => {
   url.hash = ''
   url.pathname += `/blob/v${version}/docs/rules/${rule}.md`
   return url.toString()
-}
+}