astroturf/features/styled-component.js

"use strict";

exports.__esModule = true;
exports.default = void 0;

var _generator = _interopRequireDefault(require("@babel/generator"));

var t = _interopRequireWildcard(require("@babel/types"));

var _get = _interopRequireDefault(require("lodash/get"));

var _Symbols = require("../utils/Symbols");

var _buildTaggedTemplate = _interopRequireDefault(require("../utils/buildTaggedTemplate"));

var _createStyleNode = _interopRequireDefault(require("../utils/createStyleNode"));

var _getDisplayName = _interopRequireDefault(require("../utils/getDisplayName"));

var _hasAttrs = _interopRequireDefault(require("../utils/hasAttrs"));

var _isStyledTag = _interopRequireDefault(require("../utils/isStyledTag"));

var _isStyledTagShorthand = _interopRequireDefault(require("../utils/isStyledTagShorthand"));

var _normalizeAttrs = _interopRequireDefault(require("../utils/normalizeAttrs"));

var _truthy = _interopRequireDefault(require("../utils/truthy"));

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

const PURE_COMMENT = '/*#__PURE__*/';

const buildComponent = nodes => t.callExpression(nodes.TAG, [nodes.ELEMENTTYPE, nodes.OPTIONS, t.objectExpression([t.objectProperty(t.identifier('displayName'), nodes.DISPLAYNAME), t.objectProperty(t.identifier('styles'), nodes.IMPORT), !t.isNullLiteral(nodes.ATTRS) && t.objectProperty(t.identifier('attrs'), nodes.ATTRS), nodes.VARS.elements.length && t.objectProperty(t.identifier('vars'), nodes.VARS), nodes.VARIANTS.elements.length && t.objectProperty(t.identifier('variants'), nodes.VARIANTS)].filter(_truthy.default))]);

function buildStyledComponent(path, elementType, opts) {
  const {
    file,
    pluginOptions,
    styledAttrs,
    styledOptions,
    styleImports
  } = opts;
  const cssState = file.get(_Symbols.STYLES);
  const nodeMap = file.get(_Symbols.COMPONENTS);
  const displayName = (0, _getDisplayName.default)(path, opts, null);
  if (!displayName) throw path.buildCodeFrameError( // the expression case should always be the problem but just in case, let's avoid a potentially weird error.
  path.findParent(p => p.isExpressionStatement()) ? 'The output of this styled component is never used. Either assign it to a variable or export it.' : 'Could not determine a displayName for this styled component. Each component must be uniquely identifiable, either as the default export of the module or by assigning it to a unique identifier');
  const baseStyle = (0, _createStyleNode.default)(path, displayName, opts);
  const style = { ...baseStyle,
    type: 'styled',
    interpolations: [],
    imports: '',
    value: ''
  };
  const importId = styleImports.add(style);
  const {
    css,
    vars,
    variants,
    interpolations
  } = (0, _buildTaggedTemplate.default)({
    style,
    nodeMap,
    importId,
    location: 'COMPONENT',
    quasiPath: path.get('quasi'),
    pluginOptions: opts.pluginOptions
  });
  style.interpolations = interpolations;
  style.value = css;
  const runtimeNode = buildComponent({
    TAG: t.identifier(pluginOptions.styledTagName),
    ELEMENTTYPE: elementType,
    ATTRS: (0, _normalizeAttrs.default)(styledAttrs),
    OPTIONS: styledOptions || t.nullLiteral(),
    DISPLAYNAME: t.stringLiteral(displayName),
    VARS: vars,
    VARIANTS: variants,
    IMPORT: importId
  });

  if (pluginOptions.generateInterpolations) {
    style.code = `${PURE_COMMENT}${(0, _generator.default)(runtimeNode).code}`;
  }

  style.importIdentifier = importId.name;
  cssState.styles.set(style.absoluteFilePath, style);
  nodeMap.set(runtimeNode, style);
  return runtimeNode;
}

var _default = {
  TaggedTemplateExpression(path, state) {
    const pluginOptions = state.defaultedOptions;
    const tagPath = path.get('tag');

    if ((0, _isStyledTag.default)(tagPath, pluginOptions)) {
      let styledOptions, componentType, styledAttrs;

      if ((0, _hasAttrs.default)(tagPath.get('callee'))) {
        styledAttrs = (0, _get.default)(tagPath, 'node.arguments[0]');
        const styled = tagPath.get('callee.object');
        componentType = (0, _get.default)(styled, 'node.arguments[0]');
        styledOptions = (0, _get.default)(styled, 'node.arguments[1]');
      } else {
        componentType = (0, _get.default)(tagPath, 'node.arguments[0]');
        styledOptions = (0, _get.default)(tagPath, 'node.arguments[1]');
      }

      path.replaceWith(buildStyledComponent(path, componentType, {
        pluginOptions,
        styledAttrs,
        styledOptions,
        file: state.file,
        styleImports: state.styleImports
      }));
      path.addComment('leading', '#__PURE__'); // styled.button` ... `
    } else if ((0, _isStyledTagShorthand.default)(tagPath, pluginOptions)) {
      const prop = tagPath.get('property');
      const componentType = t.stringLiteral(prop.node.name);
      path.replaceWith(buildStyledComponent(path, componentType, {
        pluginOptions,
        file: state.file,
        styleImports: state.styleImports
      }));
      path.addComment('leading', '#__PURE__');
    }
  }

};
exports.default = _default;