astroturf/features/css-prop.js

"use strict";

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

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

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

var _picocolors = _interopRequireDefault(require("picocolors"));

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

var _addPragma = _interopRequireDefault(require("../utils/addPragma"));

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

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

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

var _isCssTag = _interopRequireDefault(require("../utils/isCssTag"));

var _isStylesheetTag = _interopRequireDefault(require("../utils/isStylesheetTag"));

var _trimEnd = _interopRequireDefault(require("../utils/trimEnd"));

var _wrapInClass = _interopRequireDefault(require("../utils/wrapInClass"));

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 HAS_JSX = Symbol('Astroturf has jsx');
const HAS_CREATE_ELEMENT = Symbol('Astroturf has createElement call');
const IS_JSX = Symbol('Is a JSX call expression');

// XXX: if the single class cssProp is disabled fallback to the stylesheet tag
//  this enables pre v1 tag meaning for folks that want to do an incremental migration
const isCssPropTag = (tagPath, options) => options.cssTagName === false ? (0, _isStylesheetTag.default)(tagPath, options) : (0, _isCssTag.default)(tagPath, options);

const isJsxCallExpression = p => {
  const result = p.isCallExpression() && ( // @ts-ignore
  p.get('callee').referencesImport('react/jsx-runtime') || // @ts-ignore
  p.get('callee').referencesImport('react/jsx-dev-runtime'));
  return result;
};

const isCreateElementCall = p => p.isCallExpression() && p.get('callee.property').node && p.get('callee.property').node.name === 'createElement';

exports.isCreateElementCall = isCreateElementCall;

function buildCssProp(valuePath, name, options, isJsx = false) {
  const {
    file,
    defaultedOptions: pluginOptions
  } = options;
  const cssState = file.get(_Symbols.STYLES);
  const nodeMap = file.get(_Symbols.COMPONENTS);

  if (!pluginOptions.enableCssProp) {
    if (!pluginOptions.noWarnings) // eslint-disable-next-line no-console
      console.warn(_picocolors.default.yellow(`It looks like you are trying to use the css prop with${_picocolors.default.bold('astroturf')} but have not enabled it. add ${_picocolors.default.bold('enableCssProp: true')} to the loader or plugin options to compile the css prop.`));
    return null;
  }

  const displayName = `CssProp${++cssState.id}_${name}`;
  let vars = null;
  let variants = null;
  const baseStyle = (0, _createStyleNode.default)(valuePath, displayName, {
    file,
    pluginOptions
  });
  const style = { ...baseStyle,
    type: 'class',
    interpolations: [],
    imports: '',
    value: ''
  };
  let importId;

  if (valuePath.isStringLiteral()) {
    style.value = (0, _wrapInClass.default)(valuePath.node.value);
    importId = options.styleImports.add(style);
  } else {
    const exprPath = valuePath.isJSXExpressionContainer() ? valuePath.get('expression') : valuePath;

    if (exprPath.isTemplateLiteral() || exprPath.isTaggedTemplateExpression() && isCssPropTag(exprPath.get('tag'), pluginOptions)) {
      importId = options.styleImports.add(style);
      const template = (0, _buildTaggedTemplate.default)({
        style,
        nodeMap,
        importId,
        pluginOptions,
        location: 'PROP',
        quasiPath: exprPath.isTemplateLiteral() ? exprPath : exprPath.get('quasi')
      });
      vars = template.vars.elements.length ? template.vars : null;
      variants = template.variants.elements.length ? template.variants : null;
      style.interpolations = template.interpolations;
      style.value = template.css;
    }
  }

  if (!importId) {
    return null;
  }

  let runtimeNode = t.arrayExpression((0, _trimEnd.default)([importId, vars, variants]).map(n => n != null ? n : t.nullLiteral()));
  style.importIdentifier = importId.name; // FIXME?
  // @ts-ignore

  nodeMap.set(runtimeNode.expression, style);

  if (isJsx) {
    runtimeNode = t.jsxExpressionContainer(runtimeNode);
  }

  cssState.styles.set(style.absoluteFilePath, style);
  if (pluginOptions.generateInterpolations) style.code = (0, _generator.default)(runtimeNode).code;
  return runtimeNode;
}

