extend enforce-css-module-identifier-casing to support destructured imports (#265)

Author: keithamus

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

@@ -19,6 +19,7 @@ ruleTester.run('enforce-css-module-identifier-casing', rule, {
     '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]}`}/> }',
+    'import {Foo} from "a.module.css"; function Bar() { return <Box className={Foo}/> }',
   ],
   invalid: [
     {
@@ -30,6 +31,15 @@ ruleTester.run('enforce-css-module-identifier-casing', rule, {
         },
       ],
     },
+    {
+      code: 'import {foo} from "a.module.css"; function Bar() { return <Box className={foo}/> }',
+      errors: [
+        {
+          messageId: 'pascal',
+          data: {name: 'foo'},
+        },
+      ],
+    },
     {
       code: 'import classes from "a.module.css"; function Foo() { return <Box className={clsx(classes.foo)}/> }',
       errors: [

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

@@ -24,6 +24,16 @@ module.exports = {
   create(context) {
     const casing = context.options[0]?.casing || 'pascal'
     return {
+      ['JSXAttribute[name.name="className"] JSXExpressionContainer>Identifier']: function (node) {
+        if (!identifierIsCSSModuleBinding(node, context)) return
+        if (!casingMatches(node.name || '', casing)) {
+          context.report({
+            node,
+            messageId: casing,
+            data: {name: node.name},
+          })
+        }
+      },
       ['JSXAttribute[name.name="className"] JSXExpressionContainer MemberExpression[object.type="Identifier"]']:
         function (node) {
           if (!identifierIsCSSModuleBinding(node.object, context)) return
@@ -44,8 +54,8 @@ module.exports = {
               })
             }
           } else if (node.computed) {
-            const ref = context
-              .getScope()
+            const ref = context.sourceCode
+              .getScope(node)
               .references.find(reference => reference.identifier.name === node.property.name)
             const def = ref.resolved?.defs?.[0]
             if (def?.node?.init?.type === 'Literal') {

src/utils/css-modules.js

@@ -4,8 +4,8 @@ function importBindingIsFromCSSModuleImport(node) {
 
 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)) {
+  const ref = context.sourceCode.getScope(node).references.find(reference => reference.identifier.name === node.name)
+  if (ref && ref.resolved?.defs?.some(importBindingIsFromCSSModuleImport)) {
     return true
   }
   return false