react-with-styles-interface-amp-aphrodite/lib/ampAphroditeInterfaceFactory.js

An Aphrodite interface for react-with-styles that supports pages rendered using Google's AMP.

'use strict';

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

var _cullResponsiveStylesForAmp = require('./utils/cullResponsiveStylesForAmp');

var _cullResponsiveStylesForAmp2 = _interopRequireDefault(_cullResponsiveStylesForAmp);

var _isAmp = require('./utils/isAmp');

var _isAmp2 = _interopRequireDefault(_isAmp);

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

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; }

var INLINE_STYLE_KEY = 'inlineStyle';

// Replaces inlines styles with styles that will be converted to
// class names. We do this because AMP doesn't support inline styles.
var cssArgNormalizer = function cssArgNormalizer(arg, create) {
  if (Array.isArray(arg)) return arg.map(function (style) {
    return cssArgNormalizer(style, create);
  });

  // NOTE: We rely on the ducktype of style objects as defined in StyleSheet#create,
  // https://github.com/Khan/aphrodite/blob/35e22c4db3e6de451272284ddf811fb54e04f447/src/exports.js#L27
  //       it's always possible that this will change in the future and then
  //       this code will have to be updated to match...
  // eslint-disable-next-line no-underscore-dangle
  if (!arg || arg._definition) return arg;
  return create(_defineProperty({}, INLINE_STYLE_KEY, arg))[INLINE_STYLE_KEY];
};

function withAmp(styles, resolve, create, injectAndGetClassName, defaultSelectorHandlers) {
  if ((0, _isAmp2['default'])()) {
    return {
      className: injectAndGetClassName(false, styles.map(_cullResponsiveStylesForAmp2['default']).map(function (arg) {
        return cssArgNormalizer(arg, create);
      }), defaultSelectorHandlers)
    };
  }

  return resolve(styles);
}

exports['default'] = function (aphroditeInterface, injectAndGetClassName, defaultSelectorHandlers, flushToStyleTag) {
  // In case someone is calling this function directly without supplying these
  // aphrodite function arguments, we want to add a fallback behavior to avoid
  // breaking them.
  // TODO: Remove this block in next semver-major change
  if (!injectAndGetClassName || !defaultSelectorHandlers || !flushToStyleTag) {
    console.warn('You appear to be using ampAphroditeInterfaceFactory in a deprecated a buggy way. Please pass in `injectAndGetClassName`, `defaultSelectorHandlers`, and `flushToStyleTag` as arguments to this function.');

    // eslint-disable-line global-require
    var _require = require('aphrodite');

    injectAndGetClassName = _require.injectAndGetClassName;
    defaultSelectorHandlers = _require.defaultSelectorHandlers;
    flushToStyleTag = _require.flushToStyleTag;
  }

  return {
    create: function () {
      function create(styleHash) {
        return aphroditeInterface.create(styleHash);
      }

      return create;
    }(),
    createLTR: function () {
      function createLTR(styleHash) {
        return aphroditeInterface.createLTR(styleHash);
      }

      return createLTR;
    }(),
    createRTL: function () {
      function createRTL(styleHash) {
        return aphroditeInterface.createRTL(styleHash);
      }

      return createRTL;
    }(),
    resolve: function () {
      function resolve(styles) {
        var resolve = aphroditeInterface.resolve,
            create = aphroditeInterface.create;

        return withAmp(styles, resolve, create, injectAndGetClassName, defaultSelectorHandlers);
      }

      return resolve;
    }(),
    resolveLTR: function () {
      function resolveLTR(styles) {
        var resolveLTR = aphroditeInterface.resolveLTR,
            createLTR = aphroditeInterface.createLTR;

        return withAmp(styles, resolveLTR, createLTR, injectAndGetClassName, defaultSelectorHandlers);
      }

      return resolveLTR;
    }(),
    resolveRTL: function () {
      function resolveRTL(styles) {
        var resolveRTL = aphroditeInterface.resolveRTL,
            createRTL = aphroditeInterface.createRTL;

        return withAmp(styles, resolveRTL, createRTL, injectAndGetClassName, defaultSelectorHandlers);
      }

      return resolveRTL;
    }(),


    // Flushes all buffered styles to a style tag. Required for components
    // that depend upon previous styles in the component tree (i.e.
    // for calculating container width, including padding/margin).
    flush: function () {
      function flush() {
        flushToStyleTag();
      }

      return flush;
    }()
  };
};