const getObjectKey = keyPath => {
  if (keyPath.isStringLiteral()) return keyPath.node.value;
  if (keyPath.isIdentifier()) return keyPath.node.name;
  return keyPath.node.name;
};

const cssPropertyVisitors = {
  ObjectProperty(path, state) {
    const {
      typeName
    } = state;
    if (getObjectKey(path.get('key')) !== 'css') return;
    const valuePath = path.get('value');
    const compiledNode = buildCssProp(valuePath, typeName, state);

    if (compiledNode) {
      valuePath.replaceWith(compiledNode);
      state.processed = true;
    }
  },

  CallExpression(path) {
    // prevent the inner traversal from finding nested css props, on `children:` keys
    // but mark the path so we can skip the check when the outer traversal finds it
    if (isCreateElementCall(path) || isJsxCallExpression(path)) {
      path[IS_JSX] = true;
      path.skip();
    }
  }

};
var _default = {
  Program: {
    exit(path, state) {
      const hasJsx = !!state.file.get(HAS_JSX);
      const hasCreateElement = !!state.file.get(HAS_CREATE_ELEMENT);
      if (!hasJsx && !hasCreateElement) return;
      const {
        jsx
      } = state[_Symbols.JSX_IDENTS];
      const pragmaDisabled = !state.defaultedOptions.jsxPragma; // For createElement calls we still need to add an import
      // but we don't need to do pragma bits
      // if the pragma is disabled and there is no createElement call we are done

      if (pragmaDisabled && !hasCreateElement) return;
      const changes = (0, _addPragma.default)(path, jsx, hasJsx && !pragmaDisabled);
      state.file.get(_Symbols.STYLES).changeset.unshift(...changes);
    }

  },

  CallExpression(path, state) {
    const {
      file
    } = state;
    const pluginOptions = state.defaultedOptions;
    const isAutomaticRuntime = isJsxCallExpression(path);
    if (!path[IS_JSX] && !isCreateElementCall(path) && !isAutomaticRuntime) return;
    const typeName = (0, _getNameFromPath.default)(path.get('arguments')[0]);
    const propsPath = path.get('arguments')[1];
    const innerState = { ...state,
      pluginOptions,
      file,
      processed: false,
      typeName
    }; // We aren't checking very hard that this is a React createElement call

    if (!propsPath) {
      return;
    }

    propsPath.traverse(cssPropertyVisitors, innerState);

    if (innerState.processed) {
      const {
        jsx
      } = state[_Symbols.JSX_IDENTS];
      const {
        changeset
      } = file.get(_Symbols.STYLES);
      const callee = path.get('callee');

      if (isAutomaticRuntime) {
        const end = path.get('arguments')[0].node.start;
        const calleeName = callee.node.name;
        changeset.push({
          type: 'create-element',
          code: `${jsx.name}.jsx2(${calleeName}, `,
          start: callee.node.start,
          end
        });
        path.unshiftContainer('arguments', t.identifier(calleeName));
        callee.replaceWith(t.memberExpression(t.identifier(jsx.name), t.identifier('jsx2')));
      } else {
        changeset.push({
          type: 'create-element',
          code: jsx.name,
          start: callee.node.start,
          end: callee.node.end
        });
        callee.replaceWith(t.identifier(jsx.name));
      }

      file.set(HAS_CREATE_ELEMENT, true);
    }
  },

  JSXAttribute(path, state) {
    const {
      file
    } = state;
    if (path.node.name.name !== 'css') return;
    const valuePath = path.get('value');
    const parentPath = path.findParent(p => p.isJSXOpeningElement());
    const compiledNode = buildCssProp(valuePath, parentPath && (0, _getNameFromPath.default)(parentPath.get('name')), state, true);

    if (compiledNode) {
      valuePath.replaceWith(compiledNode);
      file.set(HAS_JSX, true);
    }
  }

};
exports.default = _default;