react-with-styles-interface-amp-aphrodite/lib/utils/cullResponsiveStylesForAmp.js

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

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.AMP_MAX_WIDTH = undefined;
exports['default'] = cullResponsiveStylesForAmp;

var _object = require('object.assign');

var _object2 = _interopRequireDefault(_object);

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

// Should this be configurable?
var AMP_MAX_WIDTH = exports.AMP_MAX_WIDTH = 743;

// removes all media query styles >= AMP_MAX_WIDTH
// and when it finds rules that match @media (max-width:___px)
// where ___ >= AMP_MAX_WIDTH, it will merge in those rules without the media query
function cullResponsiveStylesForAmp(arg) {
  if (Array.isArray(arg)) return arg.map(cullResponsiveStylesForAmp);
  if (!arg) return arg;

  // eslint-disable-next-line no-underscore-dangle
  var definition = arg._definition;
  if (!definition) return arg;

  var newDefinition = Object.keys(definition).reduce(function (acc, key) {
    if (!key.startsWith('@media')) {
      acc[key] = definition[key];
      return acc;
    }

    var matches = key.match(/^@media \(max-width: ([\d.]+)px\)$/);
    if (matches && parseInt(matches[1], 10) >= AMP_MAX_WIDTH) {
      return (0, _object2['default'])(acc, definition[key]);
    }

    matches = key.match(/min-width: ([\d.]+)/);
    if (matches && parseInt(matches[1], 10) >= AMP_MAX_WIDTH + 1) {
      return acc;
    }

    acc[key] = definition[key];
    return acc;
  }, {});

  return (0, _object2['default'])({}, arg, {
    _definition: newDefinition
  });
}