@agilebot/eslint-plugin 0.2.5 → 0.3.0

package/dist/index.js

@@ -1,5 +1,5 @@
 /**
- * @license @agilebot/eslint-plugin v0.2.5
+ * @license @agilebot/eslint-plugin v0.3.0
  *
  * Copyright (c) Agilebot, Inc. and its affiliates.
  *
@@ -521,244 +521,524 @@ var noDefault = {
   }
 };
 
-var betterExhaustiveDeps = {
-  meta: {
-    type: 'suggestion',
-    docs: {
-      description:
-        'verifies the list of dependencies for Hooks like useEffect and similar',
-      recommended: true,
-      url: 'https://github.com/facebook/react/issues/14920'
-    },
-    fixable: 'code',
-    hasSuggestions: true,
-    schema: [
+function getBasicIdentifier(node) {
+  if (node.type === 'Identifier') {
+    return node.name;
+  }
+  if (node.type === 'Literal') {
+    return node.value;
+  }
+  if (node.type === 'TemplateLiteral') {
+    if (node.expressions.length > 0) {
+      return null;
+    }
+    return node.quasis[0].value.raw;
+  }
+  return null;
+}
+function getBaseIdentifier(node) {
+  switch (node.type) {
+    case 'Identifier': {
+      return node;
+    }
+    case 'CallExpression': {
+      return getBaseIdentifier(node.callee);
+    }
+    case 'MemberExpression': {
+      return getBaseIdentifier(node.object);
+    }
+  }
+  return null;
+}
+function getStyesObj(node) {
+  const isMakeStyles = node.callee.name === 'makeStyles';
+  const isModernApi =
+    node.callee.type === 'MemberExpression' &&
+    node.callee.property.name === 'create' &&
+    getBaseIdentifier(node.callee.object) &&
+    getBaseIdentifier(node.callee.object).name === 'tss';
+  if (!isMakeStyles && !isModernApi) {
+    return;
+  }
+  const styles = (() => {
+    if (isMakeStyles) {
+      return node.parent.arguments[0];
+    }
+    if (isModernApi) {
+      return node.callee.parent.arguments[0];
+    }
+  })();
+  if (!styles) {
+    return;
+  }
+  switch (styles.type) {
+    case 'ObjectExpression':
+      return styles;
+    case 'ArrowFunctionExpression':
       {
-        type: 'object',
-        additionalProperties: false,
-        enableDangerousAutofixThisMayCauseInfiniteLoops: false,
-        properties: {
-          additionalHooks: {
-            type: 'string'
-          },
-          enableDangerousAutofixThisMayCauseInfiniteLoops: {
-            type: 'boolean'
-          },
-          staticHooks: {
-            type: 'object',
-            additionalProperties: {
-              oneOf: [
-                {
-                  type: 'boolean'
-                },
-                {
-                  type: 'array',
-                  items: {
-                    type: 'boolean'
-                  }
-                },
-                {
-                  type: 'object',
-                  additionalProperties: {
-                    type: 'boolean'
-                  }
-                }
-              ]
-            }
-          },
-          checkMemoizedVariableIsStatic: {
-            type: 'boolean'
+        const { body } = styles;
+        switch (body.type) {
+          case 'ObjectExpression':
+            return body;
+          case 'BlockStatement': {
+            let stylesObj;
+            body.body.forEach(bodyNode => {
+              if (
+                bodyNode.type === 'ReturnStatement' &&
+                bodyNode.argument.type === 'ObjectExpression'
+              ) {
+                stylesObj = bodyNode.argument;
+              }
+            });
+            return stylesObj;
           }
         }
       }
-    ]
+      break;
+  }
+}
+
+var classNaming = {
+  meta: {
+    type: 'problem'
   },
-  create(context) {
-    const additionalHooks =
-      context.options &&
-      context.options[0] &&
-      context.options[0].additionalHooks
-        ? new RegExp(context.options[0].additionalHooks)
-        : undefined;
-    const enableDangerousAutofixThisMayCauseInfiniteLoops =
-      (context.options &&
-        context.options[0] &&
-        context.options[0].enableDangerousAutofixThisMayCauseInfiniteLoops) ||
-      false;
-    const staticHooks =
-      (context.options &&
-        context.options[0] &&
-        context.options[0].staticHooks) ||
-      {};
-    const checkMemoizedVariableIsStatic =
-      (context.options &&
-        context.options[0] &&
-        context.options[0].checkMemoizedVariableIsStatic) ||
-      false;
-    const options = {
-      additionalHooks,
-      enableDangerousAutofixThisMayCauseInfiniteLoops,
-      staticHooks,
-      checkMemoizedVariableIsStatic
-    };
-    function reportProblem(problem) {
-      if (
-        enableDangerousAutofixThisMayCauseInfiniteLoops &&
-        Array.isArray(problem.suggest) &&
-        problem.suggest.length > 0
-      ) {
-        problem.fix = problem.suggest[0].fix;
-      }
-      context.report(problem);
-    }
-    const scopeManager = context.getSourceCode().scopeManager;
-    const setStateCallSites = new WeakMap();
-    const stateVariables = new WeakSet();
-    const stableKnownValueCache = new WeakMap();
-    const functionWithoutCapturedValueCache = new WeakMap();
-    function memoizeWithWeakMap(fn, map) {
-      return function (arg) {
-        if (map.has(arg)) {
-          return map.get(arg);
+  create: function rule(context) {
+    return {
+      CallExpression(node) {
+        const stylesObj = getStyesObj(node);
+        if (stylesObj === undefined) {
+          return;
         }
-        const result = fn(arg);
-        map.set(arg, result);
-        return result;
-      };
-    }
-    function visitFunctionWithDependencies(
-      node,
-      declaredDependenciesNode,
-      reactiveHook,
-      reactiveHookName,
-      isEffect
-    ) {
-      if (isEffect && node.async) {
-        reportProblem({
-          node: node,
-          message:
-            `Effect callbacks are synchronous to prevent race conditions. ` +
-            `Put the async function inside:\n\n` +
-            'useEffect(() => {\n' +
-            '  async function fetchData() {\n' +
-            '    // You can await here\n' +
-            '    const response = await MyAPI.getData(someId);\n' +
-            '    // ...\n' +
-            '  }\n' +
-            '  fetchData();\n' +
-            `}, [someId]); // Or [] if effect doesn't need props or state\n\n` +
-            'Learn more about data fetching with Hooks: https://reactjs.org/link/hooks-data-fetching'
+        stylesObj.properties.forEach(property => {
+          if (property.computed) {
+            return;
+          }
+          if (
+            property.type === 'ExperimentalSpreadProperty' ||
+            property.type === 'SpreadElement'
+          ) {
+            return;
+          }
+          const className = property.key.value || property.key.name;
+          if (!eslintUtils.isCamelCase(className)) {
+            context.report({
+              node: property,
+              message: `Class \`${className}\` must be camelCase in TSS.`
+            });
+          }
         });
       }
-      const scope = scopeManager.acquire(node);
-      const pureScopes = new Set();
-      let componentScope = null;
-      {
-        let currentScope = scope.upper;
-        while (currentScope) {
-          pureScopes.add(currentScope);
-          if (currentScope.type === 'function') {
-            break;
-          }
-          currentScope = currentScope.upper;
-        }
-        if (!currentScope) {
+    };
+  }
+};
+
+var noColorValue = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description:
+        'Enforce the use of color variables instead of color codes within TSS'
+    }
+  },
+  create: function (context) {
+    const parserOptions = context.parserOptions;
+    if (!parserOptions || !parserOptions.project) {
+      return {};
+    }
+    return {
+      CallExpression(node) {
+        const stylesObj = getStyesObj(node);
+        if (!stylesObj) {
           return;
         }
-        componentScope = currentScope;
-      }
-      const isArray = Array.isArray;
-      const memoizedIsStableKnownHookValue = memoizeWithWeakMap(
-        isStableKnownHookValue,
-        stableKnownValueCache
-      );
-      const memoizedIsFunctionWithoutCapturedValues = memoizeWithWeakMap(
-        isFunctionWithoutCapturedValues,
-        functionWithoutCapturedValueCache
-      );
-      function isStableKnownHookValue(resolved) {
-        if (!isArray(resolved.defs)) {
-          return false;
+        function checkColorLiteral(value) {
+          if (value.type === 'Literal' && typeof value.value === 'string') {
+            const colorCodePattern =
+              /#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})|rgb\?\(\s*(\d{1,3}\s*,\s*){2}\d{1,3}(?:\s*,\s*\d*(?:\.\d+)?)?\s*\)/g;
+            const isColorCode = colorCodePattern.test(value.value);
+            if (isColorCode) {
+              context.report({
+                node: value,
+                message: 'Use color variables instead of color codes in TSS.'
+              });
+            }
+          }
         }
-        const def = resolved.defs[0];
-        if (def == null) {
-          return false;
+        function loopStylesObj(obj) {
+          if (obj && obj.type === 'ObjectExpression') {
+            obj.properties.forEach(property => {
+              if (property.type === 'Property' && property.value) {
+                if (property.value.type === 'ObjectExpression') {
+                  loopStylesObj(property.value);
+                } else {
+                  checkColorLiteral(property.value);
+                }
+              }
+            });
+          }
         }
-        if (def.node.type !== 'VariableDeclarator') {
-          return false;
+        loopStylesObj(stylesObj);
+      }
+    };
+  }
+};
+
+var unusedClasses = {
+  meta: {
+    type: 'problem'
+  },
+  create: function rule(context) {
+    const usedClasses = {};
+    const definedClasses = {};
+    return {
+      CallExpression(node) {
+        const stylesObj = getStyesObj(node);
+        if (stylesObj === undefined) {
+          return;
         }
-        let init = def.node.init;
-        if (init == null) {
-          return false;
+        stylesObj.properties.forEach(property => {
+          if (property.computed) {
+            return;
+          }
+          if (
+            property.type === 'ExperimentalSpreadProperty' ||
+            property.type === 'SpreadElement'
+          ) {
+            return;
+          }
+          definedClasses[property.key.value || property.key.name] = property;
+        });
+      },
+      MemberExpression(node) {
+        if (
+          node.object.type === 'Identifier' &&
+          node.object.name === 'classes'
+        ) {
+          const whichClass = getBasicIdentifier(node.property);
+          if (whichClass) {
+            usedClasses[whichClass] = true;
+          }
+          return;
         }
-        while (init.type === 'TSAsExpression') {
-          init = init.expression;
+        const classIdentifier = getBasicIdentifier(node.property);
+        if (!classIdentifier) {
+          return;
         }
-        let declaration = def.node.parent;
-        if (declaration == null) {
-          fastFindReferenceWithParent(componentScope.block, def.node.id);
-          declaration = def.node.parent;
-          if (declaration == null) {
-            return false;
-          }
+        if (classIdentifier !== 'classes') {
+          return;
+        }
+        const { parent } = node;
+        if (parent.type !== 'MemberExpression') {
+          return;
         }
         if (
-          declaration.kind === 'const' &&
-          init.type === 'Literal' &&
-          (typeof init.value === 'string' ||
-            typeof init.value === 'number' ||
-            init.value == null)
+          node.object.object &&
+          node.object.object.type !== 'ThisExpression'
         ) {
-          return true;
+          return;
         }
-        if (init.type !== 'CallExpression') {
-          return false;
+        const propsIdentifier = getBasicIdentifier(parent.object);
+        if (propsIdentifier && propsIdentifier !== 'props') {
+          return;
         }
-        let callee = init.callee;
+        if (!propsIdentifier && parent.object.type !== 'MemberExpression') {
+          return;
+        }
+        if (parent.parent.type === 'MemberExpression') {
+          return;
+        }
+        const parentClassIdentifier = getBasicIdentifier(parent.property);
+        if (parentClassIdentifier) {
+          usedClasses[parentClassIdentifier] = true;
+        }
+      },
+      'Program:exit': () => {
+        Object.keys(definedClasses).forEach(definedClassKey => {
+          if (!usedClasses[definedClassKey]) {
+            context.report({
+              node: definedClasses[definedClassKey],
+              message: `Class \`${definedClassKey}\` is unused`
+            });
+          }
+        });
+      }
+    };
+  }
+};
+
+var noUnnecessaryTemplateLiterals = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'Check if a template string contains only one ${}',
+      recommended: true
+    },
+    fixable: 'code',
+    schema: []
+  },
+  create(context) {
+    return {
+      TemplateLiteral(node) {
+        const code = context.sourceCode.getText(node);
         if (
-          callee.type === 'MemberExpression' &&
-          callee.object.name === 'React' &&
-          callee.property != null &&
-          !callee.computed
+          code.startsWith('`${') &&
+          code.endsWith('}`') &&
+          code.split('${').length === 2
         ) {
-          callee = callee.property;
-        }
-        if (callee.type !== 'Identifier') {
-          return false;
+          context.report({
+            node,
+            message: 'Unnecessary template string with only one ${}.',
+            fix(fixer) {
+              return fixer.replaceText(
+                node,
+                code.substring(3, code.length - 2)
+              );
+            }
+          });
         }
-        const id = def.node.id;
-        const { name } = callee;
-        if (name === 'useRef' && id.type === 'Identifier') {
-          return true;
-        } else if (name === 'useState' || name === 'useReducer') {
-          if (
-            id.type === 'ArrayPattern' &&
-            id.elements.length === 2 &&
-            isArray(resolved.identifiers)
-          ) {
-            if (id.elements[1] === resolved.identifiers[0]) {
-              if (name === 'useState') {
-                const references = resolved.references;
-                let writeCount = 0;
-                for (const reference of references) {
-                  if (reference.isWrite()) {
-                    writeCount++;
+      }
+    };
+  }
+};
+
+var betterExhaustiveDeps = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description:
+        'verifies the list of dependencies for Hooks like useEffect and similar',
+      recommended: true,
+      url: 'https://github.com/facebook/react/issues/14920'
+    },
+    fixable: 'code',
+    hasSuggestions: true,
+    schema: [
+      {
+        type: 'object',
+        additionalProperties: false,
+        enableDangerousAutofixThisMayCauseInfiniteLoops: false,
+        properties: {
+          additionalHooks: {
+            type: 'string'
+          },
+          enableDangerousAutofixThisMayCauseInfiniteLoops: {
+            type: 'boolean'
+          },
+          staticHooks: {
+            type: 'object',
+            additionalProperties: {
+              oneOf: [
+                {
+                  type: 'boolean'
+                },
+                {
+                  type: 'array',
+                  items: {
+                    type: 'boolean'
                   }
-                  if (writeCount > 1) {
-                    return false;
+                },
+                {
+                  type: 'object',
+                  additionalProperties: {
+                    type: 'boolean'
                   }
-                  setStateCallSites.set(reference.identifier, id.elements[0]);
-                }
-              }
-              return true;
-            } else if (id.elements[0] === resolved.identifiers[0]) {
-              if (name === 'useState') {
-                const references = resolved.references;
-                for (const reference of references) {
-                  stateVariables.add(reference.identifier);
                 }
-              }
-              return false;
+              ]
+            }
+          },
+          checkMemoizedVariableIsStatic: {
+            type: 'boolean'
+          }
+        }
+      }
+    ]
+  },
+  create(context) {
+    const additionalHooks =
+      context.options &&
+      context.options[0] &&
+      context.options[0].additionalHooks
+        ? new RegExp(context.options[0].additionalHooks)
+        : undefined;
+    const enableDangerousAutofixThisMayCauseInfiniteLoops =
+      (context.options &&
+        context.options[0] &&
+        context.options[0].enableDangerousAutofixThisMayCauseInfiniteLoops) ||
+      false;
+    const staticHooks =
+      (context.options &&
+        context.options[0] &&
+        context.options[0].staticHooks) ||
+      {};
+    const checkMemoizedVariableIsStatic =
+      (context.options &&
+        context.options[0] &&
+        context.options[0].checkMemoizedVariableIsStatic) ||
+      false;
+    const options = {
+      additionalHooks,
+      enableDangerousAutofixThisMayCauseInfiniteLoops,
+      staticHooks,
+      checkMemoizedVariableIsStatic
+    };
+    function reportProblem(problem) {
+      if (
+        enableDangerousAutofixThisMayCauseInfiniteLoops &&
+        Array.isArray(problem.suggest) &&
+        problem.suggest.length > 0
+      ) {
+        problem.fix = problem.suggest[0].fix;
+      }
+      context.report(problem);
+    }
+    const scopeManager = context.getSourceCode().scopeManager;
+    const setStateCallSites = new WeakMap();
+    const stateVariables = new WeakSet();
+    const stableKnownValueCache = new WeakMap();
+    const functionWithoutCapturedValueCache = new WeakMap();
+    function memoizeWithWeakMap(fn, map) {
+      return function (arg) {
+        if (map.has(arg)) {
+          return map.get(arg);
+        }
+        const result = fn(arg);
+        map.set(arg, result);
+        return result;
+      };
+    }
+    function visitFunctionWithDependencies(
+      node,
+      declaredDependenciesNode,
+      reactiveHook,
+      reactiveHookName,
+      isEffect
+    ) {
+      if (isEffect && node.async) {
+        reportProblem({
+          node: node,
+          message:
+            `Effect callbacks are synchronous to prevent race conditions. ` +
+            `Put the async function inside:\n\n` +
+            'useEffect(() => {\n' +
+            '  async function fetchData() {\n' +
+            '    // You can await here\n' +
+            '    const response = await MyAPI.getData(someId);\n' +
+            '    // ...\n' +
+            '  }\n' +
+            '  fetchData();\n' +
+            `}, [someId]); // Or [] if effect doesn't need props or state\n\n` +
+            'Learn more about data fetching with Hooks: https://reactjs.org/link/hooks-data-fetching'
+        });
+      }
+      const scope = scopeManager.acquire(node);
+      const pureScopes = new Set();
+      let componentScope = null;
+      {
+        let currentScope = scope.upper;
+        while (currentScope) {
+          pureScopes.add(currentScope);
+          if (currentScope.type === 'function') {
+            break;
+          }
+          currentScope = currentScope.upper;
+        }
+        if (!currentScope) {
+          return;
+        }
+        componentScope = currentScope;
+      }
+      const isArray = Array.isArray;
+      const memoizedIsStableKnownHookValue = memoizeWithWeakMap(
+        isStableKnownHookValue,
+        stableKnownValueCache
+      );
+      const memoizedIsFunctionWithoutCapturedValues = memoizeWithWeakMap(
+        isFunctionWithoutCapturedValues,
+        functionWithoutCapturedValueCache
+      );
+      function isStableKnownHookValue(resolved) {
+        if (!isArray(resolved.defs)) {
+          return false;
+        }
+        const def = resolved.defs[0];
+        if (def == null) {
+          return false;
+        }
+        if (def.node.type !== 'VariableDeclarator') {
+          return false;
+        }
+        let init = def.node.init;
+        if (init == null) {
+          return false;
+        }
+        while (init.type === 'TSAsExpression') {
+          init = init.expression;
+        }
+        let declaration = def.node.parent;
+        if (declaration == null) {
+          fastFindReferenceWithParent(componentScope.block, def.node.id);
+          declaration = def.node.parent;
+          if (declaration == null) {
+            return false;
+          }
+        }
+        if (
+          declaration.kind === 'const' &&
+          init.type === 'Literal' &&
+          (typeof init.value === 'string' ||
+            typeof init.value === 'number' ||
+            init.value == null)
+        ) {
+          return true;
+        }
+        if (init.type !== 'CallExpression') {
+          return false;
+        }
+        let callee = init.callee;
+        if (
+          callee.type === 'MemberExpression' &&
+          callee.object.name === 'React' &&
+          callee.property != null &&
+          !callee.computed
+        ) {
+          callee = callee.property;
+        }
+        if (callee.type !== 'Identifier') {
+          return false;
+        }
+        const id = def.node.id;
+        const { name } = callee;
+        if (name === 'useRef' && id.type === 'Identifier') {
+          return true;
+        } else if (name === 'useState' || name === 'useReducer') {
+          if (
+            id.type === 'ArrayPattern' &&
+            id.elements.length === 2 &&
+            isArray(resolved.identifiers)
+          ) {
+            if (id.elements[1] === resolved.identifiers[0]) {
+              if (name === 'useState') {
+                const references = resolved.references;
+                let writeCount = 0;
+                for (const reference of references) {
+                  if (reference.isWrite()) {
+                    writeCount++;
+                  }
+                  if (writeCount > 1) {
+                    return false;
+                  }
+                  setStateCallSites.set(reference.identifier, id.elements[0]);
+                }
+              }
+              return true;
+            } else if (id.elements[0] === resolved.identifiers[0]) {
+              if (name === 'useState') {
+                const references = resolved.references;
+                for (const reference of references) {
+                  stateVariables.add(reference.identifier);
+                }
+              }
+              return false;
             }
           }
         } else if (name === 'useTransition') {
@@ -1531,1003 +1811,723 @@ var betterExhaustiveDeps = {
         reportProblem({
           node: reactiveHook,
           message:
-            `React Hook ${reactiveHookName} requires an effect callback. ` +
-            `Did you forget to pass a callback to the hook?`
-        });
-        return;
-      }
-      if (!declaredDependenciesNode && !isEffect) {
-        if (
-          reactiveHookName === 'useMemo' ||
-          reactiveHookName === 'useCallback'
-        ) {
-          reportProblem({
-            node: reactiveHook,
-            message:
-              `React Hook ${reactiveHookName} does nothing when called with ` +
-              `only one argument. Did you forget to pass an array of ` +
-              `dependencies?`
-          });
-        }
-        return;
-      }
-      switch (callback.type) {
-        case 'FunctionExpression':
-        case 'ArrowFunctionExpression':
-          visitFunctionWithDependencies(
-            callback,
-            declaredDependenciesNode,
-            reactiveHook,
-            reactiveHookName,
-            isEffect
-          );
-          return;
-        case 'Identifier':
-          if (!declaredDependenciesNode) {
-            return;
-          }
-          if (
-            declaredDependenciesNode.elements &&
-            declaredDependenciesNode.elements.some(
-              el => el && el.type === 'Identifier' && el.name === callback.name
-            )
-          ) {
-            return;
-          }
-          const variable = context.getScope().set.get(callback.name);
-          if (variable == null || variable.defs == null) {
-            return;
-          }
-          const def = variable.defs[0];
-          if (!def || !def.node) {
-            break;
-          }
-          if (def.type !== 'Variable' && def.type !== 'FunctionName') {
-            break;
-          }
-          switch (def.node.type) {
-            case 'FunctionDeclaration':
-              visitFunctionWithDependencies(
-                def.node,
-                declaredDependenciesNode,
-                reactiveHook,
-                reactiveHookName,
-                isEffect
-              );
-              return;
-            case 'VariableDeclarator':
-              const init = def.node.init;
-              if (!init) {
-                break;
-              }
-              switch (init.type) {
-                case 'ArrowFunctionExpression':
-                case 'FunctionExpression':
-                  visitFunctionWithDependencies(
-                    init,
-                    declaredDependenciesNode,
-                    reactiveHook,
-                    reactiveHookName,
-                    isEffect
-                  );
-                  return;
-              }
-              break;
-          }
-          break;
-        default:
-          reportProblem({
-            node: reactiveHook,
-            message:
-              `React Hook ${reactiveHookName} received a function whose dependencies ` +
-              `are unknown. Pass an inline function instead.`
-          });
-          return;
-      }
-      reportProblem({
-        node: reactiveHook,
-        message:
-          `React Hook ${reactiveHookName} has a missing dependency: '${callback.name}'. ` +
-          `Either include it or remove the dependency array.`,
-        suggest: [
-          {
-            desc: `Update the dependencies array to be: [${callback.name}]`,
-            fix(fixer) {
-              return fixer.replaceText(
-                declaredDependenciesNode,
-                `[${callback.name}]`
-              );
-            }
-          }
-        ]
-      });
-    }
-    return {
-      CallExpression: visitCallExpression
-    };
-  }
-};
-function collectRecommendations({
-  dependencies,
-  declaredDependencies,
-  stableDependencies,
-  externalDependencies,
-  isEffect
-}) {
-  const depTree = createDepTree();
-  function createDepTree() {
-    return {
-      isUsed: false,
-      isSatisfiedRecursively: false,
-      isSubtreeUsed: false,
-      children: new Map()
-    };
-  }
-  dependencies.forEach((_, key) => {
-    const node = getOrCreateNodeByPath(depTree, key);
-    node.isUsed = true;
-    markAllParentsByPath(depTree, key, parent => {
-      parent.isSubtreeUsed = true;
-    });
-  });
-  declaredDependencies.forEach(({ key }) => {
-    const node = getOrCreateNodeByPath(depTree, key);
-    node.isSatisfiedRecursively = true;
-  });
-  stableDependencies.forEach(key => {
-    const node = getOrCreateNodeByPath(depTree, key);
-    node.isSatisfiedRecursively = true;
-  });
-  function getOrCreateNodeByPath(rootNode, path) {
-    const keys = path.split('.');
-    let node = rootNode;
-    for (const key of keys) {
-      let child = node.children.get(key);
-      if (!child) {
-        child = createDepTree();
-        node.children.set(key, child);
-      }
-      node = child;
-    }
-    return node;
-  }
-  function markAllParentsByPath(rootNode, path, fn) {
-    const keys = path.split('.');
-    let node = rootNode;
-    for (const key of keys) {
-      const child = node.children.get(key);
-      if (!child) {
-        return;
-      }
-      fn(child);
-      node = child;
-    }
-  }
-  const missingDependencies = new Set();
-  const satisfyingDependencies = new Set();
-  scanTreeRecursively(
-    depTree,
-    missingDependencies,
-    satisfyingDependencies,
-    key => key
-  );
-  function scanTreeRecursively(node, missingPaths, satisfyingPaths, keyToPath) {
-    node.children.forEach((child, key) => {
-      const path = keyToPath(key);
-      if (child.isSatisfiedRecursively) {
-        if (child.isSubtreeUsed) {
-          satisfyingPaths.add(path);
-        }
-        return;
-      }
-      if (child.isUsed) {
-        missingPaths.add(path);
-        return;
-      }
-      scanTreeRecursively(
-        child,
-        missingPaths,
-        satisfyingPaths,
-        childKey => path + '.' + childKey
-      );
-    });
-  }
-  const suggestedDependencies = [];
-  const unnecessaryDependencies = new Set();
-  const duplicateDependencies = new Set();
-  declaredDependencies.forEach(({ key }) => {
-    if (satisfyingDependencies.has(key)) {
-      if (!suggestedDependencies.includes(key)) {
-        suggestedDependencies.push(key);
-      } else {
-        duplicateDependencies.add(key);
-      }
-    } else if (
-      isEffect &&
-      !key.endsWith('.current') &&
-      !externalDependencies.has(key)
-    ) {
-      if (!suggestedDependencies.includes(key)) {
-        suggestedDependencies.push(key);
-      }
-    } else {
-      unnecessaryDependencies.add(key);
-    }
-  });
-  missingDependencies.forEach(key => {
-    suggestedDependencies.push(key);
-  });
-  return {
-    suggestedDependencies,
-    unnecessaryDependencies,
-    duplicateDependencies,
-    missingDependencies
-  };
-}
-function getConstructionExpressionType(node) {
-  switch (node.type) {
-    case 'ObjectExpression':
-      return 'object';
-    case 'ArrayExpression':
-      return 'array';
-    case 'ArrowFunctionExpression':
-    case 'FunctionExpression':
-      return 'function';
-    case 'ClassExpression':
-      return 'class';
-    case 'ConditionalExpression':
-      if (
-        getConstructionExpressionType(node.consequent) != null ||
-        getConstructionExpressionType(node.alternate) != null
-      ) {
-        return 'conditional';
-      }
-      return null;
-    case 'LogicalExpression':
-      if (
-        getConstructionExpressionType(node.left) != null ||
-        getConstructionExpressionType(node.right) != null
-      ) {
-        return 'logical expression';
-      }
-      return null;
-    case 'JSXFragment':
-      return 'JSX fragment';
-    case 'JSXElement':
-      return 'JSX element';
-    case 'AssignmentExpression':
-      if (getConstructionExpressionType(node.right) != null) {
-        return 'assignment expression';
-      }
-      return null;
-    case 'NewExpression':
-      return 'object construction';
-    case 'Literal':
-      if (node.value instanceof RegExp) {
-        return 'regular expression';
-      }
-      return null;
-    case 'TypeCastExpression':
-      return getConstructionExpressionType(node.expression);
-    case 'TSAsExpression':
-      return getConstructionExpressionType(node.expression);
-  }
-  return null;
-}
-function scanForConstructions({
-  declaredDependencies,
-  declaredDependenciesNode,
-  componentScope,
-  scope
-}) {
-  const constructions = declaredDependencies
-    .map(({ key }) => {
-      const ref = componentScope.variables.find(v => v.name === key);
-      if (ref == null) {
-        return null;
-      }
-      const node = ref.defs[0];
-      if (node == null) {
-        return null;
-      }
-      if (
-        node.type === 'Variable' &&
-        node.node.type === 'VariableDeclarator' &&
-        node.node.id.type === 'Identifier' &&
-        node.node.init != null
-      ) {
-        const constantExpressionType = getConstructionExpressionType(
-          node.node.init
-        );
-        if (constantExpressionType != null) {
-          return [ref, constantExpressionType];
-        }
-      }
-      if (
-        node.type === 'FunctionName' &&
-        node.node.type === 'FunctionDeclaration'
-      ) {
-        return [ref, 'function'];
-      }
-      if (node.type === 'ClassName' && node.node.type === 'ClassDeclaration') {
-        return [ref, 'class'];
-      }
-      return null;
-    })
-    .filter(Boolean);
-  function isUsedOutsideOfHook(ref) {
-    let foundWriteExpr = false;
-    for (let i = 0; i < ref.references.length; i++) {
-      const reference = ref.references[i];
-      if (reference.writeExpr) {
-        if (foundWriteExpr) {
-          return true;
-        }
-        foundWriteExpr = true;
-        continue;
-      }
-      let currentScope = reference.from;
-      while (currentScope !== scope && currentScope != null) {
-        currentScope = currentScope.upper;
-      }
-      if (
-        currentScope !== scope &&
-        !isAncestorNodeOf(declaredDependenciesNode, reference.identifier)
-      ) {
-        return true;
-      }
-    }
-    return false;
-  }
-  return constructions.map(([ref, depType]) => ({
-    construction: ref.defs[0],
-    depType,
-    isUsedOutsideOfHook: isUsedOutsideOfHook(ref)
-  }));
-}
-function getDependency(node) {
-  if (
-    (node.parent.type === 'MemberExpression' ||
-      node.parent.type === 'OptionalMemberExpression') &&
-    node.parent.object === node &&
-    node.parent.property.name !== 'current' &&
-    !node.parent.computed &&
-    !(
-      node.parent.parent != null &&
-      (node.parent.parent.type === 'CallExpression' ||
-        node.parent.parent.type === 'OptionalCallExpression') &&
-      node.parent.parent.callee === node.parent
-    )
-  ) {
-    return getDependency(node.parent);
-  } else if (
-    node.type === 'MemberExpression' &&
-    node.parent &&
-    node.parent.type === 'AssignmentExpression' &&
-    node.parent.left === node
-  ) {
-    return node.object;
-  }
-  return node;
-}
-function markNode(node, optionalChains, result) {
-  if (optionalChains) {
-    if (node.optional) {
-      if (!optionalChains.has(result)) {
-        optionalChains.set(result, true);
-      }
-    } else {
-      optionalChains.set(result, false);
-    }
-  }
-}
-function analyzePropertyChain(node, optionalChains) {
-  if (node.type === 'Identifier' || node.type === 'JSXIdentifier') {
-    const result = node.name;
-    if (optionalChains) {
-      optionalChains.set(result, false);
-    }
-    return result;
-  } else if (node.type === 'MemberExpression' && !node.computed) {
-    const object = analyzePropertyChain(node.object, optionalChains);
-    const property = analyzePropertyChain(node.property, null);
-    const result = `${object}.${property}`;
-    markNode(node, optionalChains, result);
-    return result;
-  } else if (node.type === 'OptionalMemberExpression' && !node.computed) {
-    const object = analyzePropertyChain(node.object, optionalChains);
-    const property = analyzePropertyChain(node.property, null);
-    const result = `${object}.${property}`;
-    markNode(node, optionalChains, result);
-    return result;
-  } else if (node.type === 'ChainExpression' && !node.computed) {
-    const expression = node.expression;
-    if (expression.type === 'CallExpression') {
-      throw new Error(`Unsupported node type: ${expression.type}`);
-    }
-    const object = analyzePropertyChain(expression.object, optionalChains);
-    const property = analyzePropertyChain(expression.property, null);
-    const result = `${object}.${property}`;
-    markNode(expression, optionalChains, result);
-    return result;
-  }
-  throw new Error(`Unsupported node type: ${node.type}`);
-}
-function getNodeWithoutReactNamespace(node) {
-  if (
-    node.type === 'MemberExpression' &&
-    node.object.type === 'Identifier' &&
-    node.object.name === 'React' &&
-    node.property.type === 'Identifier' &&
-    !node.computed
-  ) {
-    return node.property;
-  }
-  return node;
-}
-function getReactiveHookCallbackIndex(calleeNode, options) {
-  const node = getNodeWithoutReactNamespace(calleeNode);
-  if (node.type !== 'Identifier') {
-    return -1;
-  }
-  switch (node.name) {
-    case 'useEffect':
-    case 'useLayoutEffect':
-    case 'useCallback':
-    case 'useMemo':
-      return 0;
-    case 'useImperativeHandle':
-      return 1;
-    default:
-      if (node === calleeNode && options && options.additionalHooks) {
-        let name;
-        try {
-          name = analyzePropertyChain(node, null);
-        } catch (err) {
-          if (/Unsupported node type/.test(err.message)) {
-            return 0;
-          }
-          throw err;
-        }
-        return options.additionalHooks.test(name) ? 0 : -1;
-      }
-      return -1;
-  }
-}
-function fastFindReferenceWithParent(start, target) {
-  const queue = [start];
-  let item = null;
-  while (queue.length > 0) {
-    item = queue.shift();
-    if (isSameIdentifier(item, target)) {
-      return item;
-    }
-    if (!isAncestorNodeOf(item, target)) {
-      continue;
-    }
-    for (const [key, value] of Object.entries(item)) {
-      if (key === 'parent') {
-        continue;
-      }
-      if (isNodeLike(value)) {
-        value.parent = item;
-        queue.push(value);
-      } else if (Array.isArray(value)) {
-        value.forEach(val => {
-          if (isNodeLike(val)) {
-            val.parent = item;
-            queue.push(val);
-          }
-        });
-      }
-    }
-  }
-  return null;
-}
-function joinEnglish(arr) {
-  let s = '';
-  for (let i = 0; i < arr.length; i++) {
-    s += arr[i];
-    if (i === 0 && arr.length === 2) {
-      s += ' and ';
-    } else if (i === arr.length - 2 && arr.length > 2) {
-      s += ', and ';
-    } else if (i < arr.length - 1) {
-      s += ', ';
-    }
-  }
-  return s;
-}
-function isNodeLike(val) {
-  return (
-    typeof val === 'object' &&
-    val != null &&
-    !Array.isArray(val) &&
-    typeof val.type === 'string'
-  );
-}
-function isSameIdentifier(a, b) {
-  return (
-    (a.type === 'Identifier' || a.type === 'JSXIdentifier') &&
-    a.type === b.type &&
-    a.name === b.name &&
-    a.range[0] === b.range[0] &&
-    a.range[1] === b.range[1]
-  );
-}
-function isAncestorNodeOf(a, b) {
-  return a.range[0] <= b.range[0] && a.range[1] >= b.range[1];
-}
-
-const Components = require('eslint-plugin-react/lib/util/Components');
-var hookUseRef = {
-  meta: {
-    docs: {
-      description: 'Ensure naming of useRef hook value.',
-      recommended: false
-    },
-    schema: [],
-    type: 'suggestion',
-    hasSuggestions: true
-  },
-  create: Components.detect((context, component, util) => ({
-    CallExpression(node) {
-      const isImmediateReturn =
-        node.parent && node.parent.type === 'ReturnStatement';
-      if (isImmediateReturn || !util.isReactHookCall(node, ['useRef'])) {
-        return;
-      }
-      if (node.parent.id.type !== 'Identifier') {
-        return;
-      }
-      const variable = node.parent.id.name;
-      if (!variable.endsWith('Ref')) {
-        context.report({
-          node: node,
-          message: 'useRef call is not end with "Ref"'
+            `React Hook ${reactiveHookName} requires an effect callback. ` +
+            `Did you forget to pass a callback to the hook?`
         });
+        return;
       }
-    }
-  }))
-};
-
-function* updateImportStatement(context, fixer, key) {
-  const sourceCode = context.sourceCode;
-  const importNode = sourceCode.ast.body.find(
-    node => node.type === 'ImportDeclaration' && node.source.value === 'react'
-  );
-  if (!importNode) {
-    yield fixer.insertTextBefore(
-      sourceCode.ast.body[0],
-      `import { ${key} } from 'react';\n`
-    );
-    return;
-  }
-  if (
-    importNode.specifiers.length === 1 &&
-    importNode.specifiers[0].type === 'ImportDefaultSpecifier'
-  ) {
-    yield fixer.insertTextAfter(importNode.specifiers[0], `, { ${key} }`);
-    return;
-  }
-  const alreadyImportedKeys = importNode.specifiers
-    .filter(specifier => specifier.type === 'ImportSpecifier')
-    .map(specifier => specifier.imported.name);
-  if (alreadyImportedKeys.includes(key)) {
-    return;
-  }
-  yield fixer.insertTextAfter([...importNode.specifiers].pop(), `, ${key}`);
-}
-var preferNamedPropertyAccess = utils.ESLintUtils.RuleCreator.withoutDocs({
-  defaultOptions: [],
-  meta: {
-    type: 'layout',
-    fixable: 'code',
-    docs: {
-      description:
-        'Enforce importing each member of React namespace separately instead of accessing them through React namespace'
-    },
-    messages: {
-      illegalReactPropertyAccess:
-        'Illegal React property access: {{name}}. Use named import instead.'
-    },
-    schema: []
-  },
-  create(context) {
-    return {
-      TSQualifiedName(node) {
+      if (!declaredDependenciesNode && !isEffect) {
         if (
-          ('name' in node.left && node.left.name !== 'React') ||
-          ('name' in node.right && node.right.name.endsWith('Event'))
+          reactiveHookName === 'useMemo' ||
+          reactiveHookName === 'useCallback'
         ) {
-          return;
+          reportProblem({
+            node: reactiveHook,
+            message:
+              `React Hook ${reactiveHookName} does nothing when called with ` +
+              `only one argument. Did you forget to pass an array of ` +
+              `dependencies?`
+          });
         }
-        context.report({
-          node,
-          messageId: 'illegalReactPropertyAccess',
-          data: {
-            name: node.right.name
-          },
-          *fix(fixer) {
-            yield fixer.replaceText(node, node.right.name);
-            yield* updateImportStatement(context, fixer, node.right.name);
-          }
-        });
-      },
-      MemberExpression(node) {
-        if (node.object.name !== 'React') {
+        return;
+      }
+      switch (callback.type) {
+        case 'FunctionExpression':
+        case 'ArrowFunctionExpression':
+          visitFunctionWithDependencies(
+            callback,
+            declaredDependenciesNode,
+            reactiveHook,
+            reactiveHookName,
+            isEffect
+          );
           return;
-        }
-        context.report({
-          node,
-          messageId: 'illegalReactPropertyAccess',
-          data: {
-            name: node.property.name
-          },
-          *fix(fixer) {
-            yield fixer.replaceText(node, node.property.name);
-            yield* updateImportStatement(context, fixer, node.property.name);
+        case 'Identifier':
+          if (!declaredDependenciesNode) {
+            return;
           }
-        });
+          if (
+            declaredDependenciesNode.elements &&
+            declaredDependenciesNode.elements.some(
+              el => el && el.type === 'Identifier' && el.name === callback.name
+            )
+          ) {
+            return;
+          }
+          const variable = context.getScope().set.get(callback.name);
+          if (variable == null || variable.defs == null) {
+            return;
+          }
+          const def = variable.defs[0];
+          if (!def || !def.node) {
+            break;
+          }
+          if (def.type !== 'Variable' && def.type !== 'FunctionName') {
+            break;
+          }
+          switch (def.node.type) {
+            case 'FunctionDeclaration':
+              visitFunctionWithDependencies(
+                def.node,
+                declaredDependenciesNode,
+                reactiveHook,
+                reactiveHookName,
+                isEffect
+              );
+              return;
+            case 'VariableDeclarator':
+              const init = def.node.init;
+              if (!init) {
+                break;
+              }
+              switch (init.type) {
+                case 'ArrowFunctionExpression':
+                case 'FunctionExpression':
+                  visitFunctionWithDependencies(
+                    init,
+                    declaredDependenciesNode,
+                    reactiveHook,
+                    reactiveHookName,
+                    isEffect
+                  );
+                  return;
+              }
+              break;
+          }
+          break;
+        default:
+          reportProblem({
+            node: reactiveHook,
+            message:
+              `React Hook ${reactiveHookName} received a function whose dependencies ` +
+              `are unknown. Pass an inline function instead.`
+          });
+          return;
       }
+      reportProblem({
+        node: reactiveHook,
+        message:
+          `React Hook ${reactiveHookName} has a missing dependency: '${callback.name}'. ` +
+          `Either include it or remove the dependency array.`,
+        suggest: [
+          {
+            desc: `Update the dependencies array to be: [${callback.name}]`,
+            fix(fixer) {
+              return fixer.replaceText(
+                declaredDependenciesNode,
+                `[${callback.name}]`
+              );
+            }
+          }
+        ]
+      });
+    }
+    return {
+      CallExpression: visitCallExpression
     };
   }
-});
-
-var preferSxProp = {
-  meta: {
-    docs: {
-      description: 'Prefer using sx prop instead of inline styles',
-      category: 'Best Practices',
-      recommended: false
-    },
-    messages: {
-      preferSxProp:
-        'Avoid using inline styles, use sx prop or tss-react or styled-component instead'
-    },
-    schema: [
-      {
-        type: 'object',
-        properties: {
-          allowedFor: {
-            type: 'array',
-            uniqueItems: true,
-            items: { type: 'string' }
-          }
-        }
+};
+function collectRecommendations({
+  dependencies,
+  declaredDependencies,
+  stableDependencies,
+  externalDependencies,
+  isEffect
+}) {
+  const depTree = createDepTree();
+  function createDepTree() {
+    return {
+      isUsed: false,
+      isSatisfiedRecursively: false,
+      isSubtreeUsed: false,
+      children: new Map()
+    };
+  }
+  dependencies.forEach((_, key) => {
+    const node = getOrCreateNodeByPath(depTree, key);
+    node.isUsed = true;
+    markAllParentsByPath(depTree, key, parent => {
+      parent.isSubtreeUsed = true;
+    });
+  });
+  declaredDependencies.forEach(({ key }) => {
+    const node = getOrCreateNodeByPath(depTree, key);
+    node.isSatisfiedRecursively = true;
+  });
+  stableDependencies.forEach(key => {
+    const node = getOrCreateNodeByPath(depTree, key);
+    node.isSatisfiedRecursively = true;
+  });
+  function getOrCreateNodeByPath(rootNode, path) {
+    const keys = path.split('.');
+    let node = rootNode;
+    for (const key of keys) {
+      let child = node.children.get(key);
+      if (!child) {
+        child = createDepTree();
+        node.children.set(key, child);
+      }
+      node = child;
+    }
+    return node;
+  }
+  function markAllParentsByPath(rootNode, path, fn) {
+    const keys = path.split('.');
+    let node = rootNode;
+    for (const key of keys) {
+      const child = node.children.get(key);
+      if (!child) {
+        return;
       }
-    ]
-  },
-  create(context) {
-    const configuration = context.options[0] || {};
-    const allowedFor = configuration.allowedFor || [];
-    function checkComponent(node) {
-      const parentName = node.parent.name;
-      const tag =
-        parentName.name ||
-        `${parentName.object.name}.${parentName.property.name}`;
-      const componentName = parentName.name || parentName.property.name;
-      if (
-        componentName &&
-        typeof componentName[0] === 'string' &&
-        componentName[0] !== componentName[0].toUpperCase()
-      ) {
+      fn(child);
+      node = child;
+    }
+  }
+  const missingDependencies = new Set();
+  const satisfyingDependencies = new Set();
+  scanTreeRecursively(
+    depTree,
+    missingDependencies,
+    satisfyingDependencies,
+    key => key
+  );
+  function scanTreeRecursively(node, missingPaths, satisfyingPaths, keyToPath) {
+    node.children.forEach((child, key) => {
+      const path = keyToPath(key);
+      if (child.isSatisfiedRecursively) {
+        if (child.isSubtreeUsed) {
+          satisfyingPaths.add(path);
+        }
         return;
       }
-      if (allowedFor.includes(tag)) {
+      if (child.isUsed) {
+        missingPaths.add(path);
         return;
       }
-      const prop = node.name.name;
-      if (prop === 'style') {
-        context.report({
-          node,
-          messageId: 'preferSxProp'
-        });
+      scanTreeRecursively(
+        child,
+        missingPaths,
+        satisfyingPaths,
+        childKey => path + '.' + childKey
+      );
+    });
+  }
+  const suggestedDependencies = [];
+  const unnecessaryDependencies = new Set();
+  const duplicateDependencies = new Set();
+  declaredDependencies.forEach(({ key }) => {
+    if (satisfyingDependencies.has(key)) {
+      if (!suggestedDependencies.includes(key)) {
+        suggestedDependencies.push(key);
+      } else {
+        duplicateDependencies.add(key);
+      }
+    } else if (
+      isEffect &&
+      !key.endsWith('.current') &&
+      !externalDependencies.has(key)
+    ) {
+      if (!suggestedDependencies.includes(key)) {
+        suggestedDependencies.push(key);
       }
+    } else {
+      unnecessaryDependencies.add(key);
     }
-    function checkDOMNodes(node) {
-      const tag = node.parent.name.name;
+  });
+  missingDependencies.forEach(key => {
+    suggestedDependencies.push(key);
+  });
+  return {
+    suggestedDependencies,
+    unnecessaryDependencies,
+    duplicateDependencies,
+    missingDependencies
+  };
+}
+function getConstructionExpressionType(node) {
+  switch (node.type) {
+    case 'ObjectExpression':
+      return 'object';
+    case 'ArrayExpression':
+      return 'array';
+    case 'ArrowFunctionExpression':
+    case 'FunctionExpression':
+      return 'function';
+    case 'ClassExpression':
+      return 'class';
+    case 'ConditionalExpression':
       if (
-        !(tag && typeof tag === 'string' && tag[0] !== tag[0].toUpperCase())
+        getConstructionExpressionType(node.consequent) != null ||
+        getConstructionExpressionType(node.alternate) != null
       ) {
-        return;
+        return 'conditional';
       }
-      if (allowedFor.includes(tag)) {
-        return;
+      return null;
+    case 'LogicalExpression':
+      if (
+        getConstructionExpressionType(node.left) != null ||
+        getConstructionExpressionType(node.right) != null
+      ) {
+        return 'logical expression';
       }
-      const prop = node.name.name;
-      if (prop === 'style') {
-        context.report({
-          node,
-          messageId: 'preferSxProp'
-        });
+      return null;
+    case 'JSXFragment':
+      return 'JSX fragment';
+    case 'JSXElement':
+      return 'JSX element';
+    case 'AssignmentExpression':
+      if (getConstructionExpressionType(node.right) != null) {
+        return 'assignment expression';
       }
-    }
-    return {
-      JSXAttribute(node) {
-        checkComponent(node);
-        checkDOMNodes(node);
+      return null;
+    case 'NewExpression':
+      return 'object construction';
+    case 'Literal':
+      if (node.value instanceof RegExp) {
+        return 'regular expression';
       }
-    };
+      return null;
+    case 'TypeCastExpression':
+      return getConstructionExpressionType(node.expression);
+    case 'TSAsExpression':
+      return getConstructionExpressionType(node.expression);
   }
-};
-
-var noUnnecessaryTemplateLiterals = {
-  meta: {
-    type: 'problem',
-    docs: {
-      description: 'Check if a template string contains only one ${}',
-      recommended: true
-    },
-    fixable: 'code',
-    schema: []
-  },
-  create(context) {
-    return {
-      TemplateLiteral(node) {
-        const code = context.sourceCode.getText(node);
-        if (
-          code.startsWith('`${') &&
-          code.endsWith('}`') &&
-          code.split('${').length === 2
-        ) {
-          context.report({
-            node,
-            message: 'Unnecessary template string with only one ${}.',
-            fix(fixer) {
-              return fixer.replaceText(
-                node,
-                code.substring(3, code.length - 2)
-              );
-            }
-          });
+  return null;
+}
+function scanForConstructions({
+  declaredDependencies,
+  declaredDependenciesNode,
+  componentScope,
+  scope
+}) {
+  const constructions = declaredDependencies
+    .map(({ key }) => {
+      const ref = componentScope.variables.find(v => v.name === key);
+      if (ref == null) {
+        return null;
+      }
+      const node = ref.defs[0];
+      if (node == null) {
+        return null;
+      }
+      if (
+        node.type === 'Variable' &&
+        node.node.type === 'VariableDeclarator' &&
+        node.node.id.type === 'Identifier' &&
+        node.node.init != null
+      ) {
+        const constantExpressionType = getConstructionExpressionType(
+          node.node.init
+        );
+        if (constantExpressionType != null) {
+          return [ref, constantExpressionType];
         }
       }
-    };
-  }
-};
-
-function getBasicIdentifier(node) {
-  if (node.type === 'Identifier') {
-    return node.name;
+      if (
+        node.type === 'FunctionName' &&
+        node.node.type === 'FunctionDeclaration'
+      ) {
+        return [ref, 'function'];
+      }
+      if (node.type === 'ClassName' && node.node.type === 'ClassDeclaration') {
+        return [ref, 'class'];
+      }
+      return null;
+    })
+    .filter(Boolean);
+  function isUsedOutsideOfHook(ref) {
+    let foundWriteExpr = false;
+    for (let i = 0; i < ref.references.length; i++) {
+      const reference = ref.references[i];
+      if (reference.writeExpr) {
+        if (foundWriteExpr) {
+          return true;
+        }
+        foundWriteExpr = true;
+        continue;
+      }
+      let currentScope = reference.from;
+      while (currentScope !== scope && currentScope != null) {
+        currentScope = currentScope.upper;
+      }
+      if (
+        currentScope !== scope &&
+        !isAncestorNodeOf(declaredDependenciesNode, reference.identifier)
+      ) {
+        return true;
+      }
+    }
+    return false;
   }
-  if (node.type === 'Literal') {
-    return node.value;
+  return constructions.map(([ref, depType]) => ({
+    construction: ref.defs[0],
+    depType,
+    isUsedOutsideOfHook: isUsedOutsideOfHook(ref)
+  }));
+}
+function getDependency(node) {
+  if (
+    (node.parent.type === 'MemberExpression' ||
+      node.parent.type === 'OptionalMemberExpression') &&
+    node.parent.object === node &&
+    node.parent.property.name !== 'current' &&
+    !node.parent.computed &&
+    !(
+      node.parent.parent != null &&
+      (node.parent.parent.type === 'CallExpression' ||
+        node.parent.parent.type === 'OptionalCallExpression') &&
+      node.parent.parent.callee === node.parent
+    )
+  ) {
+    return getDependency(node.parent);
+  } else if (
+    node.type === 'MemberExpression' &&
+    node.parent &&
+    node.parent.type === 'AssignmentExpression' &&
+    node.parent.left === node
+  ) {
+    return node.object;
   }
-  if (node.type === 'TemplateLiteral') {
-    if (node.expressions.length > 0) {
-      return null;
+  return node;
+}
+function markNode(node, optionalChains, result) {
+  if (optionalChains) {
+    if (node.optional) {
+      if (!optionalChains.has(result)) {
+        optionalChains.set(result, true);
+      }
+    } else {
+      optionalChains.set(result, false);
     }
-    return node.quasis[0].value.raw;
   }
-  return null;
 }
-function getBaseIdentifier(node) {
-  switch (node.type) {
-    case 'Identifier': {
-      return node;
-    }
-    case 'CallExpression': {
-      return getBaseIdentifier(node.callee);
+function analyzePropertyChain(node, optionalChains) {
+  if (node.type === 'Identifier' || node.type === 'JSXIdentifier') {
+    const result = node.name;
+    if (optionalChains) {
+      optionalChains.set(result, false);
     }
-    case 'MemberExpression': {
-      return getBaseIdentifier(node.object);
+    return result;
+  } else if (node.type === 'MemberExpression' && !node.computed) {
+    const object = analyzePropertyChain(node.object, optionalChains);
+    const property = analyzePropertyChain(node.property, null);
+    const result = `${object}.${property}`;
+    markNode(node, optionalChains, result);
+    return result;
+  } else if (node.type === 'OptionalMemberExpression' && !node.computed) {
+    const object = analyzePropertyChain(node.object, optionalChains);
+    const property = analyzePropertyChain(node.property, null);
+    const result = `${object}.${property}`;
+    markNode(node, optionalChains, result);
+    return result;
+  } else if (node.type === 'ChainExpression' && !node.computed) {
+    const expression = node.expression;
+    if (expression.type === 'CallExpression') {
+      throw new Error(`Unsupported node type: ${expression.type}`);
     }
+    const object = analyzePropertyChain(expression.object, optionalChains);
+    const property = analyzePropertyChain(expression.property, null);
+    const result = `${object}.${property}`;
+    markNode(expression, optionalChains, result);
+    return result;
   }
-  return null;
+  throw new Error(`Unsupported node type: ${node.type}`);
 }
-function getStyesObj(node) {
-  const isMakeStyles = node.callee.name === 'makeStyles';
-  const isModernApi =
-    node.callee.type === 'MemberExpression' &&
-    node.callee.property.name === 'create' &&
-    getBaseIdentifier(node.callee.object) &&
-    getBaseIdentifier(node.callee.object).name === 'tss';
-  if (!isMakeStyles && !isModernApi) {
-    return;
+function getNodeWithoutReactNamespace(node) {
+  if (
+    node.type === 'MemberExpression' &&
+    node.object.type === 'Identifier' &&
+    node.object.name === 'React' &&
+    node.property.type === 'Identifier' &&
+    !node.computed
+  ) {
+    return node.property;
   }
-  const styles = (() => {
-    if (isMakeStyles) {
-      return node.parent.arguments[0];
-    }
-    if (isModernApi) {
-      return node.callee.parent.arguments[0];
-    }
-  })();
-  if (!styles) {
-    return;
+  return node;
+}
+function getReactiveHookCallbackIndex(calleeNode, options) {
+  const node = getNodeWithoutReactNamespace(calleeNode);
+  if (node.type !== 'Identifier') {
+    return -1;
   }
-  switch (styles.type) {
-    case 'ObjectExpression':
-      return styles;
-    case 'ArrowFunctionExpression':
-      {
-        const { body } = styles;
-        switch (body.type) {
-          case 'ObjectExpression':
-            return body;
-          case 'BlockStatement': {
-            let stylesObj;
-            body.body.forEach(bodyNode => {
-              if (
-                bodyNode.type === 'ReturnStatement' &&
-                bodyNode.argument.type === 'ObjectExpression'
-              ) {
-                stylesObj = bodyNode.argument;
-              }
-            });
-            return stylesObj;
+  switch (node.name) {
+    case 'useEffect':
+    case 'useLayoutEffect':
+    case 'useCallback':
+    case 'useMemo':
+      return 0;
+    case 'useImperativeHandle':
+      return 1;
+    default:
+      if (node === calleeNode && options && options.additionalHooks) {
+        let name;
+        try {
+          name = analyzePropertyChain(node, null);
+        } catch (err) {
+          if (/Unsupported node type/.test(err.message)) {
+            return 0;
           }
+          throw err;
         }
+        return options.additionalHooks.test(name) ? 0 : -1;
       }
-      break;
+      return -1;
+  }
+}
+function fastFindReferenceWithParent(start, target) {
+  const queue = [start];
+  let item = null;
+  while (queue.length > 0) {
+    item = queue.shift();
+    if (isSameIdentifier(item, target)) {
+      return item;
+    }
+    if (!isAncestorNodeOf(item, target)) {
+      continue;
+    }
+    for (const [key, value] of Object.entries(item)) {
+      if (key === 'parent') {
+        continue;
+      }
+      if (isNodeLike(value)) {
+        value.parent = item;
+        queue.push(value);
+      } else if (Array.isArray(value)) {
+        value.forEach(val => {
+          if (isNodeLike(val)) {
+            val.parent = item;
+            queue.push(val);
+          }
+        });
+      }
+    }
+  }
+  return null;
+}
+function joinEnglish(arr) {
+  let s = '';
+  for (let i = 0; i < arr.length; i++) {
+    s += arr[i];
+    if (i === 0 && arr.length === 2) {
+      s += ' and ';
+    } else if (i === arr.length - 2 && arr.length > 2) {
+      s += ', and ';
+    } else if (i < arr.length - 1) {
+      s += ', ';
+    }
   }
+  return s;
+}
+function isNodeLike(val) {
+  return (
+    typeof val === 'object' &&
+    val != null &&
+    !Array.isArray(val) &&
+    typeof val.type === 'string'
+  );
+}
+function isSameIdentifier(a, b) {
+  return (
+    (a.type === 'Identifier' || a.type === 'JSXIdentifier') &&
+    a.type === b.type &&
+    a.name === b.name &&
+    a.range[0] === b.range[0] &&
+    a.range[1] === b.range[1]
+  );
+}
+function isAncestorNodeOf(a, b) {
+  return a.range[0] <= b.range[0] && a.range[1] >= b.range[1];
 }
 
-var classNaming = {
+const Components = require('eslint-plugin-react/lib/util/Components');
+var hookUseRef = {
   meta: {
-    type: 'problem'
+    docs: {
+      description: 'Ensure naming of useRef hook value.',
+      recommended: false
+    },
+    schema: [],
+    type: 'suggestion',
+    hasSuggestions: true
   },
-  create: function rule(context) {
-    return {
-      CallExpression(node) {
-        const stylesObj = getStyesObj(node);
-        if (stylesObj === undefined) {
-          return;
-        }
-        stylesObj.properties.forEach(property => {
-          if (property.computed) {
-            return;
-          }
-          if (
-            property.type === 'ExperimentalSpreadProperty' ||
-            property.type === 'SpreadElement'
-          ) {
-            return;
-          }
-          const className = property.key.value || property.key.name;
-          if (!eslintUtils.isCamelCase(className)) {
-            context.report({
-              node: property,
-              message: `Class \`${className}\` must be camelCase in TSS.`
-            });
-          }
+  create: Components.detect((context, component, util) => ({
+    CallExpression(node) {
+      const isImmediateReturn =
+        node.parent && node.parent.type === 'ReturnStatement';
+      if (isImmediateReturn || !util.isReactHookCall(node, ['useRef'])) {
+        return;
+      }
+      if (node.parent.id.type !== 'Identifier') {
+        return;
+      }
+      const variable = node.parent.id.name;
+      if (!variable.endsWith('Ref')) {
+        context.report({
+          node: node,
+          message: 'useRef call is not end with "Ref"'
         });
       }
-    };
-  }
+    }
+  }))
 };
 
-var noColorValue = {
+function* updateImportStatement(context, fixer, key) {
+  const sourceCode = context.sourceCode;
+  const importNode = sourceCode.ast.body.find(
+    node => node.type === 'ImportDeclaration' && node.source.value === 'react'
+  );
+  if (!importNode) {
+    yield fixer.insertTextBefore(
+      sourceCode.ast.body[0],
+      `import { ${key} } from 'react';\n`
+    );
+    return;
+  }
+  if (
+    importNode.specifiers.length === 1 &&
+    importNode.specifiers[0].type === 'ImportDefaultSpecifier'
+  ) {
+    yield fixer.insertTextAfter(importNode.specifiers[0], `, { ${key} }`);
+    return;
+  }
+  const alreadyImportedKeys = importNode.specifiers
+    .filter(specifier => specifier.type === 'ImportSpecifier')
+    .map(specifier => specifier.imported.name);
+  if (alreadyImportedKeys.includes(key)) {
+    return;
+  }
+  yield fixer.insertTextAfter([...importNode.specifiers].pop(), `, ${key}`);
+}
+var preferNamedPropertyAccess = utils.ESLintUtils.RuleCreator.withoutDocs({
+  defaultOptions: [],
   meta: {
-    type: 'problem',
+    type: 'layout',
+    fixable: 'code',
     docs: {
       description:
-        'Enforce the use of color variables instead of color codes within TSS'
-    }
+        'Enforce importing each member of React namespace separately instead of accessing them through React namespace'
+    },
+    messages: {
+      illegalReactPropertyAccess:
+        'Illegal React property access: {{name}}. Use named import instead.'
+    },
+    schema: []
   },
-  create: function (context) {
-    const parserOptions = context.parserOptions;
-    if (!parserOptions || !parserOptions.project) {
-      return {};
-    }
+  create(context) {
     return {
-      CallExpression(node) {
-        const stylesObj = getStyesObj(node);
-        if (!stylesObj) {
+      TSQualifiedName(node) {
+        if (
+          ('name' in node.left && node.left.name !== 'React') ||
+          ('name' in node.right && node.right.name.endsWith('Event'))
+        ) {
           return;
         }
-        function checkColorLiteral(value) {
-          if (value.type === 'Literal' && typeof value.value === 'string') {
-            const colorCodePattern =
-              /#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})|rgb\?\(\s*(\d{1,3}\s*,\s*){2}\d{1,3}(?:\s*,\s*\d*(?:\.\d+)?)?\s*\)/g;
-            const isColorCode = colorCodePattern.test(value.value);
-            if (isColorCode) {
-              context.report({
-                node: value,
-                message: 'Use color variables instead of color codes in TSS.'
-              });
-            }
+        context.report({
+          node,
+          messageId: 'illegalReactPropertyAccess',
+          data: {
+            name: node.right.name
+          },
+          *fix(fixer) {
+            yield fixer.replaceText(node, node.right.name);
+            yield* updateImportStatement(context, fixer, node.right.name);
           }
+        });
+      },
+      MemberExpression(node) {
+        if (node.object.name !== 'React') {
+          return;
         }
-        function loopStylesObj(obj) {
-          if (obj && obj.type === 'ObjectExpression') {
-            obj.properties.forEach(property => {
-              if (property.type === 'Property' && property.value) {
-                if (property.value.type === 'ObjectExpression') {
-                  loopStylesObj(property.value);
-                } else {
-                  checkColorLiteral(property.value);
-                }
-              }
-            });
+        context.report({
+          node,
+          messageId: 'illegalReactPropertyAccess',
+          data: {
+            name: node.property.name
+          },
+          *fix(fixer) {
+            yield fixer.replaceText(node, node.property.name);
+            yield* updateImportStatement(context, fixer, node.property.name);
           }
-        }
-        loopStylesObj(stylesObj);
+        });
       }
     };
   }
-};
+});
 
-var unusedClasses = {
+var preferSxProp = {
   meta: {
-    type: 'problem'
-  },
-  create: function rule(context) {
-    const usedClasses = {};
-    const definedClasses = {};
-    return {
-      CallExpression(node) {
-        const stylesObj = getStyesObj(node);
-        if (stylesObj === undefined) {
-          return;
-        }
-        stylesObj.properties.forEach(property => {
-          if (property.computed) {
-            return;
-          }
-          if (
-            property.type === 'ExperimentalSpreadProperty' ||
-            property.type === 'SpreadElement'
-          ) {
-            return;
-          }
-          definedClasses[property.key.value || property.key.name] = property;
-        });
-      },
-      MemberExpression(node) {
-        if (
-          node.object.type === 'Identifier' &&
-          node.object.name === 'classes'
-        ) {
-          const whichClass = getBasicIdentifier(node.property);
-          if (whichClass) {
-            usedClasses[whichClass] = true;
+    docs: {
+      description: 'Prefer using sx prop instead of inline styles',
+      category: 'Best Practices',
+      recommended: false
+    },
+    messages: {
+      preferSxProp:
+        'Avoid using inline styles, use sx prop or tss-react or styled-component instead'
+    },
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          allowedFor: {
+            type: 'array',
+            uniqueItems: true,
+            items: { type: 'string' }
           }
-          return;
-        }
-        const classIdentifier = getBasicIdentifier(node.property);
-        if (!classIdentifier) {
-          return;
-        }
-        if (classIdentifier !== 'classes') {
-          return;
-        }
-        const { parent } = node;
-        if (parent.type !== 'MemberExpression') {
-          return;
-        }
-        if (
-          node.object.object &&
-          node.object.object.type !== 'ThisExpression'
-        ) {
-          return;
-        }
-        const propsIdentifier = getBasicIdentifier(parent.object);
-        if (propsIdentifier && propsIdentifier !== 'props') {
-          return;
-        }
-        if (!propsIdentifier && parent.object.type !== 'MemberExpression') {
-          return;
-        }
-        if (parent.parent.type === 'MemberExpression') {
-          return;
         }
-        const parentClassIdentifier = getBasicIdentifier(parent.property);
-        if (parentClassIdentifier) {
-          usedClasses[parentClassIdentifier] = true;
-        }
-      },
-      'Program:exit': () => {
-        Object.keys(definedClasses).forEach(definedClassKey => {
-          if (!usedClasses[definedClassKey]) {
-            context.report({
-              node: definedClasses[definedClassKey],
-              message: `Class \`${definedClassKey}\` is unused`
-            });
-          }
+      }
+    ]
+  },
+  create(context) {
+    const configuration = context.options[0] || {};
+    const allowedFor = configuration.allowedFor || [];
+    function checkComponent(node) {
+      const parentName = node.parent.name;
+      const tag =
+        parentName.name ||
+        `${parentName.object.name}.${parentName.property.name}`;
+      const componentName = parentName.name || parentName.property.name;
+      if (
+        componentName &&
+        typeof componentName[0] === 'string' &&
+        componentName[0] !== componentName[0].toUpperCase()
+      ) {
+        return;
+      }
+      if (allowedFor.includes(tag)) {
+        return;
+      }
+      const prop = node.name.name;
+      if (prop === 'style') {
+        context.report({
+          node,
+          messageId: 'preferSxProp'
+        });
+      }
+    }
+    function checkDOMNodes(node) {
+      const tag = node.parent.name.name;
+      if (
+        !(tag && typeof tag === 'string' && tag[0] !== tag[0].toUpperCase())
+      ) {
+        return;
+      }
+      if (allowedFor.includes(tag)) {
+        return;
+      }
+      const prop = node.name.name;
+      if (prop === 'style') {
+        context.report({
+          node,
+          messageId: 'preferSxProp'
         });
       }
+    }
+    return {
+      JSXAttribute(node) {
+        checkComponent(node);
+        checkDOMNodes(node);
+      }
     };
   }
 };