babel-plugin-styled-components/lib/utils/detectors.js

Improve the debugging experience and add server-side rendering support to styled-components

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.isWithThemeHelper = exports.isValidTopLevelImport = exports.isUseTheme = exports.isStyled = exports.isPureHelper = exports.isKeyframesHelper = exports.isHelper = exports.isCreateGlobalStyleHelper = exports.isCSSHelper = exports.importLocalName = void 0;
var _getSequenceExpressionValue = _interopRequireDefault(require("./getSequenceExpressionValue"));
var _options = require("./options");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const VALID_TOP_LEVEL_IMPORT_PATH_MATCHERS = ['styled-components', 'styled-components/no-tags', 'styled-components/native', 'styled-components/primitives'].map(literal => x => x === literal);
const isValidTopLevelImport = (x, state) => {
  return [...VALID_TOP_LEVEL_IMPORT_PATH_MATCHERS, ...(0, _options.useTopLevelImportPathMatchers)(state)].some(isMatch => isMatch(x));
};
exports.isValidTopLevelImport = isValidTopLevelImport;
const IMPORT_NAMES_CACHE = 'styled-components-import-local-names';
const importLocalName = (name, state, options = {}) => {
  const {
    bypassCache = false
  } = options;
  if (state.customImportName) return state.customImportName.name;
  let cache = state.file.get(IMPORT_NAMES_CACHE);
  if (!cache || bypassCache) {
    cache = {};
    state.file.set(IMPORT_NAMES_CACHE, cache);
  }
  if (!bypassCache && name in cache) return cache[name];
  let localName = state.styledRequired ? name === 'default' ? 'styled' : name : false;
  state.file.path.traverse({
    ImportDeclaration: {
      exit(path) {
        const {
          node
        } = path;
        if (!isValidTopLevelImport(node.source.value, state)) return;
        for (const specifier of path.get('specifiers')) {
          if (specifier.isImportSpecifier() && specifier.node.imported.name === 'styled') {
            localName = 'styled';
          }
          if (specifier.isImportDefaultSpecifier()) {
            localName = specifier.node.local.name;
          }
          if (specifier.isImportSpecifier() && specifier.node.imported.name === name) {
            localName = specifier.node.local.name;
          }

          // The namespace binding isn't directly callable, so prefer any
          // other specifier (default or named) discovered in this file.
          if (specifier.isImportNamespaceSpecifier() && !localName) {
            localName = name === 'default' ? specifier.node.local.name : name;
          }
        }
      }
    }
  });
  cache[name] = localName;
  return localName;
};

// Follow `const X = Y` (and TS `const X = Y as Type`) chains so a local
// re-binding of the styled import still resolves to it. Lazy: only walks
// the chain when the direct-name check misses, so the hot path is unchanged.
exports.importLocalName = importLocalName;
const resolvesToDefaultLocal = (name, defaultLocal, state, t) => {
  if (!name || !defaultLocal) return false;
  if (name === defaultLocal) return true;
  const scope = state.file.path.scope;
  const visited = new Set([name]);
  let current = name;
  while (true) {
    const binding = scope.getBinding(current);
    if (!binding || !binding.path.isVariableDeclarator()) return false;
    const init = binding.path.node.init;
    if (!init) return false;
    let nextName = null;
    if (t.isIdentifier(init)) {
      nextName = init.name;
    } else if ((init.type === 'TSAsExpression' || init.type === 'TSTypeAssertion') && t.isIdentifier(init.expression)) {
      nextName = init.expression.name;
    }
    if (!nextName) return false;
    if (nextName === defaultLocal) return true;
    if (visited.has(nextName)) return false;
    visited.add(nextName);
    current = nextName;
  }
};
const isStyled = t => (tag, state) => {
  if (t.isCallExpression(tag) && t.isMemberExpression(tag.callee) && tag.callee.property.name !== 'default') {
    return isStyled(t)(tag.callee.object, state);
  } else if (t.isCallExpression(tag) && t.isSequenceExpression(tag.callee) && t.isMemberExpression((0, _getSequenceExpressionValue.default)(tag.callee)) && (0, _getSequenceExpressionValue.default)(tag.callee).property.name !== 'default') {
    return isStyled(t)((0, _getSequenceExpressionValue.default)(tag.callee), state);
  } else {
    const defaultLocal = importLocalName('default', state);
    const matchesDefault = name => resolvesToDefaultLocal(name, defaultLocal, state, t);
    return t.isMemberExpression(tag) && matchesDefault(tag.object.name) && !isHelper(t)(tag.property, state) || t.isCallExpression(tag) && matchesDefault(tag.callee.name) || t.isCallExpression(tag) && t.isSequenceExpression(tag.callee) && matchesDefault((0, _getSequenceExpressionValue.default)(tag.callee).name) ||
    // styled.default.div``, styled.default.something() — require() forms
    state.styledRequired && t.isMemberExpression(tag) && t.isMemberExpression(tag.object) && tag.object.property.name === 'default' && tag.object.object.name === state.styledRequired || state.styledRequired && t.isCallExpression(tag) && t.isMemberExpression(tag.callee) && tag.callee.property.name === 'default' && tag.callee.object.name === state.styledRequired || state.styledRequired && t.isCallExpression(tag) && t.isSequenceExpression(tag.callee) && t.isMemberExpression((0, _getSequenceExpressionValue.default)(tag.callee)) && (0, _getSequenceExpressionValue.default)(tag.callee).property.name === 'default' && (0, _getSequenceExpressionValue.default)(tag.callee).object.name === state.styledRequired || defaultLocal && t.isMemberExpression(tag) && t.isMemberExpression(tag.object) && tag.object.property.name === 'default' && tag.object.object.name === defaultLocal;
  }
};
exports.isStyled = isStyled;
const isCSSHelper = t => (tag, state) => t.isIdentifier(tag) && tag.name === importLocalName('css', state);
exports.isCSSHelper = isCSSHelper;
const isCreateGlobalStyleHelper = t => (tag, state) => t.isIdentifier(tag) && tag.name === importLocalName('createGlobalStyle', state);
exports.isCreateGlobalStyleHelper = isCreateGlobalStyleHelper;
const isKeyframesHelper = t => (tag, state) => t.isIdentifier(tag) && tag.name === importLocalName('keyframes', state);
exports.isKeyframesHelper = isKeyframesHelper;
const isWithThemeHelper = t => (tag, state) => t.isIdentifier(tag) && tag.name === importLocalName('withTheme', state);
exports.isWithThemeHelper = isWithThemeHelper;
const isUseTheme = t => (tag, state) => t.isIdentifier(tag) && tag.name === importLocalName('useTheme', state);
exports.isUseTheme = isUseTheme;
const isHelper = t => (tag, state) => isCreateGlobalStyleHelper(t)(tag, state) || isCSSHelper(t)(tag, state) || isUseTheme(t)(tag, state) || isKeyframesHelper(t)(tag, state) || isWithThemeHelper(t)(tag, state);
exports.isHelper = isHelper;
const isPureHelper = t => (tag, state) => isCreateGlobalStyleHelper(t)(tag, state) || isCSSHelper(t)(tag, state) || isKeyframesHelper(t)(tag, state) || isUseTheme(t)(tag, state) || isWithThemeHelper(t)(tag, state);
exports.isPureHelper = isPureHelper;