astroturf/features/css-prop.js

"use strict";

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

var _chalk = _interopRequireDefault(require("chalk"));

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

var _helperModuleImports = require("@babel/helper-module-imports");

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

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 _Symbols = require("../utils/Symbols");

var _toVarsArray = _interopRequireDefault(require("../utils/toVarsArray"));

var _trimExpressions = _interopRequireDefault(require("../utils/trimExpressions"));

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

function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; if (obj != null) { var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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 JSX_IDENTS = Symbol('Astroturf jsx identifiers');

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

function buildCssProp(valuePath, name, options) {
  const {
    file,
    pluginOptions,
    isJsx
  } = 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(_chalk.default.yellow('It looks like you are trying to use the css prop with', _chalk.default.bold('astroturf'), 'but have not enabled it. add', _chalk.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;
  const style = (0, _createStyleNode.default)(valuePath, displayName, {
    file,
    pluginOptions
  });

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

    if (exprPath.isTemplateLiteral() || exprPath.isTaggedTemplateExpression() && (0, _isCssTag.default)(exprPath.get('tag'), pluginOptions)) {
      const {
        text,
        imports,
        dynamicInterpolations
      } = (0, _buildTaggedTemplate.default)({
        style,
        nodeMap,
        ...pluginOptions,
        quasiPath: exprPath.isTemplateLiteral() ? exprPath : exprPath.get('quasi'),
        useCssProperties: !!pluginOptions.customCssProperties
      });
      vars = (0, _toVarsArray.default)(dynamicInterpolations);
      style.imports = imports;
      style.interpolations = (0, _trimExpressions.default)(dynamicInterpolations);
      style.value = imports + (0, _wrapInClass.default)(text);
    }
  }

  if (style.value == null) {
    return null;
  }

  const importId = (0, _helperModuleImports.addDefault)(valuePath, style.relativeFilePath);
  let runtimeNode = t.arrayExpression([importId, vars].filter(Boolean));
  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;
  cssState.changeset.push({
    code: `const ${importId.name} = require("${style.relativeFilePath}");\n`
  });
  return runtimeNode;
}

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

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

};
var _default = {
  Program: {
    enter(path, state) {
      // We need to re-export Fragment because of
      // https://github.com/babel/babel/pull/7996#issuecomment-519653431
      state[JSX_IDENTS] = {
        jsx: path.scope.generateUidIdentifier('j'),
        jsxFrag: path.scope.generateUidIdentifier('f')
      };
    },

    exit(path, state) {
      if (!state.file.get(_Symbols.HAS_CSS_PROP)) return;
      const {
        jsx,
        jsxFrag
      } = state[JSX_IDENTS];
      const jsxPrgama = `* @jsx ${jsx.name} *`;
      const jsxFragPrgama = `* @jsxFrag ${jsxFrag.name} *`;
      path.addComment('leading', jsxPrgama);
      path.addComment('leading', jsxFragPrgama);
      (0, _helperModuleImports.addNamed)(path, 'jsx', 'astroturf', {
        nameHint: jsx.name
      });
      (0, _helperModuleImports.addNamed)(path, 'F', 'astroturf', {
        nameHint: jsxFrag.name
      });
      state.file.get(_Symbols.STYLES).changeset.unshift({
        code: `/*${jsxPrgama}*/\n`
      }, {
        code: `/*${jsxFragPrgama}*/\n\n`
      }, {
        code: `const { jsx: ${jsx.name}, F: ${jsxFrag.name} } = require('astroturf');\n`
      });
    }

  },

  CallExpression(path, state) {
    const {
      file
    } = state;
    const pluginOptions = state.defaultedOptions;
    if (!isCreateElementCall(path)) return;
    const typeName = (0, _getNameFromPath.default)(path.get('arguments')[0]);
    const propsPath = path.get('arguments')[1];
    const innerState = {
      pluginOptions,
      file,
      processed: false,
      typeName
    };
    propsPath.traverse(cssPropertyVisitors, innerState);

    if (innerState.processed) {
      const {
        jsx
      } = state[JSX_IDENTS];
      const {
        changeset
      } = file.get(_Symbols.STYLES);
      const callee = path.get('callee');
      changeset.push({
        code: jsx.name,
        start: callee.node.start,
        end: callee.node.end
      });
      callee.replaceWith(jsx);
      file.set(_Symbols.HAS_CSS_PROP, true);
    }
  },

  JSXAttribute(path, state) {
    const {
      file
    } = state;
    const pluginOptions = state.defaultedOptions;
    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')), {
      file,
      pluginOptions,
      isJsx: true
    });

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

};
exports.default = _default;