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

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

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _eslintCodemodUtils = require("eslint-codemod-utils");
var _createRule = require("../utils/create-rule");
var isXcssProp = function isXcssProp(propName) {
  if (propName === 'xcss') {
    return true;
  }
  return propName.endsWith('Xcss');
};
var rule = (0, _createRule.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: function create(context) {
    return {
      JSXAttribute: function JSXAttribute(node) {
        if (!(0, _eslintCodemodUtils.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 ((0, _eslintCodemodUtils.isNodeOfType)(node.value, 'JSXExpressionContainer')) {
          /**
           * We're basically looking for `className={xcss}` and nothing else…
           */
          var propValueName = null;
          if ((0, _eslintCodemodUtils.isNodeOfType)(node.value.expression, 'Identifier')) {
            // eg. `className={xcss}`
            propValueName = node.value.expression.name;
          } else if ((0, _eslintCodemodUtils.isNodeOfType)(node.value.expression, 'MemberExpression') && (0, _eslintCodemodUtils.isNodeOfType)(node.value.expression.property, 'Identifier')) {
            // eg. `className={props.xcss}`
            propValueName = node.value.expression.property.name;
          } else if ((0, _eslintCodemodUtils.isNodeOfType)(node.value.expression, 'MemberExpression') && (0, _eslintCodemodUtils.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: node,
          messageId: 'no-classname-prop'
        });
      }
    };
  }
});
var _default = exports.default = rule;