eslint-plugin-primer-react 6.1.6-rc.f312214 → 6.2.0-rc.2c85052

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # eslint-plugin-primer-react
 
+## 6.2.0
+
+### Minor Changes
+
+- [#258](https://github.com/primer/eslint-plugin-primer-react/pull/258) [`83f29f3`](https://github.com/primer/eslint-plugin-primer-react/commit/83f29f339999b9c21d95167bcc2680c1797cbab6) Thanks [@keithamus](https://github.com/keithamus)! - Add enforce-css-module-identifier-casing rule
+
 ## 6.1.6
 
 ### Patch Changes

package/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/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "eslint-plugin-primer-react",
-  "version": "6.1.2",
+  "version": "6.1.6",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "eslint-plugin-primer-react",
-      "version": "6.1.2",
+      "version": "6.1.6",
       "license": "MIT",
       "dependencies": {
         "@styled-system/props": "^5.1.5",
@@ -20,13 +20,13 @@
       },
       "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",
-        "@types/jest": "^29.5.12",
+        "@types/jest": "^29.5.13",
         "@typescript-eslint/rule-tester": "7.16.0",
         "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"
@@ -170,15 +170,6 @@
         "url": "https://opencollective.com/babel"
       }
     },
-    "node_modules/@babel/core/node_modules/semver": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
-      "dev": true,
-      "bin": {
-        "semver": "bin/semver.js"
-      }
-    },
     "node_modules/@babel/generator": {
       "version": "7.23.0",
       "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.23.0.tgz",
@@ -219,15 +210,6 @@
         "yallist": "^3.0.2"
       }
     },
-    "node_modules/@babel/helper-compilation-targets/node_modules/semver": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
-      "dev": true,
-      "bin": {
-        "semver": "bin/semver.js"
-      }
-    },
     "node_modules/@babel/helper-compilation-targets/node_modules/yallist": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
@@ -806,10 +788,11 @@
       "dev": true
     },
     "node_modules/@changesets/cli": {
-      "version": "2.27.8",
-      "resolved": "https://registry.npmjs.org/@changesets/cli/-/cli-2.27.8.tgz",
-      "integrity": "sha512-gZNyh+LdSsI82wBSHLQ3QN5J30P4uHKJ4fXgoGwQxfXwYFTJzDdvIJasZn8rYQtmKhyQuiBj4SSnLuKlxKWq4w==",
+      "version": "2.27.9",
+      "resolved": "https://registry.npmjs.org/@changesets/cli/-/cli-2.27.9.tgz",
+      "integrity": "sha512-q42a/ZbDnxPpCb5Wkm6tMVIxgeI9C/bexntzTeCFBrQEdpisQqk8kCHllYZMDjYtEc1ZzumbMJAG8H0Z4rdvjg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@changesets/apply-release-plan": "^7.0.5",
         "@changesets/assemble-release-plan": "^6.0.4",
@@ -826,14 +809,12 @@
         "@changesets/types": "^6.0.0",
         "@changesets/write": "^0.3.2",
         "@manypkg/get-packages": "^1.1.3",
-        "@types/semver": "^7.5.0",
         "ansi-colors": "^4.1.3",
         "ci-info": "^3.7.0",
         "enquirer": "^2.3.0",
         "external-editor": "^3.1.0",
         "fs-extra": "^7.0.1",
         "mri": "^1.2.0",
-        "outdent": "^0.5.0",
         "p-limit": "^2.2.0",
         "package-manager-detector": "^0.2.0",
         "picocolors": "^1.1.0",
@@ -7162,10 +7143,11 @@
       "dev": true
     },
     "node_modules/semver": {
-      "version": "6.3.0",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
       "dev": true,
+      "license": "ISC",
       "bin": {
         "semver": "bin/semver.js"
       }
@@ -7683,9 +7665,10 @@
       }
     },
     "node_modules/tsconfig-paths/node_modules/json5": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
-      "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+      "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
+      "license": "MIT",
       "dependencies": {
         "minimist": "^1.2.0"
       },
@@ -8213,14 +8196,6 @@
         "gensync": "^1.0.0-beta.2",
         "json5": "^2.2.3",
         "semver": "^6.3.1"
-      },
-      "dependencies": {
-        "semver": {
-          "version": "6.3.1",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-          "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
-          "dev": true
-        }
       }
     },
     "@babel/generator": {
@@ -8257,12 +8232,6 @@
             "yallist": "^3.0.2"
           }
         },
