@atlaskit/eslint-plugin-design-system/dist/cjs/rules/no-unsafe-style-overrides/index.js

The essential plugin for use with the Atlassian Design System.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _eslintCodemodUtils = require("eslint-codemod-utils");
var _contextCompat = require("@atlaskit/eslint-utils/context-compat");
var _createLintRule = require("../utils/create-lint-rule");
var _getModuleOfIdentifier = require("../utils/get-module-of-identifier");
var _jsx = require("../utils/jsx");
var unsafeOverrides = ['css', 'className', 'theme', 'cssFn', 'styles'];
var rule = (0, _createLintRule.createLintRule)({
  meta: {
    docs: {
      recommended: true,
      // This should be an error but for now we're rolling it out as warn so we can actually get it into codebases.
      severity: 'warn',
      description: 'Discourage usage of unsafe style overrides used against the Atlassian Design System.'
    },
    name: 'no-unsafe-style-overrides',
    messages: {
      noUnsafeStyledOverride: 'Wrapping {{componentName}} in a styled component encourages unsafe style overrides which cause friction and incidents when its internals change.',
      noUnsafeOverrides: 'The {{propName}} prop encourages unsafe style overrides which cause friction and incidents when {{componentName}} internals change.'
    }
  },
  create: function create(context) {
    return {
      CallExpression: function CallExpression(node) {
        if (node.callee.type !== 'Identifier' || !node.callee.name.toLowerCase().includes('styled')) {
          // Ignore functions that don't look like styled().
          return;
        }
        var firstArgument = node.arguments[0];
        if (!firstArgument || firstArgument.type !== 'Identifier') {
          return;
        }
        var moduleName = (0, _getModuleOfIdentifier.getModuleOfIdentifier)((0, _contextCompat.getSourceCode)(context), firstArgument.name);
        if (!moduleName || !moduleName.moduleName.startsWith('@atlaskit')) {
          // Ignore styled calls with non-atlaskit components.
          return;
        }
        context.report({
          node: firstArgument,
          messageId: 'noUnsafeStyledOverride',
          data: {
            componentName: moduleName.importName
          }
        });
      },
      JSXAttribute: function JSXAttribute(node) {
        if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'JSXAttribute') || !(node.parent && (0, _eslintCodemodUtils.isNodeOfType)(node.parent, 'JSXOpeningElement'))) {
          return;
        }
        var elementName = (0, _jsx.getJSXElementName)(node.parent);
        var moduleName = (0, _getModuleOfIdentifier.getModuleOfIdentifier)((0, _contextCompat.getSourceCode)(context), elementName);
        if (!moduleName || !moduleName.moduleName.startsWith('@atlaskit')) {
          return;
        }
        var propName = typeof node.name.name === 'string' ? node.name.name : node.name.name.name;
        if (unsafeOverrides.includes(propName)) {
          context.report({
            node: node,
            messageId: 'noUnsafeOverrides',
            data: {
              propName: propName,
              componentName: moduleName.importName
            }
          });
        }
      }
    };
  }
});
var _default = exports.default = rule;