@atlaskit/eslint-plugin-design-system/dist/cjs/rules/no-empty-styled-expression/index.js

The essential plugin for use with the Atlassian Design System.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _contextCompat = require("@atlaskit/eslint-utils/context-compat");
var _isSupportedImport = require("@atlaskit/eslint-utils/is-supported-import");
var _createLintRule = require("../utils/create-lint-rule");
var isEmptyStyledExpression = function isEmptyStyledExpression(node) {
  var _node$arguments = (0, _slicedToArray2.default)(node.arguments, 1),
    firstArg = _node$arguments[0];
  if (node.arguments.length === 0) {
    return true;
  } else if (node.arguments.length === 1 && (firstArg === null || firstArg === void 0 ? void 0 : firstArg.type) === 'ArrayExpression') {
    return firstArg.elements.length === 0;
  } else if (node.arguments.length === 1 && (firstArg === null || firstArg === void 0 ? void 0 : firstArg.type) === 'ObjectExpression') {
    return firstArg.properties.length === 0;
  }
  return false;
};
var createNoEmptyStyledExpressionRule = function createNoEmptyStyledExpressionRule(isEmptyStyledExpression, messageId) {
  return function (context) {
    var importSources = (0, _isSupportedImport.getImportSources)(context);
    return {
      'CallExpression[callee.type="MemberExpression"]': function CallExpressionCalleeTypeMemberExpression(node) {
        var _getScope = (0, _contextCompat.getScope)(context, node),
          references = _getScope.references;

        // If we have styled.div(...), make sure `callee` only refers to the
        // `styled` part instead of the whole `styled.div` expression.
        var callee = node.callee.type === 'MemberExpression' ? node.callee.object : node.callee;
        if (!(0, _isSupportedImport.isStyled)(callee, references, importSources)) {
          return;
        }
        if (!isEmptyStyledExpression(node)) {
          return;
        }
        context.report({
          messageId: messageId,
          node: node
        });
      }
    };
  };
};
var noEmptyStyledExpressionRule = (0, _createLintRule.createLintRule)({
  meta: {
    name: 'no-empty-styled-expression',
    docs: {
      description: 'Forbids any styled expression to be used when passing empty arguments to styled.div() (or other JSX elements).',
      removeFromPresets: true // effectively disable this rule here, this is configured by `@atlaskit/ui-styling-standard` instead
    },
    messages: {
      unexpected: 'Found an empty expression, or empty object argument passed to `styled` function call. This unnecessarily causes a major performance penalty - please use a plain JSX element or a React fragment instead (e.g. `<div>Hello</div>` or `<>Hello</>`).'
    },
    type: 'problem',
    schema: [{
      type: 'object',
      properties: {
        importSources: {
          type: 'array',
          items: [{
            type: 'string'
          }]
        }
      },
      additionalProperties: false
    }]
  },
  create: createNoEmptyStyledExpressionRule(isEmptyStyledExpression, 'unexpected')
});
var _default = exports.default = noEmptyStyledExpressionRule;