@atlaskit/eslint-plugin-design-system/dist/esm/rules/use-tokens-space/transformers/style-property/index.js

The essential plugin for use with the Atlassian Design System.

/* eslint-disable @repo/internal/react/require-jsdoc */

import { isNodeOfType } from 'eslint-codemod-utils';
import { ObjectEntry } from '../../../../ast-nodes/object-entry';
import { Root } from '../../../../ast-nodes/root';
import { isStringOrNumber } from '../../utils/is-string-or-number';
import { styleMap } from './style-map';
import supported from './supported';
var messageId = 'noRawSpacingValues';
export var StyleProperty = {
  lint: function lint(node, _ref) {
    var context = _ref.context;
    // Check whether all criteria needed to make a transformation are met
    var _StyleProperty$_check = StyleProperty._check(node),
      success = _StyleProperty$_check.success,
      ref = _StyleProperty$_check.ref;
    if (!success) {
      return;
    }
    context.report({
      node: ref.node.value,
      messageId: messageId,
      fix: ref.token ? StyleProperty._fix(ref, context) : undefined
    });
  },
  _check: function _check(node) {
    if (!isNodeOfType(node, 'Property')) {
      return {
        success: false,
        ref: undefined
      };
    }

    /**
     * Currently, we support values like:
     * ```
     * {
     *   padding: '8px', // value.type is Literal
     *   margin: -8, // value.type is UnaryExpression
     * }
     * ```
     */
    if (!(isNodeOfType(node.value, 'Literal') || isNodeOfType(node.value, 'UnaryExpression'))) {
      return {
        success: false,
        ref: undefined
      };
    }
    var _ObjectEntry$getPrope = ObjectEntry.getProperty(node),
      property = _ObjectEntry$getPrope.value;

    // Bail if the property is not `padding`, `margin`, etc
    if (!property || !styleMap[property]) {
      return {
        success: false,
        ref: undefined
      };
    }
    var value = ObjectEntry.getValue(node);

    // This is mainly useful as a type guard, so the checks after don't have to have duplicate checks for other types.
    if (!isStringOrNumber(value)) {
      return {
        success: false,
        ref: undefined
      };
    }

    // ignore CSS vars. See: https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo/pull-requests/74844/overview?commentId=6741571
    if (value.toString().startsWith('var(')) {
      return {
        success: false,
        ref: undefined
      };
    }

    // There are valid values to ignore, such as `margin: auto`
    if (supported.values.ignore.includes(value)) {
      return {
        success: false,
        ref: undefined
      };
    }

    // Don't report on stuff like `padding: '8px 16px'`.
    // We may iterate to handle values like this in future.
    if (value.toString().includes(' ')) {
      return {
        success: false,
        ref: undefined
      };
    }
    var ref = {
      node: node,
      token: styleMap[property][value],
      fallback: value
    };
    return {
      success: true,
      ref: ref
    };
  },
  /**
   * All required validation steps have been taken care of before this
   * transformer is called, so it just goes ahead providing all necessary fixes
   */
  _fix: function _fix(ref, context) {
    return function (fixer) {
      var importFix = Root.upsertNamedImportDeclaration({
        module: '@atlaskit/tokens',
        specifiers: ['token']
      }, context, fixer);
      var tokenCall = ref.fallback ? "token('".concat(ref.token, "', '").concat(ref.fallback, "')") : "token('".concat(ref.token, "')");
      var tokenFix = fixer.replaceText(ref.node.value, tokenCall);
      return [importFix, tokenFix].filter(function (fix) {
        return Boolean(fix);
      }); // Some of the transformers can return arrays with undefined, so filter them out
    };
  }
};