styled-jsx/dist/babel.js

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = _default;

var _babelPluginSyntaxJsx = _interopRequireDefault(require("babel-plugin-syntax-jsx"));

var _babelExternal = require("./babel-external");

var _utils = require("./_utils");

var _constants = require("./_constants");

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

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }

function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }

function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }

function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }

function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }

function _default(_ref) {
  var t = _ref.types;
  var jsxVisitors = {
    JSXOpeningElement: function JSXOpeningElement(path, state) {
      var el = path.node;

      var _ref2 = el.name || {},
          name = _ref2.name;

      if (!state.hasJSXStyle) {
        return;
      }

      if (state.ignoreClosing === null) {
        // We keep a counter of elements inside so that we
        // can keep track of when we exit the parent to reset state
        // note: if we wished to add an option to turn off
        // selectors to reach parent elements, it would suffice to
        // set this to `1` and do an early return instead
        state.ignoreClosing = 0;
      }

      var tag = path.get('name');

      if (name && name !== 'style' && name !== _constants.STYLE_COMPONENT && (name.charAt(0) !== name.charAt(0).toUpperCase() || Object.values(path.scope.bindings).some(function (binding) {
        return binding.referencePaths.some(function (r) {
          return r === tag;
        });
      }))) {
        if (state.className) {
          (0, _utils.addClassName)(path, state.className);
        }
      }

      state.ignoreClosing++; // Next visit will be: JSXElement exit()
    },
    JSXElement: {
      enter: function enter(path, state) {
        if (state.hasJSXStyle !== null) {
          return;
        }

        var styles = (0, _utils.findStyles)(path);

        if (styles.length === 0) {
          return;
        }

        state.styles = [];
        state.externalStyles = [];
        var scope = (0, _utils.getScope)(path);
        var _iteratorNormalCompletion = true;
        var _didIteratorError = false;
        var _iteratorError = undefined;

        try {
          for (var _iterator = styles[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
            var style = _step.value;
            // Compute children excluding whitespace
            var children = style.get('children').filter(function (c) {
              return t.isJSXExpressionContainer(c.node) || // Ignore whitespace around the expression container
              t.isJSXText(c.node) && c.node.value.trim() !== '';
            });

            if (children.length !== 1) {
              throw path.buildCodeFrameError("Expected one child under " + "JSX Style tag, but got ".concat(children.length, " ") + "(eg: <style jsx>{`hi`}</style>)");
            }

            var child = children[0];

            if (!t.isJSXExpressionContainer(child)) {
              throw path.buildCodeFrameError("Expected a child of " + "type JSXExpressionContainer under JSX Style tag " + "(eg: <style jsx>{`hi`}</style>), got ".concat(child.type));
            }

            var expression = child.get('expression');

            if (t.isIdentifier(expression)) {
              var idName = expression.node.name;

              if (expression.scope.hasBinding(idName)) {
                var externalStylesIdentifier = t.identifier(idName);
                var isGlobal = (0, _utils.isGlobalEl)(style.get('openingElement').node);
                state.externalStyles.push([t.memberExpression(externalStylesIdentifier, t.identifier('__hash')), externalStylesIdentifier, isGlobal]);
                continue;
              }

              throw path.buildCodeFrameError("The Identifier " + "`".concat(expression.getSource(), "` is either `undefined` or ") + "it is not an external StyleSheet reference i.e. " + "it doesn't come from an `import` or `require` statement");
            }

            if (!t.isTemplateLiteral(expression) && !t.isStringLiteral(expression)) {
              throw path.buildCodeFrameError("Expected a template " + "literal or String literal as the child of the " + "JSX Style tag (eg: <style jsx>{`some css`}</style>)," + " but got ".concat(expression.type));
            }

            state.styles.push((0, _utils.getJSXStyleInfo)(expression, scope));
          }
        } catch (err) {
          _didIteratorError = true;
          _iteratorError = err;
        } finally {
          try {
            if (!_iteratorNormalCompletion && _iterator.return != null) {
              _iterator.return();
            }
          } finally {
            if (_didIteratorError) {
              throw _iteratorError;
            }
          }
        }

        var externalJsxId;

        if (state.externalStyles.length > 0) {
          var expressions = state.externalStyles // Remove globals
          .filter(function (s) {
            return !s[2];
          }).map(function (s) {
            return s[0];
          });
          var expressionsLength = expressions.length;

          if (expressionsLength === 0) {
            externalJsxId = null;
          } else {
            // Construct a template literal of this form:
            // `jsx-${styles.__scopedHash} jsx-${otherStyles.__scopedHash}`
            externalJsxId = t.templateLiteral([t.templateElement({
              raw: 'jsx-',
              cooked: 'jsx-'
            })].concat(_toConsumableArray(_toConsumableArray(new Array(expressionsLength - 1)).map(function () {
              return t.templateElement({
                raw: ' jsx-',
                cooked: ' jsx-'
              });
            })), [t.templateElement({
              raw: '',
              cooked: ''
            }, true)]), expressions);
          }
        }

        if (state.styles.length > 0 || externalJsxId) {
          var _computeClassNames = (0, _utils.computeClassNames)(state.styles, externalJsxId),
              staticClassName = _computeClassNames.staticClassName,
              className = _computeClassNames.className;

          state.className = className;
          state.staticClassName = staticClassName;
        }

        state.hasJSXStyle = true;
        state.file.hasJSXStyle = true; // Next visit will be: JSXOpeningElement
      },
      exit: function exit(path, state) {
        var isGlobal = (0, _utils.isGlobalEl)(path.node.openingElement);

        if (state.hasJSXStyle && ! --state.ignoreClosing && !isGlobal) {
          state.hasJSXStyle = null;
          state.className = null;
          state.externalJsxId = null;
        }

        if (!state.hasJSXStyle || !(0, _utils.isStyledJsx)(path)) {
          return;
        }

        if (state.ignoreClosing > 1) {
          var styleTagSrc;

          try {
            styleTagSrc = path.getSource();
          } catch (error) {}

          throw path.buildCodeFrameError('Detected nested style tag' + (styleTagSrc ? ": \n\n".concat(styleTagSrc, "\n\n") : ' ') + 'styled-jsx only allows style tags ' + 'to be direct descendants (children) of the outermost ' + 'JSX element i.e. the subtree root.');
        }

        if (state.externalStyles.length > 0 && path.get('children').filter(function (child) {
          if (!t.isJSXExpressionContainer(child)) {
            return false;
          }

          var expression = child.get('expression');
          return expression && expression.isIdentifier();
        }).length === 1) {
          var _state$externalStyles = state.externalStyles.shift(),
              _state$externalStyles2 = _slicedToArray(_state$externalStyles, 2),
              id = _state$externalStyles2[0],
              _css = _state$externalStyles2[1];

          path.replaceWith((0, _utils.makeStyledJsxTag)(id, _css));
          return;
        }

        var _state$opts = state.opts,
            vendorPrefixes = _state$opts.vendorPrefixes,
            sourceMaps = _state$opts.sourceMaps;

        var stylesInfo = _objectSpread({}, state.styles.shift(), {
          file: state.file,
          staticClassName: state.staticClassName,
          isGlobal: isGlobal,
          plugins: state.plugins,
          vendorPrefixes: vendorPrefixes,
          sourceMaps: sourceMaps
        });

        var splitRules = typeof state.opts.optimizeForSpeed === 'boolean' ? state.opts.optimizeForSpeed : process.env.NODE_ENV === 'production';

        var _processCss = (0, _utils.processCss)(stylesInfo, {
          splitRules: splitRules
        }),
            hash = _processCss.hash,
            css = _processCss.css,
            expressions = _processCss.expressions;

        path.replaceWith((0, _utils.makeStyledJsxTag)(hash, css, expressions));
      }
    } // only apply JSXFragment visitor if supported

  };

  if (t.isJSXFragment) {
    jsxVisitors.JSXFragment = jsxVisitors.JSXElement;
    jsxVisitors.JSXOpeningFragment = {
      enter: function enter(path, state) {
        if (!state.hasJSXStyle) {
          return;
        }

        if (state.ignoreClosing === null) {
          // We keep a counter of elements inside so that we
          // can keep track of when we exit the parent to reset state
          // note: if we wished to add an option to turn off
          // selectors to reach parent elements, it would suffice to
          // set this to `1` and do an early return instead
          state.ignoreClosing = 0;
        }

        state.ignoreClosing++;
      }
    };
  }

  var visitors = {
    inherits: _babelPluginSyntaxJsx.default,
    visitor: _objectSpread({
      Program: {
        enter: function enter(path, state) {
          state.hasJSXStyle = null;
          state.ignoreClosing = null;
          state.file.hasJSXStyle = false;
          (0, _utils.setStateOptions)(state); // we need to beat the arrow function transform and
          // possibly others so we traverse from here or else
          // dynamic values in classNames could be incorrect

          path.traverse(jsxVisitors, state);
        },
        exit: function exit(_ref3, state) {
          var node = _ref3.node,
              scope = _ref3.scope;

          if (!(state.file.hasJSXStyle && !state.hasInjectedJSXStyle && !scope.hasBinding(_constants.STYLE_COMPONENT))) {
            return;
          }

          state.hasInjectedJSXStyle = true;
          var importDeclaration = (0, _utils.createReactComponentImportDeclaration)();
          node.body.unshift(importDeclaration);
        }
      }
    }, _babelExternal.visitor)
  };
  return visitors;
}