@atlaskit/eslint-plugin-design-system/dist/esm/rules/use-cx-function-in-xcss/index.js

The essential plugin for use with the Atlassian Design System.

function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
import { isNodeOfType } from 'eslint-codemod-utils';
import { createLintRule } from '../utils/create-lint-rule';
var rule = createLintRule({
  meta: {
    name: 'use-cx-function-in-xcss',
    fixable: 'code',
    hasSuggestions: true,
    type: 'problem',
    docs: {
      description: 'Enforces cx function use to combine styles in xcss.',
      recommended: true,
      severity: 'error'
    },
    messages: {
      useCxFunc: "Use the cx function when combining styles in the xcss prop."
    }
  },
  create: function create(context) {
    var importStatement = null;
    var primitiveNames = new Set();
    return {
      "ImportDeclaration[source.value='@atlaskit/css']": function ImportDeclarationSourceValueAtlaskit_css(node) {
        importStatement = {
          node: node
        };
        var _iterator = _createForOfIteratorHelper(node.specifiers),
          _step;
        try {
          for (_iterator.s(); !(_step = _iterator.n()).done;) {
            var specifier = _step.value;
            if (specifier.type === 'ImportSpecifier' && 'name' in specifier.imported && specifier.imported.name === 'cx') {
              importStatement.cxFuncLocalName = specifier.local.name;
            }
          }
        } catch (err) {
          _iterator.e(err);
        } finally {
          _iterator.f();
        }
      },
      'ImportDeclaration[source.value="@atlaskit/primitives/compiled"]': function ImportDeclarationSourceValueAtlaskit_primitives_compiled(node) {
        var _iterator2 = _createForOfIteratorHelper(node.specifiers),
          _step2;
        try {
          for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
            var specifier = _step2.value;
            primitiveNames.add(specifier.local.name);
          }
        } catch (err) {
          _iterator2.e(err);
        } finally {
          _iterator2.f();
        }
      },
      'JSXAttribute > JSXIdentifier[name=/[xX]css$/]': function JSXAttribute__JSXIdentifierName_XXCss$_(node) {
        var xcssValue = node.parent && isNodeOfType(node.parent, 'JSXAttribute') && node.parent.value && isNodeOfType(node.parent.value, 'JSXExpressionContainer') ? node.parent.value : undefined;
        if (!xcssValue) {
          return;
        }
        var jsxElementName = node.parent.parent && isNodeOfType(node.parent.parent, 'JSXOpeningElement') && node.parent.parent.name && isNodeOfType(node.parent.parent.name, 'JSXIdentifier') ? node.parent.parent.name.name : undefined;
        if (!jsxElementName) {
          return;
        }
        // check if this JSX element is from the primitives entry point and if prop value is an array
        if (primitiveNames.has(jsxElementName) && xcssValue.expression.type === 'ArrayExpression') {
          context.report({
            node: xcssValue,
            messageId: 'useCxFunc',
            fix: function fix(fixer) {
              var fixes = [];
              var sourceCode = context.sourceCode;
              var styles = sourceCode.getText(xcssValue.expression);
              fixes.push(fixer.replaceText(xcssValue, (importStatement && importStatement.cxFuncLocalName ? "{".concat(importStatement.cxFuncLocalName) : "{cx") + "(".concat(styles.replace(/^\[/, '').replace(/\]$/, ''), ")}")));
              if (!importStatement) {
                fixes.push(fixer.insertTextBeforeRange([0, 0], "import { cx } from '@atlaskit/css';\n"));
              } else if (!importStatement.cxFuncLocalName) {
                var importText = sourceCode.getText(importStatement.node);
                fixes.push(fixer.replaceText(importStatement.node, importText.includes('{') ? importText.replace(/import(.*) {\s?/, "import$1 { cx, ") : importText.replace(/ from /, ", { cx } from ")));
              }
              return fixes;
            }
          });
        }
      }
    };
  }
});
export default rule;