eslint-plugin-styled-component-jsx-attributes/lib/utils/collectStyledComponentData.js

A simple plugin for enforcing the use of the id attribute on styled components.

"use strict";

var isStyledCallExpression = function isStyledCallExpression(node) {
  return node.tag.type === 'CallExpression';
};

var isStyledFunc = function isStyledFunc(node) {
  var _node$tag$callee;

  return ((_node$tag$callee = node.tag.callee) === null || _node$tag$callee === void 0 ? void 0 : _node$tag$callee.name) === 'styled';
};

var isStyledFuncWithAttrs = function isStyledFuncWithAttrs(node) {
  var _node$tag$callee2, _node$tag$callee2$obj, _node$tag$callee2$obj2;

  return ((_node$tag$callee2 = node.tag.callee) === null || _node$tag$callee2 === void 0 ? void 0 : (_node$tag$callee2$obj = _node$tag$callee2.object) === null || _node$tag$callee2$obj === void 0 ? void 0 : (_node$tag$callee2$obj2 = _node$tag$callee2$obj.callee) === null || _node$tag$callee2$obj2 === void 0 ? void 0 : _node$tag$callee2$obj2.name) === 'styled';
};

var isPlainSTE = function isPlainSTE(node) {
  var _node$tag, _node$tag$object;

  return node.tag.type === 'MemberExpression' && ((_node$tag = node.tag) === null || _node$tag === void 0 ? void 0 : (_node$tag$object = _node$tag.object) === null || _node$tag$object === void 0 ? void 0 : _node$tag$object.name) === 'styled';
};

var isAttrs = function isAttrs(_ref) {
  var _tag$callee, _tag$callee$property;

  var tag = _ref.tag;
  return ((_tag$callee = tag.callee) === null || _tag$callee === void 0 ? void 0 : (_tag$callee$property = _tag$callee.property) === null || _tag$callee$property === void 0 ? void 0 : _tag$callee$property.name) === 'attrs';
};

var getAttrsType = function getAttrsType(node) {
  var _node$tag2, _node$tag2$arguments, _node$tag2$arguments$;

  var type = (_node$tag2 = node.tag) === null || _node$tag2 === void 0 ? void 0 : (_node$tag2$arguments = _node$tag2.arguments) === null || _node$tag2$arguments === void 0 ? void 0 : (_node$tag2$arguments$ = _node$tag2$arguments[0]) === null || _node$tag2$arguments$ === void 0 ? void 0 : _node$tag2$arguments$.type;
  return type === 'FunctionExpression' ? 'func' : type === 'ArrowFunctionExpression' ? 'arrow' : type === 'ObjectExpression' ? 'object' : '';
};

var _require = require('util'),
    inspect = _require.inspect;

var _require2 = require('./constants'),
    __UNKNOWN_IDENTIFER__ = _require2.__UNKNOWN_IDENTIFER__;

module.exports = function (styledComponentsDict, context, name) {
  return {
    TaggedTemplateExpression: function TaggedTemplateExpression(node) {
      var scName = node.parent.id && node.parent.id.name;

      if (!scName || scName === 'undefined') {
        var _node$parent$key, _node$parent$parent, _node$parent$parent$p, _node$parent$parent$p2;

        if (isPlainSTE(node) && ((_node$parent$key = node.parent.key) === null || _node$parent$key === void 0 ? void 0 : _node$parent$key.name) && ((_node$parent$parent = node.parent.parent) === null || _node$parent$parent === void 0 ? void 0 : (_node$parent$parent$p = _node$parent$parent.parent) === null || _node$parent$parent$p === void 0 ? void 0 : (_node$parent$parent$p2 = _node$parent$parent$p.id) === null || _node$parent$parent$p2 === void 0 ? void 0 : _node$parent$parent$p2.name)) {
          scName = "".concat(node.parent.parent.parent.id.name, ".").concat(node.parent.key.name);
        } else {
          return;
        }
      }

      var attrs = [];
      var tag = '';

      var func = function func(inspectee) {
        return name.includes('anchor-is-valid') && context.report(node, inspect(inspectee || node));
      }; // styled(Component)`` || styled.div.attrs(...)``


      if (isStyledCallExpression(node)) {
        // styled(Component)``
        if (isStyledFunc(node)) {
          var ancestorScName = node.tag.arguments[0].name; //styled(motion.div)

          if (!ancestorScName) {
            var newName = node.parent.id.name;
            var newTag = node.tag.arguments[0].property.name;

            if (newTag === 'button' || newTag === 'input') {
              styledComponentsDict[newName] = {
                name: newName,
                attrs: attrs,
                tag: newTag
              };
            }
          }

          if (!styledComponentsDict[ancestorScName]) return;
          attrs = styledComponentsDict[ancestorScName].attrs;
          tag = styledComponentsDict[ancestorScName].tag;
        } // styled.div.attrs(...)`` || styled(Component).attrs(...)``


        styledComponentsDict[scName] = {
          name: scName,
          attrs: attrs,
          tag: tag
        };
      } // const A = styled.div``


      if (isPlainSTE(node)) {
        tag = node.tag.property.name;
        styledComponentsDict[scName] = {
          name: scName,
          attrs: attrs,
          tag: tag
        };
      }
    }
  };
};