Merge branch 'main' into update-tooltip-rule-main

Author: broccolinisoup

.changeset/purple-pears-kiss.md

@@ -0,0 +1,5 @@
+---
+'eslint-plugin-primer-react': minor
+---
+
+Add enforce-css-module-default-import rule

.changeset/slimy-zebras-roll.md

@@ -0,0 +1,5 @@
+---
+'eslint-plugin-primer-react': minor
+---
+
+Add enforce-css-module-identifier-casing rule

CHANGELOG.md

@@ -1,5 +1,29 @@
 # eslint-plugin-primer-react
 
+## 6.1.6
+
+### Patch Changes
+
+- [#255](https://github.com/primer/eslint-plugin-primer-react/pull/255) [`fd2cb55`](https://github.com/primer/eslint-plugin-primer-react/commit/fd2cb551cdf219c2ac690ce610fbbab102cc5e48) Thanks [@joshblack](https://github.com/joshblack)! - Update no-wildcard-imports rule to no longer migrate the TokenSizeKeys import
+
+## 6.1.5
+
+### Patch Changes
+
+- [#253](https://github.com/primer/eslint-plugin-primer-react/pull/253) [`456bf4d`](https://github.com/primer/eslint-plugin-primer-react/commit/456bf4d3c1f5e5dde70030f24c1c6b821e685cc5) Thanks [@joshblack](https://github.com/joshblack)! - Update no-wildcard-imports rule to move ButtonBase to `@primer/react/experimental`
+
+## 6.1.4
+
+### Patch Changes
+
+- [#249](https://github.com/primer/eslint-plugin-primer-react/pull/249) [`f8c8a9d`](https://github.com/primer/eslint-plugin-primer-react/commit/f8c8a9df1b49cb7f487eb0dba3e7f46ac7f7e23b) Thanks [@joshblack](https://github.com/joshblack)! - Update no-wildcard-imports rule to not create separate imports for type only imports. This prevents an issue downstream with autofixers
+
+## 6.1.3
+
+### Patch Changes
+
+- [#242](https://github.com/primer/eslint-plugin-primer-react/pull/242) [`e139c02`](https://github.com/primer/eslint-plugin-primer-react/commit/e139c02ae0d0d656d2276320ae0e4756b3a1debd) Thanks [@joshblack](https://github.com/joshblack)! - Update no-wildcard-imports rule to work for imports that specify value and type imports
+
 ## 6.1.2
 
 ### Patch Changes

docs/rules/enforce-css-module-default-import.md

@@ -0,0 +1,53 @@
+# Enforce CSS Module Default Import (enforce-css-module-default-import)
+
+CSS Modules should import only the default import. Avoid named imports which can often conflict with other variables (including the function name of the React component) when importing css modules.
+
+Additionally, for consistency among the codebase the default import should be consistently named. This rule allows enforcing the name of the default import, which by default expects it to be named either `classes` or be suffixed `Classes`.
+
+## Rule details
+
+This rule disallows the use of any CSS Module property that does not match the desired casing.
+
+👎 Examples of **incorrect** code for this rule:
+
+```jsx
+/* eslint primer-react/enforce-css-module-default-import: "error" */
+import {Button} from '@primer/react'
+import {Button as ButtonClass} from './some.module.css' // oops! Conflict!
+```
+
+```jsx
+/* eslint primer-react/enforce-css-module-default-import: ["error",{enforceName:"^classes$"}] */
+import {Button} from '@primer/react'
+import classnames from './some.module.css' // This default import should match /^classes$/
+```
+
+👍 Examples of **correct** code for this rule:
+
+```jsx
+/* eslint primer-react/enforce-css-module-default-import: "error" */
+import {Button} from '@primer/react'
+import classes from './some.module.css'
+```
+
+```jsx
+/* eslint primer-react/enforce-css-module-default-import: ["error",{enforceName:"^classes$"}] */
+import {Button} from '@primer/react'
+import classes from './some.module.css'
+```
+
+```jsx
+/* eslint primer-react/enforce-css-module-default-import: ["error",{enforceName:"(^classes$|Classes$)"}] */
+import {Button} from '@primer/react'
+import classes from './some.module.css'
+import sharedClasses from './shared.module.css'
+import utilClasses from './util.module.css'
+```
+
+## Options
+
+- `enforceName` (default: `.*`)
+
+  By default, the `enforce-css-module-default-import` rule will allow any name for the default export,
+  however in the _recommended_ ruleset this is set to `(^classes$|Classes$)` meaning that the default
+  export name must either be exactly `classes` or end in `Classes`, for example `sharedClasses`.

docs/rules/enforce-css-module-identifier-casing.md

@@ -0,0 +1,39 @@
+# Enforce CSS Module Identifier Casing (enforce-css-module-identifier-casing)
+
+CSS Modules should expose class names written in PascalCase.
+
+## Rule details
+
+This rule disallows the use of any CSS Module property that does not match the desired casing.
+
+👎 Examples of **incorrect** code for this rule:
+
+```jsx
+/* eslint primer-react/enforce-css-module-identifier-casing: "error" */
+import {Button} from '@primer/react'
+import classes from './some.module.css'
+
+<Button className={classes.button} />
+<Button className={classes['button']} />
+<Button className={clsx(classes.button)} />
+
+let ButtonClass = "button"
+<Button className={clsx(classes[ButtonClass])} />
+```
+
+👍 Examples of **correct** code for this rule:
+
+```jsx
+/* eslint primer-react/enforce-css-module-identifier-casing: "error" */
+import {Button} from '@primer/react'
+import classes from './some.module.css'
+;<Button className={classes.Button} />
+```
+
+## Options
+
+- `casing` (default: `'pascal'`)
+
+  By default, the `enforce-css-module-identifier-casing` rule will check for identifiers matching PascalCase.
+  Changing this to `'camel'` will instead enforce camelCasing rules. Changing this to `'kebab'` will instead
+  enforce kebab-casing rules.

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-primer-react",
-  "version": "6.1.2",
+  "version": "6.1.6",
   "description": "ESLint rules for Primer React",
   "main": "src/index.js",
   "scripts": {
@@ -39,16 +39,16 @@
   },
   "devDependencies": {
     "@changesets/changelog-github": "^0.5.0",
-    "@changesets/cli": "^2.16.0",
-    "@github/markdownlint-github": "^0.6.0",
+    "@changesets/cli": "^2.27.9",
+    "@github/markdownlint-github": "^0.6.3",
     "@github/prettier-config": "0.0.6",
     "eslint": "^8.42.0",
-    "eslint-plugin-prettier": "^5.0.1",
+    "eslint-plugin-prettier": "^5.2.1",
     "jest": "^29.7.0",
     "markdownlint-cli2": "^0.14.0",
     "markdownlint-cli2-formatter-pretty": "^0.0.7",
     "@typescript-eslint/rule-tester": "7.16.0",
-    "@types/jest": "^29.5.12"
+    "@types/jest": "^29.5.13"
   },
   "prettier": "@github/prettier-config"
 }

package.json

@@ -20,6 +20,8 @@ module.exports = {
     'primer-react/a11y-use-accessible-tooltip': 'error',
     'primer-react/no-unnecessary-components': 'error',
     'primer-react/prefer-action-list-item-onselect': 'error',
+    'primer-react/enforce-css-module-identifier-casing': 'error',
+    'primer-react/enforce-css-module-default-import': ['error', {enforceName: '(^classes$|Classes$)'}],
   },
   settings: {
     github: {

src/configs/recommended.js

@@ -14,6 +14,8 @@ module.exports = {
     'no-wildcard-imports': require('./rules/no-wildcard-imports'),
     'no-unnecessary-components': require('./rules/no-unnecessary-components'),
     'prefer-action-list-item-onselect': require('./rules/prefer-action-list-item-onselect'),
+    'enforce-css-module-identifier-casing': require('./rules/enforce-css-module-identifier-casing'),
+    'enforce-css-module-default-import': require('./rules/enforce-css-module-default-import'),
   },
   configs: {
     recommended: require('./configs/recommended'),