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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-primer-react",
-  "version": "6.1.6",
+  "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