Added eslint-plugin-css-modules support

README.md

@@ -45,6 +45,7 @@ Then enhance it with one or more **addons**:
 - `babel-parser`: Use [babel-eslint](https://github.com/babel/babel-eslint) parser so that you may use language features that are not yet implemented in eslint (e.g.: dynamic imports)
 - `react` - If you are going to use [React](https://reactjs.org/) (requires `es6` base configuration or higher)
 - `jest` - If you are going to use [Jest](https://facebook.github.io/jest/) to develop tests
+- `css` - If you are going to use [css-modules](https://github.com/atfzl/eslint-plugin-css-modules) to lint css classes
 
 
 ### Examples

addons/css-modules.js

@@ -0,0 +1,8 @@
+'use strict';
+
+module.exports = {
+    'plugins': ['css-modules'],
+    'extends': [
+        '../rules/css-modules',
+    ],
+};

package.json

@@ -52,24 +52,25 @@
   "dependencies": {
     "babel-eslint": "^10.0.3",
     "eslint-plugin-babel": "^5.3.0",
-    "eslint-plugin-jest": "^22.3.0",
-    "eslint-plugin-jsdoc": "^15.11.0",
+    "eslint-plugin-css-modules": "^2.11.0",
+    "eslint-plugin-jest": "^23.0.2",
+    "eslint-plugin-jsdoc": "^16.1.1",
     "eslint-plugin-prefer-import": "0.0.1",
     "eslint-plugin-react": "^7.16.0",
-    "eslint-plugin-react-hooks": "^2.1.2"
+    "eslint-plugin-react-hooks": "^2.2.0"
   },
   "devDependencies": {
     "@babel/core": "^7.3.3",
     "@commitlint/cli": "^8.2.0",
     "@commitlint/config-conventional": "^8.2.0",
     "babel-preset-moxy": "^3.0.4",
     "create-react-class": "^15.6.3",
-    "eslint": "^6.5.1",
+    "eslint": "^6.6.0",
     "husky": "^3.0.9",
     "jest": "^24.5.0",
     "lint-staged": "^9.4.2",
     "prop-types": "^15.6.2",
-    "react": "^16.8.3",
+    "react": "^16.11.0",
     "standard-version": "^7.0.0"
   },
   "engines": {

rules/css-modules.js

@@ -0,0 +1,12 @@
+// eslint-plugin-css-modules: https://github.com/atfzl/eslint-plugin-css-modules
+
+'use strict';
+
+module.exports = {
+    'rules': {
+        // Alerts whenever a CSS class is not being used
+        'css-modules/no-unused-class': [1, { 'camelCase': true }],
+        // Alerts when using a CSS class that is not defined
+        'css-modules/no-undef-class': [2, { 'camelCase': true }],
+    },
+};

test/__snapshots__/index.spec.js.snap

@@ -171,13 +171,13 @@ Array [
     "severity": 2,
   },
   Object {
-    "column": 16,
+    "column": 14,
     "line": 423,
     "rule": "no-multi-spaces",
     "severity": 2,
   },
   Object {
-    "column": 19,
+    "column": 17,
     "line": 427,
     "rule": "no-multi-spaces",
     "severity": 2,
@@ -397,6 +397,58 @@ Array [
 ]
 `;
 
+exports[`should pass on fixtures/rules/css-modules/undefined.js 1`] = `
+Array [
+  Object {
+    "column": 41,
+    "line": 8,
+    "rule": "css-modules/no-undef-class",
+    "severity": 2,
+  },
+]
+`;
+
+exports[`should pass on fixtures/rules/css-modules/unused.js 1`] = `
+Array [
+  Object {
+    "column": 8,
+    "line": 2,
+    "rule": "css-modules/no-unused-class",
+    "severity": 1,
+  },
+  Object {
+    "column": 47,
+    "line": 9,
+    "rule": "react/jsx-curly-spacing",
+    "severity": 2,
+  },
+  Object {
+    "column": 48,
+    "line": 9,
+    "rule": "react/jsx-tag-spacing",
+    "severity": 2,
+  },
+  Object {
+    "column": 32,
+    "line": 14,
+    "rule": "react/jsx-curly-spacing",
+    "severity": 2,
+  },
+  Object {
+    "column": 70,
+    "line": 14,
+    "rule": "react/jsx-curly-spacing",
+    "severity": 2,
+  },
+  Object {
+    "column": 71,
+    "line": 14,
+    "rule": "react/jsx-tag-spacing",
+    "severity": 2,
+  },
+]
+`;
+
 exports[`should pass on fixtures/rules/errors/errors.js 1`] = `
 Array [
   Object {
@@ -799,7 +851,7 @@ Array [
     "severity": 2,
   },
   Object {
-    "column": 1,
+    "column": 4,
     "line": 21,
     "rule": "jest/no-identical-title",
     "severity": 2,
@@ -1628,13 +1680,13 @@ Array [
     "severity": 2,
   },
   Object {
-    "column": 15,
+    "column": 16,
     "line": 1214,
     "rule": "space-in-parens",
     "severity": 2,
   },
   Object {
-    "column": 17,
+    "column": 16,
     "line": 1214,
     "rule": "space-in-parens",
     "severity": 2,
@@ -1891,7 +1943,7 @@ Array [
     "severity": 2,
   },
   Object {
-    "column": 1,
+    "column": 4,
     "line": 19,
     "rule": "jest/no-identical-title",
     "severity": 2,
@@ -1926,7 +1978,7 @@ Array [
     "severity": 2,
   },
   Object {
-    "column": 1,
+    "column": 4,
     "line": 19,
     "rule": "jest/no-identical-title",
     "severity": 2,
@@ -1961,7 +2013,7 @@ Array [
     "severity": 2,
   },
   Object {
-    "column": 1,
+    "column": 4,
     "line": 19,
     "rule": "jest/no-identical-title",
     "severity": 2,
@@ -2109,7 +2161,7 @@ Array [
     "severity": 2,
   },
   Object {
-    "column": 1,
+    "column": 4,
     "line": 19,
     "rule": "jest/no-identical-title",
     "severity": 2,
@@ -2144,7 +2196,7 @@ Array [
     "severity": 2,
   },
   Object {
-    "column": 1,
+    "column": 4,
     "line": 19,
     "rule": "jest/no-identical-title",
     "severity": 2,
@@ -2179,7 +2231,7 @@ Array [
     "severity": 2,
   },
   Object {
-    "column": 1,
+    "column": 4,
     "line": 19,
     "rule": "jest/no-identical-title",
     "severity": 2,
@@ -2214,7 +2266,7 @@ Array [
     "severity": 2,
   },
   Object {
-    "column": 1,
+    "column": 4,
     "line": 19,
     "rule": "jest/no-identical-title",
     "severity": 2,

test/fixtures/rules/css-modules/.eslintrc.json

@@ -0,0 +1,9 @@
+{
+    "root": true,
+    "extends": [
+        "../../../../es6.js",
+        "../../../../addons/react.js",
+        "../../../../addons/es-modules.js",
+        "../../../../addons/css-modules.js"
+    ]
+}

test/fixtures/rules/css-modules/test-copy.css

@@ -0,0 +1,7 @@
+.foo {
+    color: green;
+}
+
+.bar {
+    color: red;
+}

test/fixtures/rules/css-modules/test.css

@@ -0,0 +1,7 @@
+.foo {
+    color: green;
+}
+
+.bar {
+    color: red;
+}

test/fixtures/rules/css-modules/undefined.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import styles from './test.css';
+
+// `css-modules/no-undef-class` - Alerts when using a CSS class that is not defined
+// ---------------------------------------------------------------------
+// Bad
+(function () {
+    const div = <div className={ styles.undef } />;
+})();
+// Good
+(function () {
+    const div = <div className={ `${styles.foo} ${styles.bar}` } />;
+})();

test/fixtures/rules/css-modules/unused.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import badStyles from './test.css';
+import goodStyles from './test-copy.css';
+
+// `css-modules/no-unused-class` - Alerts whenever a CSS class is not being used
+// ---------------------------------------------------------------------
+// Bad
+(function () {
+    const div = <div className={ badStyles.foo } />;
+})();
+// Good
+// Good
+(function () {
+    const div = <div className={ `${goodStyles.foo} ${goodStyles.bar}` } />;
+})();