Add local eslint rule to enforce naming styles

Author: dominik-zeglen

.eslintrc.json

@@ -7,7 +7,7 @@
   "parserOptions": {
     "sourceType": "module"
   },
-  "plugins": ["@typescript-eslint", "import"],
+  "plugins": ["@typescript-eslint", "import", "local-rules"],
   "rules": {
     "@typescript-eslint/adjacent-overload-signatures": "error",
     "@typescript-eslint/array-type": [
@@ -73,6 +73,7 @@
     "import/no-internal-modules": "off",
     "import/order": "error",
     "linebreak-style": "off",
+    "local-rules/named-styles": "warn",
     "max-classes-per-file": "off",
     "max-len": "off",
     "new-parens": "off",

eslint-local-rules.js

@@ -0,0 +1,5 @@
+"use strict";
+
+module.exports = {
+  "named-styles": require("./lint/rules/named-styles")
+};

lint/rules/named-styles.js

@@ -0,0 +1,26 @@
+module.exports = {
+  create: context => ({
+    CallExpression: (codePath, node) => {
+      if (
+        ["makeStyles", "withStyles"].includes(codePath.callee.name) &&
+        codePath.arguments.length < 2
+      ) {
+        context.report({
+          loc: codePath.callee.loc,
+          messageId:
+            codePath.callee.name === "makeStyles"
+              ? "expectedNameHook"
+              : "expectedNameHoc",
+          node
+        });
+      }
+    }
+  }),
+  meta: {
+    messages: {
+      expectedNameHoc: 'withStyles hook should have "name" property.',
+      expectedNameHook: 'makeStyles hook should have "name" property.'
+    },
+    type: "problem"
+  }
+};

lint/rules/named-styles.test.js

@@ -0,0 +1,58 @@
+const { RuleTester } = require("eslint");
+
+const namedStylesRule = require("./named-styles");
+
+const okCode =
+  'const useStyles = makeStyles( \
+    { \
+      root: { \
+        alignItems: "center", \
+        display: "flex", \
+        height: "100vh", \
+        justifyContent: "center" \
+      } \
+    }, \
+    { name: "LoginLoading" } \
+);';
+
+const badCode = `const useStyles = makeStyles(theme => ({
+    fileField: {
+      display: "none"
+    },
+    image: {
+      height: "100%",
+      objectFit: "contain",
+      userSelect: "none",
+      width: "100%"
+    },
+    imageContainer: {
+      background: "#ffffff",
+      border: "1px solid #eaeaea",
+      borderRadius: theme.spacing(),
+      height: 148,
+      justifySelf: "start",
+      overflow: "hidden",
+      padding: theme.spacing(2),
+      position: "relative",
+      width: 148
+    }
+}));`;
+
+const ruleTester = new RuleTester({
+  parser: require.resolve("@typescript-eslint/parser")
+});
+
+ruleTester.run("named-styles", namedStylesRule, {
+  valid: [
+    {
+      code: okCode
+    }
+  ],
+
+  invalid: [
+    {
+      code: badCode,
+      errors: [{ message: "makeStyles hook should be named." }]
+    }
+  ]
+});

package-lock.json

@@ -120,6 +120,7 @@
     "eslint": "^6.7.1",
     "eslint-loader": "^3.0.2",
     "eslint-plugin-import": "^2.18.2",
+    "eslint-plugin-local-rules": "^0.1.1",
     "eslint-plugin-prefer-arrow": "^1.1.6",
     "file-loader": "^1.1.11",
     "fork-ts-checker-webpack-plugin": "^3.1.1",