@atlaskit/eslint-plugin-design-system 8.32.0 → 8.32.2

package/dist/es2019/rules/consistent-css-prop-usage/index.js

@@ -8,8 +8,6 @@ import { createLintRule } from '../utils/create-rule';
 import { getFirstSupportedImport } from '../utils/get-first-supported-import';
 import { getModuleOfIdentifier } from '../utils/get-import-node-by-source';
 import { CSS_IN_JS_IMPORTS } from '../utils/is-supported-import';
-// File-level tracking of styles hoisted from the cssAtTopOfModule/cssAtBottomOfModule fixers
-let hoistedCss = [];
 const isDOMElementName = elementName => elementName.charAt(0) !== elementName.charAt(0).toUpperCase() && elementName.charAt(0) === elementName.charAt(0).toLowerCase();
 function isCssCallExpression(node, cssFunctions) {
   cssFunctions = [...cssFunctions, 'cssMap'];
@@ -26,334 +24,352 @@ const getProgramNode = expression => {
   }
   return expression.parent;
 };
+class JSXExpressionLinter {
+  // File-level tracking of styles hoisted from the cssAtTopOfModule/cssAtBottomOfModule fixers.
 
-/**
- * Generates the declarator string when fixing the cssAtTopOfModule/cssAtBottomOfModule cases.
- * When `styles` already exists, `styles_1, styles_2, ..., styles_X` are incrementally created for each unhoisted style.
- * The generated `styles` varibale declaration names must be manually modified to be more informative at the discretion of owning teams.
- */
-const getDeclaratorString = context => {
-  let scope = context.getScope();
-
-  // Get to ModuleScope
-  while (scope && scope.upper && scope.upper.type !== 'global') {
-    var _scope;
-    scope = (_scope = scope) === null || _scope === void 0 ? void 0 : _scope.upper;
+  /**
+   * Traverses and lints a expression found in a JSX css or xcss prop, e.g.
+   * <div css={expressionToLint} />
+   *
+   * @param context The context of the rule. Used to find the current scope and the source code of the file.
+   * @param cssAttributeName Used to encapsulate ObjectExpressions when cssAtTopOfModule/cssAtBottomOfModule violations are triggered.
+   * @param configuration What css-related functions to account for (eg. css, xcss, cssMap), and whether to detect bottom vs top expressions.
+   * @param expression The expression to traverse and lint.
+   */
+  constructor(context, cssAttributeName, configuration, expression) {
+    this.context = context;
+    this.cssAttributeName = cssAttributeName;
+    this.configuration = configuration;
+    this.expression = expression;
+    this.hoistedCss = [];
   }
-  const variables = scope.variables.map(variable => variable.name).concat(hoistedCss);
-  let count = 2;
-  let declaratorName = 'styles';
 
-  // Base case
-  if (!variables.includes(declaratorName)) {
-    return declaratorName;
-  } else {
-    // If styles already exists, increment the number
-    while (variables.includes(`${declaratorName}${count}`)) {
-      count++;
+  /**
+   * Generates the declarator string when fixing the cssAtTopOfModule/cssAtBottomOfModule cases.
+   * When `styles` already exists, `styles_1, styles_2, ..., styles_X` are incrementally created for each unhoisted style.
+   *
+   * The generated `styles` varibale declaration names must be manually modified to be more informative at the discretion of owning teams.
+   */
+  getDeclaratorString() {
+    let scope = this.context.getScope();
+
+    // Get to ModuleScope
+    while (scope && scope.upper && scope.upper.type !== 'global') {
+      var _scope;
+      scope = (_scope = scope) === null || _scope === void 0 ? void 0 : _scope.upper;
     }
-  }
+    const variables = scope.variables.map(variable => variable.name).concat(this.hoistedCss);
+    let count = 2;
+    let declaratorName = 'styles';
 
-  // Keep track of it by adding it to the hoistedCss global array
-  hoistedCss = [...hoistedCss, `${declaratorName}${count}`];
-  return `${declaratorName}${count}`;
-};
-function analyzeIdentifier(context, sourceIdentifier, configuration, cssAttributeName) {
-  var _getIdentifierInParen, _getIdentifierInParen2;
-  const scope = context.getScope();
-  const [identifier] = (_getIdentifierInParen = (_getIdentifierInParen2 = getIdentifierInParentScope(scope, sourceIdentifier.name)) === null || _getIdentifierInParen2 === void 0 ? void 0 : _getIdentifierInParen2.identifiers) !== null && _getIdentifierInParen !== void 0 ? _getIdentifierInParen : [];
-  if (!identifier || !identifier.parent) {
-    // Identifier isn't in the module, skip!
-    return;
-  }
-  if (identifier.parent.type !== 'VariableDeclarator') {
-    // When variable is not in the file or coming from import
-    context.report({
-      node: sourceIdentifier,
-      messageId: 'cssInModule'
-    });
-    return;
-  }
-  if (identifier.parent.parent.parent.type !== 'Program') {
-    // When variable is declared inside the component
-    context.report({
-      node: sourceIdentifier,
-      messageId: configuration.stylesPlacement === 'bottom' ? 'cssAtBottomOfModule' : 'cssAtTopOfModule',
-      fix: fixer => {
-        if (configuration.fixNamesOnly) {
-          return [];
-        }
-        return fixCssNotInModuleScope(fixer, context, configuration, identifier);
+    // Base case
+    if (!variables.includes(declaratorName)) {
+      return declaratorName;
+    } else {
+      // If styles already exists, increment the number
+      while (variables.includes(`${declaratorName}${count}`)) {
+        count++;
       }
-    });
-    return;
+    }
+
+    // Keep track of it by adding it to the hoistedCss global array
+    this.hoistedCss = [...this.hoistedCss, `${declaratorName}${count}`];
+    return `${declaratorName}${count}`;
   }
-  if (identifier.parent && identifier.parent.init && !isCssCallExpression(identifier.parent.init, configuration.cssFunctions)) {
-    // When variable value is not of type css({})
-    const value = identifier.parent.init;
-    if (!value) {
+  analyzeIdentifier(sourceIdentifier) {
+    var _getIdentifierInParen, _getIdentifierInParen2;
+    const scope = this.context.getScope();
+    const [identifier] = (_getIdentifierInParen = (_getIdentifierInParen2 = getIdentifierInParentScope(scope, sourceIdentifier.name)) === null || _getIdentifierInParen2 === void 0 ? void 0 : _getIdentifierInParen2.identifiers) !== null && _getIdentifierInParen !== void 0 ? _getIdentifierInParen : [];
+    if (!identifier || !identifier.parent) {
+      // Identifier isn't in the module, skip!
+      return;
+    }
+    if (identifier.parent.type !== 'VariableDeclarator') {
+      // When variable is not in the file or coming from import
+      this.context.report({
+        node: sourceIdentifier,
+        messageId: 'cssInModule'
+      });
       return;
     }
-    const valueExpression =
-    // @ts-expect-error remove once eslint types are switched to @typescript-eslint
-    value.type === 'TSAsExpression' ? value.expression : value;
-    if (['ObjectExpression', 'TemplateLiteral'].includes(valueExpression.type)) {
-      context.report({
-        node: identifier,
-        messageId: 'cssObjectTypeOnly',
+    if (identifier.parent.parent.parent.type !== 'Program') {
+      // When variable is declared inside the component
+      this.context.report({
+        node: sourceIdentifier,
+        messageId: this.configuration.stylesPlacement === 'bottom' ? 'cssAtBottomOfModule' : 'cssAtTopOfModule',
         fix: fixer => {
-          if (configuration.fixNamesOnly) {
+          if (this.configuration.fixNamesOnly) {
             return [];
           }
-          return addCssFunctionCall(fixer, context, identifier.parent, configuration, cssAttributeName);
+          return this.fixCssNotInModuleScope(fixer, identifier, false);
         }
       });
-    } else {
-      context.report({
-        node: identifier,
-        messageId: 'cssObjectTypeOnly'
-      });
+      return;
     }
-    return;
-  }
-  const spreadProperties = isNodeOfType(identifier.parent.init, 'CallExpression') && findSpreadProperties(identifier.parent.init.arguments[0]);
-  if (spreadProperties) {
-    // TODO: Recursively handle spread items in children properties.
-    spreadProperties.forEach(prop => {
-      context.report({
-        node: prop,
-        messageId: 'cssArrayStylesOnly'
+    if (identifier.parent && identifier.parent.init && !isCssCallExpression(identifier.parent.init, this.configuration.cssFunctions)) {
+      // When variable value is not of type css({})
+      const value = identifier.parent.init;
+      if (!value) {
+        return;
+      }
+      const valueExpression =
+      // @ts-expect-error remove once eslint types are switched to @typescript-eslint
+      value.type === 'TSAsExpression' ? value.expression : value;
+      if (['ObjectExpression', 'TemplateLiteral'].includes(valueExpression.type)) {
+        this.context.report({
+          node: identifier,
+          messageId: 'cssObjectTypeOnly',
+          fix: fixer => {
+            if (this.configuration.fixNamesOnly) {
+              return [];
+            }
+            return this.addCssFunctionCall(fixer, identifier.parent);
+          }
+        });
+      } else {
+        this.context.report({
+          node: identifier,
+          messageId: 'cssObjectTypeOnly'
+        });
+      }
+      return;
+    }
+    const spreadProperties = isNodeOfType(identifier.parent.init, 'CallExpression') && findSpreadProperties(identifier.parent.init.arguments[0]);
+    if (spreadProperties) {
+      // TODO: Recursively handle spread items in children properties.
+      spreadProperties.forEach(prop => {
+        this.context.report({
+          node: prop,
+          messageId: 'cssArrayStylesOnly'
+        });
       });
-    });
+    }
   }
-}
 
-/**
- * Returns a fixer that adds `import { css } from 'import-source'` or
- * `import { xcss } from 'import-source'` to the start of the file, depending
- * on the value of cssAttributeName and importSource.
- */
-const addImportSource = (context, fixer, configuration, cssAttributeName) => {
-  const importSource = cssAttributeName === 'xcss' ? configuration.xcssImportSource : configuration.cssImportSource;
+  /**
+   * Returns a fixer that adds `import { css } from 'import-source'` or
+   * `import { xcss } from 'import-source'` to the start of the file, depending
+   * on the value of cssAttributeName and importSource.
+   */
+  addImportSource(fixer) {
+    const importSource = this.cssAttributeName === 'xcss' ? this.configuration.xcssImportSource : this.configuration.cssImportSource;
 
-  // Add the `import { css } from 'my-css-in-js-library';` statement
-  const packageImport = getFirstSupportedImport(context, [importSource]);
-  if (packageImport) {
-    const addCssImport = Import.insertNamedSpecifiers(packageImport, [cssAttributeName], fixer);
-    if (addCssImport) {
-      return addCssImport;
+    // Add the `import { css } from 'my-css-in-js-library';` statement
+    const packageImport = getFirstSupportedImport(this.context, [importSource]);
+    if (packageImport) {
+      const addCssImport = Import.insertNamedSpecifiers(packageImport, [this.cssAttributeName], fixer);
+      if (addCssImport) {
+        return addCssImport;
+      }
+    } else {
+      return insertAtStartOfFile(fixer, `${insertImportDeclaration(importSource, [this.cssAttributeName])};\n`);
     }
-  } else {
-    return insertAtStartOfFile(fixer, `${insertImportDeclaration(importSource, [cssAttributeName])};\n`);
   }
-};
 
-/**
- * Returns a list of fixes that:
- * - add the `css` or `xcss` function call around the current node.
- * - add an import statement for the package from which `css` is imported
- */
-const addCssFunctionCall = (fixer, context, node, configuration, cssAttributeName) => {
-  const fixes = [];
-  const sourceCode = context.getSourceCode();
-  if (node.type !== 'VariableDeclarator' || !node.init || !cssAttributeName) {
-    return [];
-  }
-  const compiledImportFix = addImportSource(context, fixer, configuration, cssAttributeName);
-  if (compiledImportFix) {
-    fixes.push(compiledImportFix);
-  }
-  const init = node.init;
-  const initString = sourceCode.getText(init);
-  if (node.init.type === 'TemplateLiteral') {
-    fixes.push(fixer.replaceText(init, `${cssAttributeName}${initString}`));
-  } else {
-    fixes.push(fixer.replaceText(init, `${cssAttributeName}(${initString})`));
+  /**
+   * Returns a list of fixes that:
+   * - add the `css` or `xcss` function call around the current node.
+   * - add an import statement for the package from which `css` is imported
+   */
+  addCssFunctionCall(fixer, node) {
+    const fixes = [];
+    const sourceCode = this.context.getSourceCode();
+    if (node.type !== 'VariableDeclarator' || !node.init || !this.cssAttributeName) {
+      return [];
+    }
+    const compiledImportFix = this.addImportSource(fixer);
+    if (compiledImportFix) {
+      fixes.push(compiledImportFix);
+    }
+    const init = node.init;
+    const initString = sourceCode.getText(init);
+    if (node.init.type === 'TemplateLiteral') {
+      fixes.push(fixer.replaceText(init, `${this.cssAttributeName}${initString}`));
+    } else {
+      fixes.push(fixer.replaceText(init, `${this.cssAttributeName}(${initString})`));
+    }
+    return fixes;
   }
-  return fixes;
-};
 
-/**
- * Check if the expression has or potentially has a local variable
- * (as opposed to an imported one), erring on the side ot "yes"
- * when an expression is too complicated to analyse.
- *
- * This is useful because expressions containing local variables
- * cannot be easily hoisted, whereas this is not a problem with imported
- * variables.
- *
- * @param context Context of the rule.
- * @param node Any node that is potentially hoistable.
- * @returns Whether the node potentially has a local variable (and thus is not safe to hoist).
- */
-const potentiallyHasLocalVariable = (context, node) => {
-  let hasPotentiallyLocalVariable = false;
-  const isImportedVariable = identifier => !!getModuleOfIdentifier(context.getSourceCode(), identifier);
-  estraverse.traverse(node, {
-    enter: function (node, _parent) {
-      if (isNodeOfType(node, 'SpreadElement') ||
-      // @ts-expect-error remove once we can be sure that no parser interprets
-      // the spread operator as ExperimentalSpreadProperty anymore
-      isNodeOfType(node, 'ExperimentalSpreadProperty')) {
-        // Spread elements could contain anything... so we don't bother.
-        //
-        // e.g. <div css={css({ ...(!height && { visibility: 'hidden' })} />
-        hasPotentiallyLocalVariable = true;
-        this.break();
-      }
-      if (!isNodeOfType(node, 'Property')) {
-        return;
-      }
-      switch (node.value.type) {
-        case 'Literal':
-          break;
-        case 'Identifier':
-          // e.g. css({ margin: myVariable })
-          if (!isImportedVariable(node.value.name)) {
-            hasPotentiallyLocalVariable = true;
-          }
-          this.break();
-          break;
-        case 'MemberExpression':
-          // e.g. css({ margin: props.color })
-          //      css({ margin: props.media.color })
-          if (node.value.object.type === 'Identifier' && isImportedVariable(node.value.object.name)) {
-            // We found an imported variable, don't do anything.
-          } else {
-            // e.g. css({ margin: [some complicated expression].media.color })
-            // This can potentially get too complex, so we assume there's a local
-            // variable in there somewhere.
-            hasPotentiallyLocalVariable = true;
-          }
+  /**
+   * Check if the expression has or potentially has a local variable
+   * (as opposed to an imported one), erring on the side ot "yes"
+   * when an expression is too complicated to analyse.
+   *
+   * This is useful because expressions containing local variables
+   * cannot be easily hoisted, whereas this is not a problem with imported
+   * variables.
+   *
+   * @param context Context of the rule.
+   * @param node Any node that is potentially hoistable.
+   * @returns Whether the node potentially has a local variable (and thus is not safe to hoist).
+   */
+  potentiallyHasLocalVariable(node) {
+    let hasPotentiallyLocalVariable = false;
+    const isImportedVariable = identifier => !!getModuleOfIdentifier(this.context.getSourceCode(), identifier);
+    estraverse.traverse(node, {
+      enter: function (node, _parent) {
+        if (isNodeOfType(node, 'SpreadElement') ||
+        // @ts-expect-error remove once we can be sure that no parser interprets
+        // the spread operator as ExperimentalSpreadProperty anymore
+        isNodeOfType(node, 'ExperimentalSpreadProperty')) {
+          // Spread elements could contain anything... so we don't bother.
+          //
+          // e.g. <div css={css({ ...(!height && { visibility: 'hidden' })} />
+          hasPotentiallyLocalVariable = true;
           this.break();
-          break;
-        case 'TemplateLiteral':
-          if (!!node.value.expressions.length) {
-            // Too many edge cases here, don't bother...
-            // e.g. css({ animation: `${expandStyles(right, rightExpanded, isExpanded)} 0.2s ease-in-out` });
+        }
+        if (!isNodeOfType(node, 'Property')) {
+          return;
+        }
+        switch (node.value.type) {
+          case 'Literal':
+            break;
+          case 'Identifier':
+            // e.g. css({ margin: myVariable })
+            if (!isImportedVariable(node.value.name)) {
+              hasPotentiallyLocalVariable = true;
+            }
+            this.break();
+            break;
+          case 'MemberExpression':
+            // e.g. css({ margin: props.color })
+            //      css({ margin: props.media.color })
+            if (node.value.object.type === 'Identifier' && isImportedVariable(node.value.object.name)) {
+              // We found an imported variable, don't do anything.
+            } else {
+              // e.g. css({ margin: [some complicated expression].media.color })
+              // This can potentially get too complex, so we assume there's a local
+              // variable in there somewhere.
+              hasPotentiallyLocalVariable = true;
+            }
+            this.break();
+            break;
+          case 'TemplateLiteral':
+            if (!!node.value.expressions.length) {
+              // Too many edge cases here, don't bother...
+              // e.g. css({ animation: `${expandStyles(right, rightExpanded, isExpanded)} 0.2s ease-in-out` });
+              hasPotentiallyLocalVariable = true;
+              this.break();
+            }
+            break;
+          default:
+            // Catch-all for values such as "A && B", "A ? B : C"
             hasPotentiallyLocalVariable = true;
             this.break();
-          }
-          break;
-        default:
-          // Catch-all for values such as "A && B", "A ? B : C"
-          hasPotentiallyLocalVariable = true;
-          this.break();
-          break;
+            break;
+        }
       }
-    }
-  });
-  return hasPotentiallyLocalVariable;
-};
+    });
+    return hasPotentiallyLocalVariable;
+  }
 
-/**
- * Fixer for the cssAtTopOfModule/cssAtBottomOfModule violation cases.
- * This deals with Identifiers and Expressions passed from the traverseExpressionWithConfig() function.
- *
- * @param fixer The ESLint RuleFixer object
- * @param context The context of the rule
- * @param configuration The configuration of the rule, determining whether the fix is implmeneted at the top or bottom of the module
- * @param node Any potentially hoistable node, or an identifier.
- * @param cssAttributeName An optional parameter only added when we fix an ObjectExpression
- */
-const fixCssNotInModuleScope = (fixer, context, configuration, node, cssAttributeName) => {
-  const sourceCode = context.getSourceCode();
+  /**
+   * Fixer for the cssAtTopOfModule/cssAtBottomOfModule violation cases.
+   *
+   * This deals with Identifiers and Expressions passed from the traverseExpressionWithConfig() function.
+   *
+   * @param fixer The ESLint RuleFixer object
+   * @param context The context of the rule
+   * @param configuration The configuration of the rule, determining whether the fix is implmeneted at the top or bottom of the module
+   * @param node Any potentially hoistable node, or an identifier.
+   * @param cssAttributeName An optional parameter only added when we fix an ObjectExpression
+   */
+  fixCssNotInModuleScope(fixer, node, isObjectExpression) {
+    const sourceCode = this.context.getSourceCode();
 
-  // Get the program node in order to properly position the hoisted styles
-  const programNode = getProgramNode(node);
-  let fixerNodePlacement = programNode;
-  if (configuration.stylesPlacement === 'bottom') {
-    // The last value is the bottom of the file
-    fixerNodePlacement = programNode.body[programNode.body.length - 1];
-  } else {
-    // Place after the last ImportDeclaration
-    fixerNodePlacement = programNode.body.length === 1 ? programNode.body[0] : programNode.body.find(node => node.type !== 'ImportDeclaration');
-  }
-  let moduleString;
-  let fixes = [];
-  if (node.type === 'Identifier') {
-    const identifier = node;
-    const declarator = identifier.parent.parent;
-    moduleString = sourceCode.getText(declarator);
-    fixes.push(fixer.remove(declarator));
-  } else {
-    if (potentiallyHasLocalVariable(context, node)) {
-      return [];
+    // Get the program node in order to properly position the hoisted styles
+    const programNode = getProgramNode(node);
+    let fixerNodePlacement = programNode;
+    if (this.configuration.stylesPlacement === 'bottom') {
+      // The last value is the bottom of the file
+      fixerNodePlacement = programNode.body[programNode.body.length - 1];
+    } else {
+      // Place after the last ImportDeclaration
+      fixerNodePlacement = programNode.body.length === 1 ? programNode.body[0] : programNode.body.find(node => node.type !== 'ImportDeclaration');
     }
-    const declarator = getDeclaratorString(context);
-    const text = sourceCode.getText(node);
+    let moduleString;
+    let fixes = [];
+    if (node.type === 'Identifier') {
+      const identifier = node;
+      const declarator = identifier.parent.parent;
+      moduleString = sourceCode.getText(declarator);
+      fixes.push(fixer.remove(declarator));
+    } else {
+      if (this.potentiallyHasLocalVariable(node)) {
+        return [];
+      }
+      const declarator = this.getDeclaratorString();
+      const text = sourceCode.getText(node);
 
-    // If this has been passed, then we know it's an ObjectExpression
-    if (cssAttributeName) {
-      moduleString = `const ${declarator} = ${cssAttributeName}(${text});`;
-      const compiledImportFix = addImportSource(context, fixer, configuration, cssAttributeName);
-      if (compiledImportFix) {
-        fixes.push(compiledImportFix);
+      // If this has been passed, then we know it's an ObjectExpression
+      if (isObjectExpression) {
+        moduleString = `const ${declarator} = ${this.cssAttributeName}(${text});`;
+        const compiledImportFix = this.addImportSource(fixer);
+        if (compiledImportFix) {
+          fixes.push(compiledImportFix);
+        }
+      } else {
+        moduleString = `const ${declarator} = ${text};`;
       }
-    } else {
-      moduleString = `const ${declarator} = ${text};`;
+      fixes.push(fixer.replaceText(node, declarator));
     }
-    fixes.push(fixer.replaceText(node, declarator));
+    return [...fixes,
+    // Insert the node either before or after, depending on the rule configuration
+    this.configuration.stylesPlacement === 'bottom' ? fixer.insertTextAfter(fixerNodePlacement, '\n' + moduleString) : fixer.insertTextBefore(fixerNodePlacement, moduleString + '\n')];
   }
-  return [...fixes,
-  // Insert the node either before or after, depending on the rule configuration
-  configuration.stylesPlacement === 'bottom' ? fixer.insertTextAfter(fixerNodePlacement, '\n' + moduleString) : fixer.insertTextBefore(fixerNodePlacement, moduleString + '\n')];
-};
 
-/**
- * Handle different cases based on what's been passed in the css-related JSXAttribute
- * @param context the context of the rule
- * @param expression the expression of the JSXAttribute value
- * @param configuration what css-related functions to account for (eg. css, xcss, cssMap), and whether to detect bottom vs top expressions
- * @param cssAttributeName used to encapsulate ObjectExpressions when cssAtTopOfModule/cssAtBottomOfModule violations are triggered
- */
-const traverseExpressionWithConfig = (context, expression, configuration, cssAttributeName) => {
-  function traverseExpression(expression) {
+  /**
+   * Handle different cases based on what's been passed in the css-related JSXAttribute.
+   *
+   * @param expression the expression of the JSXAttribute value.
+   */
+  traverseExpression(expression) {
     switch (expression.type) {
       case 'Identifier':
         // {styles}
         // We've found an identifier - time to analyze it!
-        analyzeIdentifier(context, expression, configuration, cssAttributeName);
+        this.analyzeIdentifier(expression);
         break;
       case 'ArrayExpression':
         // {[styles, moreStyles]}
         // We've found an array expression - let's traverse again over each element individually.
-        expression.elements.forEach(element => traverseExpression(element));
+        expression.elements.forEach(element => this.traverseExpression(element));
         break;
       case 'LogicalExpression':
         // {isEnabled && styles}
         // We've found a logical expression - we're only interested in the right expression so
         // let's traverse that and see what it is!
-        traverseExpression(expression.right);
+        this.traverseExpression(expression.right);
         break;
       case 'ConditionalExpression':
         // {isEnabled ? styles : null}
         // We've found a conditional expression - we're only interested in the consequent and
         // alternate (styles : null)
-        traverseExpression(expression.consequent);
-        traverseExpression(expression.alternate);
+        this.traverseExpression(expression.consequent);
+        this.traverseExpression(expression.alternate);
         break;
       case 'ObjectExpression':
       case 'CallExpression':
       case 'TaggedTemplateExpression':
       case 'TemplateLiteral':
         // We've found elements that shouldn't be here! Report an error.
-        context.report({
+        this.context.report({
           node: expression,
-          messageId: configuration.stylesPlacement === 'bottom' ? 'cssAtBottomOfModule' : 'cssAtTopOfModule',
+          messageId: this.configuration.stylesPlacement === 'bottom' ? 'cssAtBottomOfModule' : 'cssAtTopOfModule',
           fix: fixer => {
-            if (configuration.fixNamesOnly) {
+            if (this.configuration.fixNamesOnly) {
               return [];
             }
 
             // Don't fix CallExpressions unless they're from cssFunctions or cssMap
-            if (expression.type === 'CallExpression' && !isCssCallExpression(expression, configuration.cssFunctions)) {
+            if (expression.type === 'CallExpression' && !isCssCallExpression(expression, this.configuration.cssFunctions)) {
               return [];
             }
             if (expression.type === 'ObjectExpression') {
-              return fixCssNotInModuleScope(fixer, context, configuration, expression, cssAttributeName);
+              return this.fixCssNotInModuleScope(fixer, expression, true);
             }
-            return fixCssNotInModuleScope(fixer, context, configuration, expression);
+            return this.fixCssNotInModuleScope(fixer, expression, false);
           }
         });
         break;
@@ -366,15 +382,17 @@ const traverseExpressionWithConfig = (context, expression, configuration, cssAtt
       // so we just leave this as-is.
       case 'TSAsExpression':
         // @ts-expect-error
-        traverseExpression(expression.expression);
+        this.traverseExpression(expression.expression);
         break;
       default:
         // Do nothing!
         break;
     }
   }
-  traverseExpression(expression);
-};
+  run() {
+    return this.traverseExpression(this.expression);
+  }
+}
 const defaultConfig = {
   cssFunctions: ['css', 'xcss'],
   stylesPlacement: 'top',
@@ -483,9 +501,6 @@ const rule = createLintRule({
             return;
           }
         }
-
-        // Always reset to empty array
-        hoistedCss = [];
         if (name.type === 'JSXIdentifier' && mergedConfig.cssFunctions.includes(name.name)) {
           // When not a jsx expression. For eg. css=""
           if ((value === null || value === void 0 ? void 0 : value.type) !== 'JSXExpressionContainer') {
@@ -500,7 +515,8 @@ const rule = createLintRule({
             //      <div css={/* Hello there */} />
             return;
           }
-          traverseExpressionWithConfig(context, value.expression, mergedConfig, name.name);
+          const linter = new JSXExpressionLinter(context, name.name, mergedConfig, value.expression);
+          linter.run();
         }
       }
     };