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

package/package.json

@@ -1,11 +1,15 @@
 {
   "name": "eslint-plugin-primer-react",
-  "version": "4.0.3",
+  "version": "4.0.4-rc.5058fcb",
   "description": "ESLint rules for Primer React",
   "main": "src/index.js",
   "scripts": {
-    "test": "jest",
-    "release": "changeset publish"
+    "format": "prettier --cache --write '**/*.{js,css,md,mdx,ts,tsx,yml}'",
+    "format:check": "prettier --cache --list-different '**/*.{js,css,md,mdx,ts,tsx,yml}'",
+    "lint": "eslint .",
+    "lint:md": "markdownlint-cli2 \"**/*.{md,mdx}\" \"!.github\" \"!.changeset\" \"!node_modules\" \"!CHANGELOG.md\"",
+    "release": "changeset publish",
+    "test": "jest"
   },
   "repository": {
     "type": "git",
@@ -20,25 +24,29 @@
     "url": "https://github.com/primer/eslint-plugin-primer-react/issues"
   },
   "homepage": "https://github.com/primer/eslint-plugin-primer-react#readme",
-  "devDependencies": {
-    "@changesets/changelog-github": "^0.4.0",
-    "@changesets/cli": "^2.16.0",
-    "@github/prettier-config": "0.0.4",
-    "@primer/primitives": "^7.14.0",
-    "eslint": "^8.42.0",
-    "jest": "^27.0.6"
-  },
   "peerDependencies": {
     "@primer/primitives": ">=4.6.2",
     "eslint": "^8.42.0"
   },
-  "prettier": "@github/prettier-config",
   "dependencies": {
     "@styled-system/props": "^5.1.5",
-    "eslint-plugin-github": "^4.9.2",
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-traverse": "^1.0.0",
     "lodash": "^4.17.21",
     "styled-system": "^5.1.5"
-  }
+  },
+  "devDependencies": {
+    "@changesets/changelog-github": "^0.4.0",
+    "@changesets/cli": "^2.16.0",
+    "@github/markdownlint-github": "^0.6.0",
+    "@github/prettier-config": "0.0.6",
+    "@primer/primitives": "^7.14.0",
+    "eslint": "^8.42.0",
+    "eslint-plugin-github": "^4.10.1",
+    "eslint-plugin-prettier": "^5.0.1",
+    "jest": "^29.7.0",
+    "markdownlint-cli2": "^0.11.0",
+    "markdownlint-cli2-formatter-pretty": "^0.0.5"
+  },
+  "prettier": "@github/prettier-config"
 }

package/src/configs/components.js

@@ -1,23 +1,23 @@
-const { flattenComponents } = require('../utils/flatten-components');
+const {flattenComponents} = require('../utils/flatten-components')
 
 const components = flattenComponents({
-    Button: 'button',
-    IconButton: 'button',
-    ToggleSwitch: 'button',
-    Radio: 'input',
-    Checkbox: 'input',
-    Text: 'span',
-    TextInput: {
-        Action: 'button',
-        self: 'input',
-    }, 
-    Select: {
-        Option: 'option', 
-        self: 'select',
-     },
-    TabNav: {
-        self: 'nav',
-    },
+  Button: 'button',
+  IconButton: 'button',
+  ToggleSwitch: 'button',
+  Radio: 'input',
+  Checkbox: 'input',
+  Text: 'span',
+  TextInput: {
+    Action: 'button',
+    self: 'input',
+  },
+  Select: {
+    Option: 'option',
+    self: 'select',
+  },
+  TabNav: {
+    self: 'nav',
+  },
 })
 
-module.exports = components;
+module.exports = components

package/src/configs/recommended.js

@@ -1,11 +1,11 @@
-const components = require('./components');
+const components = require('./components')
 
 module.exports = {
   parserOptions: {
     sourceType: 'module',
     ecmaFeatures: {
-      jsx: true
-    }
+      jsx: true,
+    },
   },
   plugins: ['primer-react', 'github'],
   extends: ['plugin:github/react'],
@@ -15,14 +15,15 @@ module.exports = {
     'primer-react/no-system-props': 'warn',
     'primer-react/a11y-tooltip-interactive-trigger': 'error',
     'primer-react/new-color-css-vars': 'error',
-    'primer-react/a11y-explicit-heading': 'error'
+    'primer-react/a11y-explicit-heading': 'error',
+    'primer-react/new-color-css-vars-have-fallback': 'error',
   },
   settings: {
     github: {
-      components: components
+      components,
     },
     'jsx-a11y': {
-      components: components
-    }
-  }
+      components,
+    },
+  },
 }

package/src/index.js

