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

The essential plugin for use with the Atlassian Design System.

import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import { getScope } from '@atlaskit/eslint-utils/context-compat';
import { getImportSources, isStyled } from '@atlaskit/eslint-utils/is-supported-import';
import { createLintRule } from '../utils/create-lint-rule';
var isEmptyStyledExpression = function isEmptyStyledExpression(node) {
  var _node$arguments = _slicedToArray(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 = getImportSources(context);
    return {
      'CallExpression[callee.type="MemberExpression"]': function CallExpressionCalleeTypeMemberExpression(node) {
        var _getScope = 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 (!isStyled(callee, references, importSources)) {
          return;
        }
        if (!isEmptyStyledExpression(node)) {
          return;
        }
        context.report({
          messageId: messageId,
          node: node
        });
      }
    };
  };
};
var noEmptyStyledExpressionRule = 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')
});
export default noEmptyStyledExpressionRule;