@atlaskit/eslint-plugin-design-system/dist/esm/rules/ensure-design-token-usage/spacing.js

The essential plugin for use with the Atlassian Design System.

import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import { isNodeOfType, property } from 'eslint-codemod-utils';
import { emToPixels } from './em-to-pixels';
import { findTokenNameByPropertyValue } from './find-token-name-by-property-value';
import { getRawExpression } from './get-raw-expression';
import { getTokenNodeForValue } from './get-token-node-for-value';
import { getTokenReplacement } from './get-token-replacement';
import { getValue } from './get-value';
import { insertTokensImport } from './insert-tokens-import';
import { isAuto } from './is-auto';
import { isCalc } from './is-calc';
import { isValidSpacingValue } from './is-valid-spacing-value';
import { isZero } from './is-zero';
import { splitShorthandValues } from './split-shorthand-values';
export var lintObjectForSpacing = function lintObjectForSpacing(node, context, ruleConfig, fontSize, tokenNode) {
  if (isNodeOfType(node.value, 'Literal') && !isValidSpacingValue(node.value.value, fontSize)) {
    context.report({
      node: node,
      messageId: 'noRawSpacingValues',
      data: {
        payload: "NaN:".concat(node.value.value)
      }
    });
    return;
  }
  var propertyName = node.key.name;
  var isFontFamily = /fontFamily/.test(propertyName);

  // Report on CSS calc function for strings
  if (isNodeOfType(node.value, 'Literal') && isCalc(node.value.value)) {
    return context.report({
      node: node,
      messageId: 'noCalcUsage',
      data: {
        payload: "".concat(propertyName)
      }
    });
  }
  var value = getValue(node.value, context);

  // Value is a token string (e.g. set via a variable)
  if (typeof value === 'string' && /\${token\(.*\)}/.test(value)) {
    return;
  }

  // value is either NaN or it can't be resolved (e.g. em, 100% etc...)
  if (!(value && isValidSpacingValue(value, fontSize))) {
    return context.report({
      node: node,
      messageId: 'noRawSpacingValues',
      data: {
        payload: "NaN:".concat(value)
      }
    });
  }

  // The corresponding values for a single CSS property (e.g. padding: '8px 16px 2px' => [8, 16, 2])
  var valuesForProperty = Array.isArray(value) ? value : [value];

  // value is a single value so we can apply a more robust approach to our fix
  // treat fontFamily as having one value
  if (valuesForProperty.length === 1 || isFontFamily) {
    var _valuesForProperty = _slicedToArray(valuesForProperty, 1),
      _value = _valuesForProperty[0];

    // Do not report or suggest a token to replace 0 or auto
    if (isZero(_value) || isAuto(_value)) {
      return;
    }
    var pixelValue = isFontFamily ? _value : emToPixels(_value, fontSize);
    return context.report({
      node: node,
      messageId: 'noRawSpacingValues',
      data: {
        payload: "".concat(propertyName, ":").concat(pixelValue)
      },
      fix: function fix(fixer) {
        // Casting due to possibility of pixelValue being string | number from emToPixels
        var replacementNode = pixelValue && getTokenReplacement(propertyName, pixelValue);
        if (!replacementNode) {
          return null;
        }
        return (!tokenNode && ruleConfig.applyImport ? [insertTokensImport(fixer)] : []).concat([fixer.replaceText(node, property(_objectSpread(_objectSpread({}, node), {}, {
          value: replacementNode
        })).toString())]);
      }
    });
  }

  /**
   * Compound values are hard to deal with / replace because we need to find/replace strings inside an
   * estree node.
   *
   * @example
   * { padding: '8px 0px' }
   */
  valuesForProperty.forEach(function (val) {
    if (isCalc(val)) {
      return context.report({
        node: node,
        messageId: 'noCalcUsage',
        data: {
          payload: "".concat(propertyName, ":").concat(val)
        }
      });
    }
    var pixelValue = emToPixels(val, fontSize);

    // Do not report or suggest a token to replace 0 or auto
    if (isZero(val) || isAuto(val)) {
      return;
    }
    context.report({
      node: node,
      messageId: 'noRawSpacingValues',
      data: {
        payload: "".concat(propertyName, ":").concat(pixelValue)
      },
      fix: function fix(fixer) {
        var allResolvableValues = valuesForProperty.every(function (value) {
          return !Number.isNaN(emToPixels(value, fontSize));
        });
        if (!allResolvableValues) {
          return null;
        }

        // Casting due to possibility of value being string | number
        var valuesWithTokenReplacement = valuesForProperty.filter(function (value) {
          return findTokenNameByPropertyValue(propertyName, value);
        }).filter(function (value) {
          return value !== 0;
        });
        if (valuesWithTokenReplacement.length === 0) {
          // all values could be replaceable but that just means they're numeric
          // if none of the values have token replacement we bail
          return null;
        }
        var originalCssString = getRawExpression(node.value, context);
        if (!originalCssString) {
          return null;
        }
        /**
         * at this stage none of the values are tokens or irreplaceable values
         * since we know this is shorthand, there will be multiple values
         * we'll need to remove all quote chars since `getRawExpression` will return those as part of the string
         * given they're part of the substring of the current node
         */
        var originalValues = splitShorthandValues(originalCssString.replace(/`|'|"/g, ''));
        if (originalValues.length !== valuesForProperty.length) {
          // we bail just in case original values don't correspond to the replaced values
          return null;
        }
        return (!tokenNode && ruleConfig.applyImport ? [insertTokensImport(fixer)] : []).concat([fixer.replaceText(node.value, "`".concat(valuesForProperty.map(function (value, index) {
          if (isZero(value)) {
            return originalValues[index];
          }
          var pixelValue = emToPixels(value, fontSize);
          var pixelValueString = "".concat(pixelValue, "px");
          // if there is a token we take it, otherwise we go with the original value

          // Casting due to possibility of value being string | number
          return findTokenNameByPropertyValue(propertyName, value) ? "${".concat(getTokenNodeForValue(propertyName, pixelValueString), "}") : originalValues[index];
        }).join(' '), "`"))]);
      }
    });
  });
};