@@ -5,9 +5,10 @@ module.exports = {
     'no-system-props': require('./rules/no-system-props'),
     'a11y-tooltip-interactive-trigger': require('./rules/a11y-tooltip-interactive-trigger'),
     'new-color-css-vars': require('./rules/new-color-css-vars'),
-    'a11y-explicit-heading': require('./rules/a11y-explicit-heading')
+    'a11y-explicit-heading': require('./rules/a11y-explicit-heading'),
+    'new-color-css-vars-have-fallback': require('./rules/new-color-css-vars-have-fallback'),
   },
   configs: {
-    recommended: require('./configs/recommended')
-  }
+    recommended: require('./configs/recommended'),
+  },
 }

package/src/rules/__tests__/a11y-explicit-heading.test.js

@@ -6,35 +6,35 @@ const ruleTester = new RuleTester({
     ecmaVersion: 'latest',
     sourceType: 'module',
     ecmaFeatures: {
-      jsx: true
-    }
-  }
+      jsx: true,
+    },
+  },
 })
 
 ruleTester.run('a11y-explicit-heading', rule, {
   valid: [
-  `import {Heading} from '@primer/react';
+    `import {Heading} from '@primer/react';
   <Heading as="h1">Heading level 1</Heading>
   `,
-  `import {Heading} from '@primer/react';
+    `import {Heading} from '@primer/react';
   <Heading as="h2">Heading level 2</Heading>
   `,
-  `import {Heading} from '@primer/react';
+    `import {Heading} from '@primer/react';
   <Heading as="H3">Heading level 3</Heading>
   `,
-  `import {Heading} from '@primer/react';
+    `import {Heading} from '@primer/react';
   const args = {};
   <Heading {...args}>A heading with spread props</Heading>
   `,
-  `import {Heading} from '@primer/react';
+    `import {Heading} from '@primer/react';
   const as = 'h3';
   <Heading as={as}>Heading as passed prop</Heading>
   `,
-  `import {Heading} from '@primer/react';
+    `import {Heading} from '@primer/react';
   const args = {};
   <Heading as="h2" {...args}>Heading level 2</Heading>
   `,
-  `
+    `
   import {Heading} from '@primer/react';
   <Heading
     {...someProps}
@@ -42,22 +42,19 @@ ruleTester.run('a11y-explicit-heading', rule, {
   >
     Passed spread props
   </Heading>
-  `
-  
-],
-invalid: [    
-  {
-    code: 
-    `import {Heading} from '@primer/react';
+  `,
+  ],
+  invalid: [
+    {
+      code: `import {Heading} from '@primer/react';
     <Heading>Heading without "as"</Heading>`,
-    errors: [{ messageId: 'nonExplicitHeadingLevel' }]
-  },
-  {
-    code: 
-    `import {Heading} from '@primer/react';
+      errors: [{messageId: 'nonExplicitHeadingLevel'}],
+    },
+    {
+      code: `import {Heading} from '@primer/react';
     <Heading as="span">Heading component used as "span"</Heading>
     `,
-    errors: [{ messageId: 'invalidAsValue' }]
-  },
-]
+      errors: [{messageId: 'invalidAsValue'}],
+    },
+  ],
 })

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

