@atlaskit/eslint-plugin-ui-styling-standard/dist/cjs/rules/no-nested-selectors/index.js

The eslint plugin to enforce and educate on Atlassian's UI Styling Standard

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _toArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toArray"));
var _postcssSelectorParser = require("postcss-selector-parser");
var _schema = require("@atlaskit/eslint-utils/schema");
var _createRuleWithTypedConfig = require("../utils/create-rule-with-typed-config");
var _isSimpleSelector = require("../utils/is-simple-selector");
var _parseSelector = require("../utils/parse-selector");
var _styleCalls = require("../utils/style-calls");
var _walkStyleCallProperties = require("../utils/walk-style-call-properties");
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; }
/**
 * Strip TypeScript-only wrappers from a computed key so the selector inside is still linted,
 * for example `['.foo' satisfies `.${typeof FOO_CLASS}`]` is checked as `'.foo'`.
 */
var unwrapTypeScriptExpression = function unwrapTypeScriptExpression(key) {
  var expression = key;
  while ((expression.type === 'TSAsExpression' || expression.type === 'TSTypeAssertion' || expression.type === 'TSNonNullExpression' || expression.type === 'TSSatisfiesExpression') && expression.expression) {
    expression = expression.expression;
  }
  return expression;
};
var getCssSelector = function getCssSelector(rawKey) {
  var key = unwrapTypeScriptExpression(rawKey);
  if (key.type === 'Literal' && typeof key.value === 'string') {
    return key.value;
  }
  if (key.type === 'Identifier' && typeof key.name === 'string') {
    return key.name;
  }
  if (key.type === 'TemplateLiteral') {
    return key.quasis.map(function (quasi) {
      return quasi.value.raw;
    }).join(' ');
  }
  return null;
};
function isAllowedSelector(selector) {
  var _selector$nodes = (0, _toArray2.default)(selector.nodes),
    head = _selector$nodes[0],
    tail = _arrayLikeToArray(_selector$nodes).slice(1);

  // The first node must be a nesting selector (`&`) or pseudo-selector.
  var isHeadAllowed = (0, _postcssSelectorParser.isNesting)(head) || (0, _postcssSelectorParser.isPseudo)(head);

  // All remaining nodes must be pseudo selectors.
  var isTailAllowed = tail.every(_postcssSelectorParser.isPseudo);
  return isHeadAllowed && isTailAllowed;
}
var rule = (0, _createRuleWithTypedConfig.createLintRuleWithTypedConfig)({
  meta: {
    name: 'no-nested-selectors',
    docs: {
      description: 'Prevents usage of nested selectors within css styling',
      recommended: true,
      severity: 'error'
    },
    messages: {
      'no-nested-selectors': "Apply local styles directly to the child element instead of selecting it through a parent or external context; pass explicit props for conditional variants."
    },
    type: 'problem',
    schema: {
      type: 'object',
      properties: {
        importSources: _schema.importSources
      }
    }
  },
  create: function create(context, _ref) {
    var importSources = _ref.importSources;
    return {
      Program: function Program() {
        var _iterator = _createForOfIteratorHelper((0, _styleCalls.getStyleCalls)(context)),
          _step;
        try {
          for (_iterator.s(); !(_step = _iterator.n()).done;) {
            var styleCall = _step.value;
            if (!importSources.includes(styleCall.importSource)) {
              continue;
            }
            (0, _walkStyleCallProperties.walkStyleCallProperties)(styleCall, function (_ref2) {
              var key = _ref2.key,
                value = _ref2.value;
              if (value.type !== 'ObjectExpression') {
                return;
              }
              var selectorText = getCssSelector(key);
              if (selectorText === null || selectorText.includes('@')) {
                return;
              }
              if ((0, _isSimpleSelector.isSimpleSelector)(selectorText, {
                allowBareNesting: true,
                allowLeadingPseudo: true
              })) {
                return;
              }
              try {
                var selectorList = (0, _parseSelector.parseSelector)(context, selectorText);
                if (!selectorList.nodes.every(isAllowedSelector)) {
                  context.report({
                    messageId: 'no-nested-selectors',
                    node: key
                  });
                }
              } catch (_unused) {
                // `no-unsafe-selectors` reports unparsable selectors.
              }
            });
          }
        } catch (err) {
          _iterator.e(err);
        } finally {
          _iterator.f();
        }
      }
    };
  }
});
var _default = exports.default = rule;