-        "semver": {
-          "version": "6.3.1",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-          "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
-          "dev": true
-        },
         "yallist": {
           "version": "3.1.1",
           "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
@@ -8707,9 +8676,9 @@
       }
     },
     "@changesets/cli": {
-      "version": "2.27.8",
-      "resolved": "https://registry.npmjs.org/@changesets/cli/-/cli-2.27.8.tgz",
-      "integrity": "sha512-gZNyh+LdSsI82wBSHLQ3QN5J30P4uHKJ4fXgoGwQxfXwYFTJzDdvIJasZn8rYQtmKhyQuiBj4SSnLuKlxKWq4w==",
+      "version": "2.27.9",
+      "resolved": "https://registry.npmjs.org/@changesets/cli/-/cli-2.27.9.tgz",
+      "integrity": "sha512-q42a/ZbDnxPpCb5Wkm6tMVIxgeI9C/bexntzTeCFBrQEdpisQqk8kCHllYZMDjYtEc1ZzumbMJAG8H0Z4rdvjg==",
       "dev": true,
       "requires": {
         "@changesets/apply-release-plan": "^7.0.5",
@@ -8727,14 +8696,12 @@
         "@changesets/types": "^6.0.0",
         "@changesets/write": "^0.3.2",
         "@manypkg/get-packages": "^1.1.3",
-        "@types/semver": "^7.5.0",
         "ansi-colors": "^4.1.3",
         "ci-info": "^3.7.0",
         "enquirer": "^2.3.0",
         "external-editor": "^3.1.0",
         "fs-extra": "^7.0.1",
         "mri": "^1.2.0",
-        "outdent": "^0.5.0",
         "p-limit": "^2.2.0",
         "package-manager-detector": "^0.2.0",
         "picocolors": "^1.1.0",
@@ -13303,9 +13270,9 @@
       "dev": true
     },
     "semver": {
-      "version": "6.3.0",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
       "dev": true
     },
     "set-function-length": {
@@ -13701,9 +13668,9 @@
       },
       "dependencies": {
         "json5": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
-          "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
           "requires": {
             "minimist": "^1.2.0"
           }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-primer-react",
-  "version": "6.1.6-rc.f312214",
+  "version": "6.2.0-rc.2c85052",
   "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/src/configs/recommended.js

@@ -20,6 +20,7 @@ module.exports = {
     'primer-react/a11y-use-next-tooltip': 'error',
     'primer-react/no-unnecessary-components': 'error',
     'primer-react/prefer-action-list-item-onselect': 'error',
+    'primer-react/enforce-css-module-identifier-casing': 'error',
   },
   settings: {
     github: {

package/src/index.js

@@ -14,6 +14,7 @@ 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'),
   },
   configs: {
     recommended: require('./configs/recommended'),

package/src/rules/__tests__/enforce-css-module-identifier-casing.test.js

@@ -0,0 +1,99 @@
+const rule = require('../enforce-css-module-identifier-casing')
+const {RuleTester} = require('eslint')
+
+const ruleTester = new RuleTester({
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+})
+
+ruleTester.run('enforce-css-module-identifier-casing', rule, {
+  valid: [
+    'import classes from "a.module.css"; function Foo() { return <Box className={classes.Foo}/> }',
+    'import classes from "a.module.css"; function Foo() { return <Box className={clsx(classes.Foo)}/> }',
+    'import classes from "a.module.css"; function Foo() { return <Box className={clsx(className, classes.Foo)}/> }',
+    'import classes from "a.module.css"; function Foo() { return <Box className={`${classes.Foo}`}/> }',
+    'import classes from "a.module.css"; function Foo() { return <Box className={`${classes["Foo"]}`}/> }',
+    'import classes from "a.module.css"; let x = "Foo"; function Foo() { return <Box className={`${classes[x]}`}/> }',
+  ],
+  invalid: [
+    {
+      code: 'import classes from "a.module.css"; function Foo() { return <Box className={classes.foo}/> }',
+      errors: [
+        {
+          messageId: 'pascal',
+          data: {name: 'foo'},
+        },
+      ],
+    },
+    {
+      code: 'import classes from "a.module.css"; function Foo() { return <Box className={clsx(classes.foo)}/> }',
+      errors: [
+        {
+          messageId: 'pascal',
+          data: {name: 'foo'},
+        },
+      ],
+    },
+    {
+      code: 'import classes from "a.module.css"; function Foo() { return <Box className={clsx(className, classes.foo)}/> }',
+      errors: [
+        {
+          messageId: 'pascal',
+          data: {name: 'foo'},
+        },
+      ],
+    },
+    {
+      code: 'import classes from "a.module.css"; function Foo() { return <Box className={`${classes.foo}`}/> }',
+      errors: [
+        {
+          messageId: 'pascal',
+          data: {name: 'foo'},
+        },
+      ],
+    },
+    {
+      code: 'import classes from "a.module.css"; function Foo() { return <Box className={classes["foo"]}/> }',
+      errors: [
+        {
+          messageId: 'pascal',
+          data: {name: 'foo'},
+        },
+      ],
+    },
+    {
+      code: 'import classes from "a.module.css"; function Foo() { return <Box className={classes.Foo}/> }',
+      options: [{casing: 'camel'}],
+      errors: [
+        {
+          messageId: 'camel',
+          data: {name: 'Foo'},
+        },
+      ],
+    },
+    {
+      code: 'import classes from "a.module.css"; let FooClass = "foo"; function Foo() { return <Box className={classes[FooClass]}/> }',
+      errors: [
+        {
+          messageId: 'pascal',
+          data: {name: 'foo'},
+        },
+      ],
+    },
+    {
+      code: 'import classes from "a.module.css"; function Foo() { return <Box className={classes[x]}/> }',
+      options: [{casing: 'camel'}],
+      errors: [
+        {
+          messageId: 'bad',
+          data: {type: 'Identifier'},
+        },
+      ],
+    },
+  ],
+})

package/src/rules/enforce-css-module-identifier-casing.js

@@ -0,0 +1,76 @@
+const {availableCasings, casingMatches} = require('../utils/casing-matches')
+const {identifierIsCSSModuleBinding} = require('../utils/css-modules')
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    fixable: 'code',
+    schema: [
+      {
+        properties: {
+          casing: {
+            enum: availableCasings,
+          },
+        },
+      },
+    ],
+    messages: {
+      bad: 'Class names should be in a recognisable case, and either an identifier or literal, saw: {{ type }}',
+      camel: 'Class names should be camelCase in both CSS and JS, saw: {{ name }}',
+      pascal: 'Class names should be PascalCase in both CSS and JS, saw: {{ name }}',
+      kebab: 'Class names should be kebab-case in both CSS and JS, saw: {{ name }}',
+    },
+  },
+  create(context) {
+    const casing = context.options[0]?.casing || 'pascal'
+    return {
+      ['JSXAttribute[name.name="className"] JSXExpressionContainer MemberExpression[object.type="Identifier"]']:
+        function (node) {
+          if (!identifierIsCSSModuleBinding(node.object, context)) return
+          if (!node.computed && node.property?.type === 'Identifier') {
+            if (!casingMatches(node.property.name || '', casing)) {
+              context.report({
+                node: node.property,
+                messageId: casing,
+                data: {name: node.property.name},
+              })
+            }
+          } else if (node.property?.type === 'Literal') {
+            if (!casingMatches(node.property.value || '', casing)) {
+              context.report({
+                node: node.property,
+                messageId: casing,
+                data: {name: node.property.value},
+              })
+            }
+          } else if (node.computed) {
+            const ref = context
+              .getScope()
+              .references.find(reference => reference.identifier.name === node.property.name)
+            const def = ref.resolved?.defs?.[0]
+            if (def?.node?.init?.type === 'Literal') {
+              if (!casingMatches(def.node.init.value || '', casing)) {
+                context.report({
+                  node: node.property,
+                  messageId: casing,
+                  data: {name: def.node.init.value},
+                })
+              }
+            } else {
+              context.report({
+                node: node.property,
+                messageId: 'bad',
+                data: {type: node.property.type},
+              })
+            }
+          } else {
+            context.report({
+              node: node.property,
+              messageId: 'bad',
+              data: {type: node.property.type},
+            })
+          }
+        },
+    }
+  },
+}

package/src/utils/casing-matches.js

@@ -0,0 +1,19 @@
+const camelReg = /^[a-z]+(?:[A-Z0-9][a-z0-9]+)*?$/
+const pascalReg = /^(?:[A-Z0-9][a-z0-9]+)+?$/
+const kebabReg = /^[a-z]+(?:-[a-z0-9]+)*?$/
+
+function casingMatches(name, type) {
+  switch (type) {
+    case 'camel':
+      return camelReg.test(name)
+    case 'pascal':
+      return pascalReg.test(name)
+    case 'kebab':
+      return kebabReg.test(name)
+    default:
+      throw new Error(`Invalid case type ${type}`)
+  }
+}
+exports.casingMatches = casingMatches
+
+exports.availableCasings = ['camel', 'pascal', 'kebab']

package/src/utils/css-modules.js

@@ -0,0 +1,15 @@
+function importBindingIsFromCSSModuleImport(node) {
+  return node.type === 'ImportBinding' && node.parent?.source?.value?.endsWith('.module.css')
+}
+
+function identifierIsCSSModuleBinding(node, context) {
+  if (node.type !== 'Identifier') return false
+  const ref = context.getScope().references.find(reference => reference.identifier.name === node.name)
+  if (ref.resolved?.defs?.some(importBindingIsFromCSSModuleImport)) {
+    return true
+  }
+  return false
+}
+
+exports.importBindingIsFromCSSModuleImport = importBindingIsFromCSSModuleImport
+exports.identifierIsCSSModuleBinding = identifierIsCSSModuleBinding