@@ -6,9 +6,9 @@ const ruleTester = new RuleTester({
     ecmaVersion: 'latest',
     sourceType: 'module',
     ecmaFeatures: {
-      jsx: true
-    }
-  }
+      jsx: true,
+    },
+  },
 })
 
 ruleTester.run('non-interactive-tooltip-trigger', rule, {
@@ -58,7 +58,7 @@ ruleTester.run('non-interactive-tooltip-trigger', rule, {
       <Link href={avatar.avatarLink} underline={true}>
         User avatar
       </Link>
-    </Tooltip>` ,
+    </Tooltip>`,
     `
     import {Tooltip, Link} from '@primer/react';
     <Tooltip aria-label="product" direction="e">
@@ -66,7 +66,7 @@ ruleTester.run('non-interactive-tooltip-trigger', rule, {
         Product
       </Link>
     </Tooltip>
-    `
+    `,
   ],
   invalid: [
     {
@@ -74,9 +74,9 @@ ruleTester.run('non-interactive-tooltip-trigger', rule, {
       `,
       errors: [
         {
-          messageId: 'singleChild'
-        }
-      ]
+          messageId: 'singleChild',
+        },
+      ],
     },
     {
       code: `
@@ -87,9 +87,9 @@ ruleTester.run('non-interactive-tooltip-trigger', rule, {
       `,
       errors: [
         {
-          messageId: 'nonInteractiveTrigger'
-        }
-      ]
+          messageId: 'nonInteractiveTrigger',
+        },
+      ],
     },
     {
       code: `
@@ -99,9 +99,9 @@ ruleTester.run('non-interactive-tooltip-trigger', rule, {
       </Tooltip>`,
       errors: [
         {
-          messageId: 'nonInteractiveTrigger'
-        }
-      ]
+          messageId: 'nonInteractiveTrigger',
+        },
+      ],
     },
     {
       code: `
@@ -111,9 +111,9 @@ ruleTester.run('non-interactive-tooltip-trigger', rule, {
       </Tooltip>`,
       errors: [
         {
-          messageId: 'nonInteractiveLink'
-        }
-      ]
+          messageId: 'nonInteractiveLink',
+        },
+      ],
     },
     {
       code: `
@@ -123,9 +123,9 @@ ruleTester.run('non-interactive-tooltip-trigger', rule, {
       </Tooltip>`,
       errors: [
         {
-          messageId: 'nonInteractiveLink'
-        }
-      ]
+          messageId: 'nonInteractiveLink',
+        },
+      ],
     },
     {
       code: `
@@ -135,9 +135,9 @@ ruleTester.run('non-interactive-tooltip-trigger', rule, {
       </Tooltip>`,
       errors: [
         {
-          messageId: 'nonInteractiveInput'
-        }
-      ]
+          messageId: 'nonInteractiveInput',
+        },
+      ],
     },
     {
       code: `
@@ -147,9 +147,9 @@ ruleTester.run('non-interactive-tooltip-trigger', rule, {
       </Tooltip>`,
       errors: [
         {
-          messageId: 'nonInteractiveInput'
-        }
-      ]
+          messageId: 'nonInteractiveInput',
+        },
+      ],
     },
     {
       code: `
@@ -159,9 +159,9 @@ ruleTester.run('non-interactive-tooltip-trigger', rule, {
       </Tooltip>`,
       errors: [
         {
-          messageId: 'nonInteractiveTrigger'
-        }
-      ]
+          messageId: 'nonInteractiveTrigger',
+        },
+      ],
     },
     {
       code: `
@@ -171,9 +171,9 @@ ruleTester.run('non-interactive-tooltip-trigger', rule, {
       </Tooltip>`,
       errors: [
         {
-          messageId: 'nonInteractiveTrigger'
-        }
-      ]
+          messageId: 'nonInteractiveTrigger',
+        },
+      ],
     },
     {
       code: `
@@ -183,9 +183,9 @@ ruleTester.run('non-interactive-tooltip-trigger', rule, {
       </Tooltip>`,
       errors: [
         {
-          messageId: 'nonInteractiveInput'
-        }
-      ]
+          messageId: 'nonInteractiveInput',
+        },
+      ],
     },
     {
       code: `
@@ -197,9 +197,9 @@ ruleTester.run('non-interactive-tooltip-trigger', rule, {
       </Tooltip>`,
       errors: [
         {
-          messageId: 'nonInteractiveTrigger'
-        }
-      ]
+          messageId: 'nonInteractiveTrigger',
+        },
+      ],
     },
     {
       code: `import {Tooltip, Button} from '@primer/react';
@@ -210,9 +210,9 @@ ruleTester.run('non-interactive-tooltip-trigger', rule, {
       </Tooltip>`,
       errors: [
         {
-          messageId: 'nonInteractiveLink'
-        }
-      ]
-    }
-  ]
+          messageId: 'nonInteractiveLink',
+        },
+      ],
+    },
+  ],
 })

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

