astroturf/utils/buildTaggedTemplate.js

"use strict";

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

var _path = require("path");

var _groupBy = _interopRequireDefault(require("lodash/groupBy"));

var _uniq = _interopRequireDefault(require("lodash/uniq"));

var _resolve = _interopRequireDefault(require("resolve"));

var _cssUnits = _interopRequireDefault(require("./cssUnits"));

var _getNameFromPath = _interopRequireDefault(require("./getNameFromPath"));

var _murmurHash = _interopRequireDefault(require("./murmurHash"));

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

const rComposes = /\b(?:composes\s*?:\s*([^;>]*?)(?:from\s(.+?))?(?=[;}/\n\r]))/gim;
const rPlaceholder = /###ASTROTURF_PLACEHOLDER_\d*?###/g; // Match any valid CSS units followed by a separator such as ;, newline etc.

const rUnit = new RegExp(`^(${_cssUnits.default.join('|')})(;|,|\n| |\\))`);

function defaultResolveDependency({
  request
}, localStyle) {
  const source = _resolve.default.sync(request, {
    basedir: (0, _path.dirname)(localStyle.absoluteFilePath)
  });

  return {
    source
  };
}

function resolveMemberExpression(path) {
  let nextPath = path.resolve();

  while (nextPath && nextPath.isMemberExpression()) {
    nextPath = nextPath.get('object').resolve();
  }

  return nextPath;
}

function resolveImport(path) {
  const resolvedPath = resolveMemberExpression(path);
  const binding = resolvedPath.scope.getBinding(resolvedPath.node.name);
  if (!binding || binding.kind !== 'module') return false;
  const importPath = binding.path;
  const parent = importPath.parentPath;
  if (!parent.isImportDeclaration()) return null;
  const request = parent.node.source.value;
  let identifier;

  if (importPath.isImportNamespaceSpecifier()) {
    if (!path.isMemberExpression()) throw new Error('this is weird');
    identifier = (0, _getNameFromPath.default)(path.get('property'));
  } else if (importPath.isImportDefaultSpecifier()) {
    identifier = (0, _getNameFromPath.default)(resolvedPath);
  } else if (importPath.isImportSpecifier()) {
    // TODO: this isn't correct doesn't do member expressions
    identifier = (0, _getNameFromPath.default)(importPath.get('imported'));
  }

  return {
    identifier,
    request,
    type: importPath.node.type
  };
}

function resolveStyleInterpolation(path, nodeMap, localStyle, resolveDependency = defaultResolveDependency) {
  const resolvedPath = resolveMemberExpression(path);
  const style = resolvedPath && nodeMap.get(resolvedPath.node);

  if (style) {
    return {
      imported: !style.isStyledComponent ? path.get('property').node.name : 'cls1',
      source: (0, _path.relative)((0, _path.dirname)(localStyle.absoluteFilePath), style.absoluteFilePath)
    };
  }

  if (resolveDependency) {
    const resolvedImport = resolveImport(path);

    if (resolvedImport) {
      const {
        identifier
      } = resolvedImport;
      const interpolation = resolveDependency(resolvedImport, localStyle, path.node) || null;
      const isStyledComponent = interpolation.isStyledComponent == null ? identifier.toLowerCase()[0] !== identifier[0] : interpolation.isStyledComponent;
      return interpolation && {
        imported: !isStyledComponent ? path.get('property').node.name : 'cls1',
        ...interpolation
      };
    }
  }

  return null;
}

const getPlaceholder = idx => `###ASTROTURF_PLACEHOLDER_${idx}###`;

var _default = ({
  quasiPath,
  nodeMap,
  tagName,
  resolveDependency,
  useCssProperties,
  style: localStyle
}) => {
  const quasi = quasiPath.node;
  const styleInterpolations = new Map();
  const dynamicInterpolations = new Set();
  const expressions = quasiPath.get('expressions');
  let text = '';
  let lastDynamic = null;
  quasi.quasis.forEach((tmplNode, idx) => {
    const {
      cooked
    } = tmplNode.value;
    const expr = expressions[idx];
    let matches; // If the last quasi is a replaced dynamic import then see if there
    // was a trailing css unit and extract it as part of the interpolation
    // eslint-disable-next-line no-cond-assign

    if (lastDynamic && text.endsWith(`var(--${lastDynamic.id})`) && (matches = cooked.match(rUnit))) {
      const [, unit] = matches;
      lastDynamic.unit = unit;
      text += cooked.replace(rUnit, '$2');
    } else {
      text += cooked;
    }

    if (!expr) {
      return;
    }

    const result = expr.evaluate();

    if (result.confident) {
      text += result.value;
      return;
    } // TODO: dedupe the same expressions in a tag


    const interpolation = resolveStyleInterpolation(expr, nodeMap, localStyle, resolveDependency);

    if (interpolation) {
      interpolation.expr = expr;
      const ph = getPlaceholder(idx);
      styleInterpolations.set(ph, interpolation);
      text += ph;
      return;
    }

    if (!useCssProperties) {
      throw expr.buildCodeFrameError(`Could not resolve interpolation to a value, ${tagName} returned class name, or styled component. ` + 'All interpolated styled components must be in the same file and values must be statically determinable at compile time.');
    } // custom properties need to start with a letter


    const id = `a${(0, _murmurHash.default)(`${localStyle.identifier}-${idx}`)}`;
    lastDynamic = {
      id,
      expr,
      unit: ''
    };
    dynamicInterpolations.add(lastDynamic);
    text += `var(--${id})`;
  }); // Replace references in `composes` rules

  text = text.replace(rComposes, (composes, classNames, fromPart) => {
    const classList = classNames.replace(/(\n|\r|\n\r)/, '').split(/\s+/);
    const composed = classList.map(className => styleInterpolations.get(className)).filter(Boolean);
    if (!composed.length) return composes;

    if (fromPart) {
      // don't want to deal with this case right now
      throw classList[0].expr.buildCodeFrameError('A styled interpolation found inside a `composes` rule with a "from". ' + 'Interpolated values should be in their own `composes` without specifying the file.');
    }

    if (composed.length < classList.length) {
      throw classList[0].expr.buildCodeFrameError('Mixing interpolated and non-interpolated classes in a `composes` rule is not allowed.');
    }

    return Object.entries((0, _groupBy.default)(composed, i => i.source)).reduce((acc, [source, values]) => {
      const classes = (0, _uniq.default)(values.map(v => v.imported)).join(' ');
      return `${acc ? `${acc};\n` : ''}composes: ${classes} from "${source}"`;
    }, '');
  });
  let id = 0;
  let imports = '';
  text = text.replace(rPlaceholder, match => {
    const {
      imported,
      source
    } = styleInterpolations.get(match);
    const localName = `a${id++}`;
    imports += `@value ${imported} as ${localName} from "${source}";\n`;
    return `.${localName}`;
  });
  if (imports) imports += '\n\n';
  return {
    text,
    imports,
    dynamicInterpolations
  };
};

exports.default = _default;