@atlaskit/eslint-plugin-ui-styling-standard/dist/es2019/rules/no-classname-prop/index.js

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

import { isNodeOfType } from 'eslint-codemod-utils';
import { createLintRule } from '../utils/create-rule';
const isXcssProp = propName => {
  if (propName === 'xcss') {
    return true;
  }
  return propName.endsWith('Xcss');
};
const rule = createLintRule({
  meta: {
    name: 'no-classname-prop',
    docs: {
      description: 'Disallows usage of the `className` prop in JSX',
      recommended: true,
      severity: 'error'
    },
    messages: {
      'no-classname-prop': "Apply local styles through css instead of className. Use supported component props or its bounded xcss interface for component customization."
    },
    type: 'problem'
  },
  create(context) {
    return {
      JSXAttribute(node) {
        if (!isNodeOfType(node, 'JSXAttribute')) {
          return;
        }
        if (node.name.name !== 'className' || !node.value) {
          // Ignore, we can't parse this—it either isn't a `className` prop or has no value.
          return;
        }
        if (isNodeOfType(node.value, 'JSXExpressionContainer')) {
          /**
           * We're basically looking for `className={xcss}` and nothing else…
           */
          let propValueName = null;
          if (isNodeOfType(node.value.expression, 'Identifier')) {
            // eg. `className={xcss}`
            propValueName = node.value.expression.name;
          } else if (isNodeOfType(node.value.expression, 'MemberExpression') && isNodeOfType(node.value.expression.property, 'Identifier')) {
            // eg. `className={props.xcss}`
            propValueName = node.value.expression.property.name;
          } else if (isNodeOfType(node.value.expression, 'MemberExpression') && isNodeOfType(node.value.expression.property, 'Literal') && typeof node.value.expression.property.value === 'string') {
            // eg. `className={props['xcss']}`
            propValueName = node.value.expression.property.value;
          }
          if (propValueName && isXcssProp(propValueName)) {
            // Ignore, it's valid to have `className={xcss}`
            // We just assume people have this typed correctly, eg. they're not using `xcss?: any`
            return;
          }
        }
        context.report({
          node,
          messageId: 'no-classname-prop'
        });
      }
    };
  }
});
export default rule;