@@ -6,9 +6,9 @@ const ruleTester = new RuleTester({
     ecmaVersion: 'latest',
     sourceType: 'module',
     ecmaFeatures: {
-      jsx: true
-    }
-  }
+      jsx: true,
+    },
+  },
 })
 
 ruleTester.run('direct-slot-children', rule, {
@@ -24,7 +24,7 @@ ruleTester.run('direct-slot-children', rule, {
     <ActionList.LinkItem><ActionList.LeadingVisual></ActionList.LeadingVisual>mona<ActionList.Description>Monalisa Octocat</ActionList.Description></ActionList.LinkItem>`,
     `import {MarkdownEditor} from '@primer/react'; <MarkdownEditor><MarkdownEditor.Footer><MarkdownEditor.Actions></MarkdownEditor.Actions></MarkdownEditor.Footer></MarkdownEditor>`,
     `import {MarkdownEditor} from '@primer/react'; <MarkdownEditor><MarkdownEditor.Footer><MarkdownEditor.FooterButton></MarkdownEditor.FooterButton></MarkdownEditor.Footer></MarkdownEditor>`,
-    {code: `import {Foo} from './Foo'; <Foo><div><Foo.Bar></Foo.Bar></div></Foo>`, options: [{skipImportCheck: true}]}
+    {code: `import {Foo} from './Foo'; <Foo><div><Foo.Bar></Foo.Bar></div></Foo>`, options: [{skipImportCheck: true}]},
   ],
   invalid: [
     {
@@ -32,54 +32,54 @@ ruleTester.run('direct-slot-children', rule, {
       errors: [
         {
           messageId: 'directSlotChildren',
-          data: {childName: 'PageLayout.Header', parentName: 'PageLayout'}
-        }
-      ]
+          data: {childName: 'PageLayout.Header', parentName: 'PageLayout'},
+        },
+      ],
     },
     {
       code: `import {PageLayout} from '@primer/react'; function Header() { return <PageLayout.Header>Header</PageLayout.Header>; }`,
       errors: [
         {
           messageId: 'directSlotChildren',
-          data: {childName: 'PageLayout.Header', parentName: 'PageLayout'}
-        }
-      ]
+          data: {childName: 'PageLayout.Header', parentName: 'PageLayout'},
+        },
+      ],
     },
     {
       code: `import {PageLayout} from '@primer/react/drafts'; <PageLayout.Header>Header</PageLayout.Header>`,
       errors: [
         {
           messageId: 'directSlotChildren',
-          data: {childName: 'PageLayout.Header', parentName: 'PageLayout'}
-        }
-      ]
+          data: {childName: 'PageLayout.Header', parentName: 'PageLayout'},
+        },
+      ],
     },
     {
       code: `import {PageLayout} from '@primer/react'; <div><PageLayout.Header>Header</PageLayout.Header></div>`,
       errors: [
         {
           messageId: 'directSlotChildren',
-          data: {childName: 'PageLayout.Header', parentName: 'PageLayout'}
-        }
-      ]
+          data: {childName: 'PageLayout.Header', parentName: 'PageLayout'},
+        },
+      ],
     },
     {
       code: `import {PageLayout} from '@primer/react'; <PageLayout><div><PageLayout.Header>Header</PageLayout.Header></div></PageLayout>`,
       errors: [
         {
           messageId: 'directSlotChildren',
-          data: {childName: 'PageLayout.Header', parentName: 'PageLayout'}
-        }
-      ]
+          data: {childName: 'PageLayout.Header', parentName: 'PageLayout'},
+        },
+      ],
     },
     {
       code: `import {TreeView} from '@primer/react'; <TreeView><TreeView.Item><div><TreeView.LeadingVisual>Visual</TreeView.LeadingVisual></div></TreeView.Item></TreeView>`,
       errors: [
         {
           messageId: 'directSlotChildren',
-          data: {childName: 'TreeView.LeadingVisual', parentName: 'TreeView.Item'}
-        }
-      ]
+          data: {childName: 'TreeView.LeadingVisual', parentName: 'TreeView.Item'},
+        },
+      ],
     },
     {
       code: `import {PageLayout} from './PageLayout'; <PageLayout><div><PageLayout.Header>Header</PageLayout.Header></div></PageLayout>`,
@@ -87,36 +87,36 @@ ruleTester.run('direct-slot-children', rule, {
       errors: [
         {
           messageId: 'directSlotChildren',
-          data: {childName: 'PageLayout.Header', parentName: 'PageLayout'}
-        }
-      ]
+          data: {childName: 'PageLayout.Header', parentName: 'PageLayout'},
+        },
+      ],
     },
     {
       code: `import {ActionList} from '@primer/react'; <ActionList.Item><div><ActionList.LeadingVisual>Visual</ActionList.LeadingVisual></div></ActionList.Item>`,
       errors: [
         {
           messageId: 'directSlotChildren',
-          data: {childName: 'ActionList.LeadingVisual', parentName: 'ActionList.Item or ActionList.LinkItem'}
-        }
-      ]
+          data: {childName: 'ActionList.LeadingVisual', parentName: 'ActionList.Item or ActionList.LinkItem'},
+        },
+      ],
     },
     {
       code: `import {MarkdownEditor} from '@primer/react'; <MarkdownEditor><div><MarkdownEditor.Actions></MarkdownEditor.Actions></div></MarkdownEditor>`,
       errors: [
         {
           messageId: 'directSlotChildren',
-          data: {childName: 'MarkdownEditor.Actions', parentName: 'MarkdownEditor or MarkdownEditor.Footer'}
-        }
-      ]
+          data: {childName: 'MarkdownEditor.Actions', parentName: 'MarkdownEditor or MarkdownEditor.Footer'},
+        },
+      ],
     },
     {
       code: `import {MarkdownEditor} from '@primer/react'; <MarkdownEditor><MarkdownEditor.FooterButton></MarkdownEditor.FooterButton></MarkdownEditor>`,
       errors: [
         {
           messageId: 'directSlotChildren',
-          data: {childName: 'MarkdownEditor.FooterButton', parentName: 'MarkdownEditor.Footer'}
-        }
-      ]
-    }
-  ]
+          data: {childName: 'MarkdownEditor.FooterButton', parentName: 'MarkdownEditor.Footer'},
+        },
+      ],
+    },
+  ],
 })