@atlaskit/eslint-plugin-design-system/dist/cjs/rules/no-icon-spacing-prop/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 _isFromImportSource = require("../../common/is-from-import-source");
var _createLintRule = require("../utils/create-lint-rule");
var _errorBoundary = require("../utils/error-boundary");
var _getCssMapKey = require("./get-css-map-key");
var _getIconSize = require("./get-icon-size");
var _getSpacingAttribute = require("./get-spacing-attribute");
var _getStaticAttributeValue = require("./get-static-attribute-value");
var _hasSpreadProps = require("./has-spread-props");
var _spacingToPadding = require("./spacing-to-padding");
var _upsertCssMapImport = require("./upsert-css-map-import");
var _upsertCssMapVariable = require("./upsert-css-map-variable");
var _upsertFlexImport = require("./upsert-flex-import");
var _upsertTokenImport = require("./upsert-token-import");
var CSSMAP_VARIABLE_NAME = 'iconSpacingStyles';
var rule = (0, _createLintRule.createLintRule)({
  meta: {
    name: 'no-icon-spacing-prop',
    hasSuggestions: true,
    type: 'suggestion',
    docs: {
      description: 'Disallows usage of the deprecated spacing prop on new icons. Use Flex with cssMap for spacing instead.',
      recommended: true,
      severity: 'warn'
    },
    messages: {
      noSpacingProp: "The `spacing` prop on icon component '{{iconName}}' is deprecated. Wrap the icon in a `<Flex xcss={iconSpacingStyles.spaceXXX}>` using `cssMap` from `@atlaskit/css` instead.",
      noSpacingPropManual: "The `spacing` prop on icon component '{{iconName}}' is deprecated but cannot be auto-fixed ({{reason}}). Manually wrap the icon in a `<Flex xcss={...}>` using `cssMap` from `@atlaskit/css`.",
      suggestRemoveSpacing: 'Remove the `spacing` prop.',
      suggestWrapInFlex: 'Wrap in `<Flex xcss={{{cssMapVarName}}.{{cssMapKey}}}>` and remove the `spacing` prop.'
    }
  },
  create: function create(context) {
    var isNewIcon = (0, _isFromImportSource.createIsFromImportSourceFor)(/^@(atlaskit\/icon|atlaskit\/icon-lab)\/core\//);
    return (0, _errorBoundary.errorBoundary)({
      JSXElement: function JSXElement(node) {
        var _SPACING_TO_PADDING$s;
        if (!isNewIcon(node)) {
          return;
        }
        var spacingAttr = (0, _getSpacingAttribute.getSpacingAttribute)(node);
        if (!spacingAttr) {
          return;
        }
        var iconName = node.openingElement.name.type === 'JSXIdentifier' ? node.openingElement.name.name : 'Unknown';
        var spacingValue = (0, _getStaticAttributeValue.getStaticAttributeValue)(spacingAttr);
        var hasSpread = (0, _hasSpreadProps.hasSpreadProps)(node);
        if (!spacingValue || hasSpread) {
          var reason = hasSpread ? 'spread props present' : 'dynamic spacing value';
          context.report({
            node: node.openingElement,
            messageId: 'noSpacingPropManual',
            data: {
              iconName: iconName,
              reason: reason
            }
          });
          return;
        }
        if (spacingValue === 'none') {
          context.report({
            node: node.openingElement,
            messageId: 'noSpacingProp',
            data: {
              iconName: iconName
            },
            suggest: [{
              messageId: 'suggestRemoveSpacing',
              fix: function fix(fixer) {
                return fixer.remove(spacingAttr);
              }
            }]
          });
          return;
        }
        var size = (0, _getIconSize.getIconSize)(node);
        if (!size || !((_SPACING_TO_PADDING$s = _spacingToPadding.SPACING_TO_PADDING[size]) !== null && _SPACING_TO_PADDING$s !== void 0 && _SPACING_TO_PADDING$s[spacingValue])) {
          context.report({
            node: node.openingElement,
            messageId: 'noSpacingPropManual',
            data: {
              iconName: iconName,
              reason: "unknown size '".concat(size, "' or spacing '").concat(spacingValue, "'")
            }
          });
          return;
        }
        var paddingToken = _spacingToPadding.SPACING_TO_PADDING[size][spacingValue];
        var cssMapKey = (0, _getCssMapKey.getCssMapKey)(paddingToken);
        context.report({
          node: node.openingElement,
          messageId: 'noSpacingProp',
          data: {
            iconName: iconName
          },
          suggest: [{
            messageId: 'suggestWrapInFlex',
            data: {
              cssMapVarName: CSSMAP_VARIABLE_NAME,
              cssMapKey: cssMapKey
            },
            fix: function fix(fixer) {
              var fixes = [];

              // 1. Remove spacing prop
              fixes.push(fixer.remove(spacingAttr));

              // 2. Wrap in Flex with cssMap reference
              fixes.push(fixer.insertTextBefore(node, "<Flex xcss={".concat(CSSMAP_VARIABLE_NAME, ".").concat(cssMapKey, "}>")));
              fixes.push(fixer.insertTextAfter(node, "</Flex>"));

              // 3. Insert/update cssMap variable after last import
              var cssMapFix = (0, _upsertCssMapVariable.upsertCssMapVariable)(context, fixer, paddingToken);
              if (cssMapFix) {
                fixes.push(cssMapFix);
              }

              // 4. Add/update @atlaskit/css import (cssMap)
              var cssFix = (0, _upsertCssMapImport.upsertCssMapImport)(context, fixer);
              if (cssFix) {
                fixes.push(cssFix);
              }

              // 5. Add Flex to @atlaskit/primitives/compiled
              var flexFix = (0, _upsertFlexImport.upsertFlexImport)(context, fixer);
              if (flexFix) {
                fixes.push(flexFix);
              }

              // 6. Add token from @atlaskit/tokens
              var tokenFix = (0, _upsertTokenImport.upsertTokenImport)(context, fixer);
              if (tokenFix) {
                fixes.push(tokenFix);
              }
              return fixes;
            }
          }]
        });
      },
      ImportDeclaration: isNewIcon.importDeclarationHook
    });
  }
});
var _default = exports.default = rule;