@atlaskit/eslint-plugin-ui-styling-standard/dist/es2019/rules/local-cx-xcss/index.js

The eslint plugin to enforce and educate on Atlassian's UI Styling Standard

import { getScope } from '@atlaskit/eslint-utils/context-compat';
import { CSS_IN_JS_IMPORTS, isCxFunction } from '@atlaskit/eslint-utils/is-supported-import';
import { createLintRule } from '../utils/create-rule';
const IMPORT_SOURCES = [CSS_IN_JS_IMPORTS.compiled, CSS_IN_JS_IMPORTS.atlaskitCss];
function getParentJSXAttribute(node) {
  let parent = node.parent;
  while (parent && parent.type !== 'JSXAttribute') {
    parent = parent.parent;
  }
  if (parent && parent.type === 'JSXAttribute') {
    return parent;
  }
  return null;
}
const rule = createLintRule({
  meta: {
    name: 'local-cx-xcss',
    docs: {
      description: 'Ensures the cx() function, which is part of the XCSS API, is only used within the xcss prop. This aids tracking what styles are applied to a jsx element.',
      recommended: true,
      severity: 'error'
    },
    messages: {
      'local-cx-xcss': "Call cx() directly inside the xcss prop, for example xcss={cx(styles.base, active && styles.active)}, instead of storing its result elsewhere."
    },
    type: 'problem'
  },
  create(context) {
    return {
      'CallExpression[callee.name="cx"]': node => {
        if (node.type === 'CallExpression' && isCxFunction(node.callee, getScope(context, node).references, IMPORT_SOURCES)) {
          const parentJSXAttribute = getParentJSXAttribute(node);
          const propName = parentJSXAttribute === null || parentJSXAttribute === void 0 ? void 0 : parentJSXAttribute.name.name.toString();
          if (propName && /[xX]css$/.test(propName)) {
            return;
          }
          context.report({
            node,
            messageId: 'local-cx-xcss'
          });
        }
      }
    };
  }
});
export default rule;