react-responsive-styled/lib/responsive-set-css.js

Small addition to Styled Components which allows easier Responsive Components and smaller bundle

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
var PARAM_BASE = 'base';
var PARAM_ATTRIBUTE = 'attribute';
var DEFAULT_SW_BREAKPOINTS = {
  base: 0,
  mobileBig: 450,
  tablet: 768,
  laptop: 1024,
  desktop: 1280
};
var minQuery = function minQuery(minWidth) {
  return '@media (min-width: ' + minWidth + 'px)';
};
var DEFAULT_QUERIES = {
  mobileBig: minQuery(DEFAULT_SW_BREAKPOINTS.mobileBig),
  tablet: minQuery(DEFAULT_SW_BREAKPOINTS.tablet),
  laptop: minQuery(DEFAULT_SW_BREAKPOINTS.laptop),
  desktop: minQuery(DEFAULT_SW_BREAKPOINTS.desktop)
};
var mediaCssFunction = function mediaCssFunction(mediaQuery) {
  var styles = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
  return mediaQuery ? mediaQuery + ' {\n    ' + styles.join('') + '\n  }' : styles.join('');
};
var responsiveSetCss = function responsiveSetCss(responsiveSets) {
  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};

  if (!responsiveSets || !responsiveSets.length) {
    return '';
  }

  return options.printCurrent ? currentCss(responsiveSets, options) : mediaResponsiveCss(responsiveSets, options);
};

var currentCss = function currentCss(responsiveSets, options) {
  var cssStack = [];
  var currentScreenWidth = document.body.clientWidth;
  var mediaSizes = options.mediaSizes;

  var sizes = Object.assign(DEFAULT_SW_BREAKPOINTS, mediaSizes || {});

  for (var s = 0; s < responsiveSets.length; s++) {
    var responsiveSet = responsiveSets[s];

    if (!validateResponsiveSet(responsiveSet)) {
      console.error('Responsive Set missing Attribute or Base', responsiveSet);
      continue;
    }

    var cssValue = responsiveSet[PARAM_BASE];
    var valueBySize = 0;
    var setKeys = Object.keys(responsiveSet);
    for (var p = 0; p < setKeys.length; p++) {
      var responsiveParam = setKeys[p];

      if (responsiveParam === PARAM_ATTRIBUTE || isNaN(responsiveParam) && !sizes[responsiveParam] && responsiveParam !== PARAM_BASE) {
        continue;
      }

      var responsiveSize = isNaN(responsiveParam) ? sizes[responsiveParam] : responsiveParam;
      if (responsiveSize <= currentScreenWidth && responsiveSize > valueBySize) {
        cssValue = responsiveSet[responsiveParam];
        valueBySize = responsiveSize;
      }
    }

    var cssLine = responsiveSet[PARAM_ATTRIBUTE] + ': ' + cssValue + ';';
    cssStack.push(cssLine);
  }

  return cssStack.join('');
};

var mediaResponsiveCss = function mediaResponsiveCss(responsiveSets, options) {
  var cssStack = [];
  var paramsStack = {};
  var mediaQueries = options.mediaQueries;

  var queries = Object.assign(DEFAULT_QUERIES, mediaQueries || {});

  for (var s = 0; s < responsiveSets.length; s++) {
    var responsiveSet = responsiveSets[s];

    if (!validateResponsiveSet(responsiveSet)) {
      console.error('Responsive Set missing Attribute or Base', responsiveSet);
      continue;
    }

    var setKeys = Object.keys(responsiveSet);

    for (var p = 0; p < setKeys.length; p++) {
      var responsiveParam = setKeys[p];
      if (responsiveParam === PARAM_ATTRIBUTE || isNaN(responsiveParam) && !queries[responsiveParam] && responsiveParam !== PARAM_BASE) {
        continue;
      }

      if (!paramsStack[responsiveParam]) {
        paramsStack[responsiveParam] = [];
      }

      var cssLine = responsiveSet[PARAM_ATTRIBUTE] + ': ' + responsiveSet[responsiveParam] + ';';
      paramsStack[responsiveParam].push(cssLine);
    }
  }
  var paramsKeys = Object.keys(paramsStack);

  for (var _p = 0; _p < paramsKeys.length; _p++) {
    var _responsiveParam = paramsKeys[_p];
    var query = _responsiveParam !== PARAM_BASE && (queries[_responsiveParam] || minQuery(_responsiveParam));
    var styles = paramsStack[_responsiveParam];

    cssStack.push(mediaCssFunction(query, styles));
  }

  return cssStack.join('');
};

var validateResponsiveSet = function validateResponsiveSet(responsiveSet) {
  return responsiveSet.hasOwnProperty(PARAM_ATTRIBUTE) && responsiveSet.hasOwnProperty(PARAM_BASE);
};

exports.default = responsiveSetCss;