🎉 Restore from production

LICENCE

+MIT License
+
+Copyright (c) 2018 Maxim Alyoshin
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
\ No newline at end of file

README.md

+# styled-breakpoints
+
+Simple and powerfull css breakpoints for [styled-components](https://github.com/styled-components/styled-components).
+
+> You can use it with [emotion](https://github.com/emotion-js/emotion) too
+
+## Demo Sandbox
+
+[code](https://codesandbox.io/s/23583q00o0)
+
+[fullscreen](https://23583q00o0.codesandbox.io/)
+
+## Installation
+
+Use yarn or npm
+
+```
+yarn add styled-breakpoints
+```
+
+```
+npm i styled-breakpoints
+```
+
+## Get Started
+
+The following values of breakpoints are used by default.
+
+```js
+const defaultBreakpoints = {
+  tablet: '768px',
+  desktop: '992px',
+  lgDesktop: '1200px',
+};
+```
+
+```js
+import styled from 'styled-components';
+import { above, below, between, only } from 'styled-breakpoints';
+
+const SyledComponent = styled.div`
+  background-color: pink;
+
+  ${above('tablet')} {
+    background-color: hotpink;
+  }
+`;
+```
+
+Converts to pure css:
+
+```css
+div {
+  background-color: pink;
+}
+/* 768px / 16px */
+@media screen and (min-width: 48em) {
+  div {
+    background-color: hotpink;
+  }
+}
+```
+
+### Above
+
+```js
+css`
+  ${above('tablet')} {
+    background-color: hotpink;
+  }
+`;
+```
+
+Converts to:
+
+```css
+@media screen and (min-width: 48em) {
+  div {
+    background-color: hotpink;
+  }
+}
+```
+
+### Below
+
+```js
+css`
+  ${below('desktop')} {
+    background-color: lightcoral;
+  }
+`;
+```
+
+Converts to:
+
+```css
+/* (1200px - 0.02px) / 16px */
+@media screen and (max-width: 74.99875em) {
+  div {
+    background-color: lightcoral;
+  }
+}
+```
+
+### Between
+
+```js
+css`
+  ${between('tablet', 'desktop')} {
+    background-color: hotpink;
+  }
+`;
+```
+
+Converts to:
+
+```css
+/* 778px / 16px                  (1200px - 0.02px) / 16px */
+@media screen and (min-width: 48em) and (max-width: 74.99875em) {
+  div {
+    background-color: hotpink;
+  }
+}
+```
+
+### Only
+
+```js
+css`
+  ${only('tablet')} {
+    background-color: rebeccapurple;
+  }
+`;
+```
+
+Converts to:
+
+```css
+/*
+  778px / 16px                  (992px - 0.02px) / 16px */
+@media screen and (min-width: 48em) and (max-width: 61.99875em) {
+  div {
+    background-color: rebeccapurple;
+  }
+}
+```
+
+### Custom breakpoints
+
+```js
+import styled from 'styled-components';
+import { createBreakpoints } from 'styled-breakpoints';
+
+const { above, below, between, only } = createBreakpoints({
+  sm: '576px',
+  md: '768px',
+  lg: '992px',
+  xl: '1200px',
+});
+
+const StyledComponent = styled.div`
+  background-color: pink;
+
+  ${above('md')} {
+    background-color: hotpink;
+  }
+`;
+```
+
+## License
+
+MIT License
+
+Copyright (c) 2018 Maxim Alyoshin
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

dist/styled-breakpoints.common.js

+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var BROWSER_DEFAULT_FONT_SIZE = 16;
+var pixelsToEm = function pixelsToEm(inPx) {
+  return parseFloat(inPx) / BROWSER_DEFAULT_FONT_SIZE + "em";
+};
+
+var getNextBreakName = function getNextBreakName(breakpointValue, breakpoints) {
+  var namesOfBreakpoins = Object.keys(breakpoints);
+  var penultimateBreakName = namesOfBreakpoins[namesOfBreakpoins.length - 2];
+  var currentPosition = namesOfBreakpoins.indexOf(breakpointValue);
+
+  try {
+    if (currentPosition < namesOfBreakpoins.length - 1) {
+      var nextBreak = currentPosition + 1;
+      return namesOfBreakpoins["" + nextBreak];
+    }
+
+    throw new Error("\"styled-breakpoints: " + breakpointValue + "\" is incorrect value. Use " + penultimateBreakName + ".");
+  } catch (err) {
+    console.warn(err);
+  }
+};
+
+var getNextBreakValue = function getNextBreakValue(breakpointValue, breakpoints) {
+  if (breakpoints === void 0) {
+    breakpoints = {};
+  }
+
+  var result = null;
+
+  try {
+    var breakName = getNextBreakName(breakpointValue, breakpoints);
+
+    if (breakpoints[breakpointValue]) {
+      result = parseFloat(breakpoints[breakName]) - 0.02 + "px";
+    } else if (parseInt(breakpointValue, 10)) {
+      result = "" + (Number(breakpointValue) - 0.02);
+    } else {
+      throw new Error("styled-breakpoints: " + breakpointValue + " no valid breakpoint or size specified for media.");
+    }
+  } catch (err) {
+    console.warn(err);
+  }
+
+  return result;
+};
+var getBreakValue = function getBreakValue(breakpointValue, breakpoints) {
+  if (breakpoints === void 0) {
+    breakpoints = {};
+  }
+
+  var result = null;
+
+  try {
+    if (breakpoints[breakpointValue]) {
+      result = breakpoints[breakpointValue];
+    } else if (parseInt(breakpointValue, 10)) {
+      result = breakpointValue;
+    } else {
+      throw new Error('styled-breakpoints: No valid breakpoint or size specified for media.');
+    }
+  } catch (err) {
+    console.warn(err);
+  }
+
+  return result;
+};
+
+/**
+ * Default media breakpoints
+ * @type {Object}
+ */
+
+var defaultBreakpoints = {
+  tablet: '768px',
+  desktop: '992px',
+  lgDesktop: '1200px'
+};
+
+var createAbove = function createAbove(breakpointsMap) {
+  return function (breakpointKey) {
+    var ems = pixelsToEm(getBreakValue(breakpointKey, breakpointsMap));
+    return "@media screen and (min-width: " + ems + ")";
+  };
+};
+
+var createBelow = function createBelow(breakpointsMap) {
+  return function (breakpointKey) {
+    var ems = pixelsToEm(getBreakValue(breakpointKey, breakpointsMap));
+    return "@media screen and (max-width: " + ems + ")";
+  };
+};
+
+var createBetween = function createBetween(breakpointsMap) {
+  return function (fromBp, toBp) {
+    var minEms = pixelsToEm(getBreakValue(fromBp, breakpointsMap));
+    var maxEms = pixelsToEm(getNextBreakValue(toBp, breakpointsMap));
+    return "@media screen and (min-width: " + minEms + ") and (max-width: " + maxEms + ")";
+  };
+};
+
+var createOnly = function createOnly(breakpointsMap) {
+  return function (breakpointKey) {
+    var minEms = pixelsToEm(getBreakValue(breakpointKey, breakpointsMap));
+    var maxEms = pixelsToEm(getNextBreakValue(breakpointKey, breakpointsMap));
+    return "@media screen and (min-width: " + minEms + ") and (max-width: " + maxEms + ")";
+  };
+};
+/**
+ * Media query generator
+ * @param {Object} breakpoints - Map labels to breakpoint sizes
+ * @return {Object} - Media generators for each breakpoint
+ */
+
+
+var createBreakpoints = function createBreakpoints(breakpoints) {
+  if (breakpoints === void 0) {
+    breakpoints = defaultBreakpoints;
+  }
+
+  var above = createAbove(breakpoints);
+  var below = createBelow(breakpoints);
+  var between = createBetween(breakpoints);
+  var only = createOnly(breakpoints);
+  return {
+    above: above,
+    below: below,
+    between: between,
+    only: only
+  };
+};
+/**
+ * Media object with default breakpoints
+ * @return {object} - Media generators for each size
+ */
+
+var _createBreakpoints = createBreakpoints(),
+    above = _createBreakpoints.above,
+    below = _createBreakpoints.below,
+    between = _createBreakpoints.between,
+    only = _createBreakpoints.only;
+
+exports.defaultBreakpoints = defaultBreakpoints;
+exports.createBreakpoints = createBreakpoints;
+exports.above = above;
+exports.below = below;
+exports.between = between;
+exports.only = only;

dist/styled-breakpoints.es.js

+var BROWSER_DEFAULT_FONT_SIZE = 16;
+var pixelsToEm = function pixelsToEm(inPx) {
+  return parseFloat(inPx) / BROWSER_DEFAULT_FONT_SIZE + "em";
+};
+
+var getNextBreakName = function getNextBreakName(breakpointValue, breakpoints) {
+  var namesOfBreakpoins = Object.keys(breakpoints);
+  var penultimateBreakName = namesOfBreakpoins[namesOfBreakpoins.length - 2];
+  var currentPosition = namesOfBreakpoins.indexOf(breakpointValue);
+
+  try {
+    if (currentPosition < namesOfBreakpoins.length - 1) {
+      var nextBreak = currentPosition + 1;
+      return namesOfBreakpoins["" + nextBreak];
+    }
+
+    throw new Error("\"styled-breakpoints: " + breakpointValue + "\" is incorrect value. Use " + penultimateBreakName + ".");
+  } catch (err) {
+    console.warn(err);
+  }
+};
+
+var getNextBreakValue = function getNextBreakValue(breakpointValue, breakpoints) {
+  if (breakpoints === void 0) {
+    breakpoints = {};
+  }
+
+  var result = null;
+
+  try {
+    var breakName = getNextBreakName(breakpointValue, breakpoints);
+
+    if (breakpoints[breakpointValue]) {
+      result = parseFloat(breakpoints[breakName]) - 0.02 + "px";
+    } else if (parseInt(breakpointValue, 10)) {
+      result = "" + (Number(breakpointValue) - 0.02);
+    } else {
+      throw new Error("styled-breakpoints: " + breakpointValue + " no valid breakpoint or size specified for media.");
+    }
+  } catch (err) {
+    console.warn(err);
+  }
+
+  return result;
+};
+var getBreakValue = function getBreakValue(breakpointValue, breakpoints) {
+  if (breakpoints === void 0) {
+    breakpoints = {};
+  }
+
+  var result = null;
+
+  try {
+    if (breakpoints[breakpointValue]) {
+      result = breakpoints[breakpointValue];
+    } else if (parseInt(breakpointValue, 10)) {
+      result = breakpointValue;
+    } else {
+      throw new Error('styled-breakpoints: No valid breakpoint or size specified for media.');
+    }
+  } catch (err) {
+    console.warn(err);
+  }
+
+  return result;
+};
+
+/**
+ * Default media breakpoints
+ * @type {Object}
+ */
+
+var defaultBreakpoints = {
+  tablet: '768px',
+  desktop: '992px',
+  lgDesktop: '1200px'
+};
+
+var createAbove = function createAbove(breakpointsMap) {
+  return function (breakpointKey) {
+    var ems = pixelsToEm(getBreakValue(breakpointKey, breakpointsMap));
+    return "@media screen and (min-width: " + ems + ")";
+  };
+};
+
+var createBelow = function createBelow(breakpointsMap) {
+  return function (breakpointKey) {
+    var ems = pixelsToEm(getBreakValue(breakpointKey, breakpointsMap));
+    return "@media screen and (max-width: " + ems + ")";
+  };
+};
+
+var createBetween = function createBetween(breakpointsMap) {
+  return function (fromBp, toBp) {
+    var minEms = pixelsToEm(getBreakValue(fromBp, breakpointsMap));
+    var maxEms = pixelsToEm(getNextBreakValue(toBp, breakpointsMap));
+    return "@media screen and (min-width: " + minEms + ") and (max-width: " + maxEms + ")";
+  };
+};
+
+var createOnly = function createOnly(breakpointsMap) {
+  return function (breakpointKey) {
+    var minEms = pixelsToEm(getBreakValue(breakpointKey, breakpointsMap));
+    var maxEms = pixelsToEm(getNextBreakValue(breakpointKey, breakpointsMap));
+    return "@media screen and (min-width: " + minEms + ") and (max-width: " + maxEms + ")";
+  };
+};
+/**
+ * Media query generator
+ * @param {Object} breakpoints - Map labels to breakpoint sizes
+ * @return {Object} - Media generators for each breakpoint
+ */
+
+
+var createBreakpoints = function createBreakpoints(breakpoints) {
+  if (breakpoints === void 0) {
+    breakpoints = defaultBreakpoints;
+  }
+
+  var above = createAbove(breakpoints);
+  var below = createBelow(breakpoints);
+  var between = createBetween(breakpoints);
+  var only = createOnly(breakpoints);
+  return {
+    above: above,
+    below: below,
+    between: between,
+    only: only
+  };
+};
+/**
+ * Media object with default breakpoints
+ * @return {object} - Media generators for each size
+ */
+
+var _createBreakpoints = createBreakpoints(),
+    above = _createBreakpoints.above,
+    below = _createBreakpoints.below,
+    between = _createBreakpoints.between,
+    only = _createBreakpoints.only;
+
+export { defaultBreakpoints, createBreakpoints, above, below, between, only };

dist/styled-breakpoints.umd.js

+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports):"function"==typeof define&&define.amd?define(["exports"],n):n(e["styled-breakpoints"]={})}(this,function(e){"use strict";var i=function(e){return parseFloat(e)/16+"em"},a=function(e,n){void 0===n&&(n={});var t=null;try{var r=function(e,n){var t=Object.keys(n),r=t[t.length-2],o=t.indexOf(e);try{if(o<t.length-1)return t[""+(o+1)];throw new Error('"styled-breakpoints: '+e+'" is incorrect value. Use '+r+".")}catch(e){console.warn(e)}}(e,n);if(n[e])t=parseFloat(n[r])-.02+"px";else{if(!parseInt(e,10))throw new Error("styled-breakpoints: "+e+" no valid breakpoint or size specified for media.");t=""+(Number(e)-.02)}}catch(e){console.warn(e)}return t},d=function(e,n){void 0===n&&(n={});var t=null;try{if(n[e])t=n[e];else{if(!parseInt(e,10))throw new Error("styled-breakpoints: No valid breakpoint or size specified for media.");t=e}}catch(e){console.warn(e)}return t},s={tablet:"768px",desktop:"992px",lgDesktop:"1200px"},n=function(e){var n,t,r,o;return void 0===e&&(e=s),{above:(n=e,function(e){return"@media screen and (min-width: "+i(d(e,n))+")"}),below:(t=e,function(e){return"@media screen and (max-width: "+i(d(e,t))+")"}),between:(r=e,function(e,n){return"@media screen and (min-width: "+i(d(e,r))+") and (max-width: "+i(a(n,r))+")"}),only:(o=e,function(e){return"@media screen and (min-width: "+i(d(e,o))+") and (max-width: "+i(a(e,o))+")"})}},t=n(),r=t.above,o=t.below,c=t.between,l=t.only;e.defaultBreakpoints=s,e.createBreakpoints=n,e.above=r,e.below=o,e.between=c,e.only=l,Object.defineProperty(e,"__esModule",{value:!0})});
+//# sourceMappingURL=styled-breakpoints.umd.js.map

dist/styled-breakpoints.umd.js.map

+{"version":3,"file":"styled-breakpoints.umd.js","sources":["../src/helpers.js","../src/index.js"],"sourcesContent":["const BROWSER_DEFAULT_FONT_SIZE = 16;\nexport const pixelsToEm = inPx =>\n  `${parseFloat(inPx) / BROWSER_DEFAULT_FONT_SIZE}em`;\n\nconst getNextBreakName = (breakpointValue, breakpoints) => {\n  const namesOfBreakpoins = Object.keys(breakpoints);\n  const penultimateBreakName = namesOfBreakpoins[namesOfBreakpoins.length - 2];\n  const currentPosition = namesOfBreakpoins.indexOf(breakpointValue);\n\n  try {\n    if (currentPosition < namesOfBreakpoins.length - 1) {\n      const nextBreak = currentPosition + 1;\n      return namesOfBreakpoins[`${nextBreak}`];\n    }\n    throw new Error(\n      `\"styled-breakpoints: ${breakpointValue}\" is incorrect value. Use ${penultimateBreakName}.`,\n    );\n  } catch (err) {\n    console.warn(err);\n  }\n};\n\nexport const getNextBreakValue = (breakpointValue, breakpoints = {}) => {\n  let result = null;\n\n  try {\n    const breakName = getNextBreakName(breakpointValue, breakpoints);\n    if (breakpoints[breakpointValue]) {\n      result = `${parseFloat(breakpoints[breakName]) - 0.02}px`;\n    } else if (parseInt(breakpointValue, 10)) {\n      result = `${Number(breakpointValue) - 0.02}`;\n    } else {\n      throw new Error(\n        `styled-breakpoints: ${breakpointValue} no valid breakpoint or size specified for media.`,\n      );\n    }\n  } catch (err) {\n    console.warn(err);\n  }\n\n  return result;\n};\n\nexport const getBreakValue = (breakpointValue, breakpoints = {}) => {\n  let result = null;\n\n  try {\n    if (breakpoints[breakpointValue]) {\n      result = breakpoints[breakpointValue];\n    } else if (parseInt(breakpointValue, 10)) {\n      result = breakpointValue;\n    } else {\n      throw new Error(\n        'styled-breakpoints: No valid breakpoint or size specified for media.',\n      );\n    }\n  } catch (err) {\n    console.warn(err);\n  }\n\n  return result;\n};\n","import { pixelsToEm, getNextBreakValue, getBreakValue } from './helpers';\n\n/**\n * Default media breakpoints\n * @type {Object}\n */\nexport const defaultBreakpoints = {\n  tablet: '768px',\n  desktop: '992px',\n  lgDesktop: '1200px',\n};\n\nconst createAbove = breakpointsMap => breakpointKey => {\n  const ems = pixelsToEm(getBreakValue(breakpointKey, breakpointsMap));\n  return `@media screen and (min-width: ${ems})`;\n};\n\nconst createBelow = breakpointsMap => breakpointKey => {\n  const ems = pixelsToEm(getBreakValue(breakpointKey, breakpointsMap));\n  return `@media screen and (max-width: ${ems})`;\n};\n\nconst createBetween = breakpointsMap => (fromBp, toBp) => {\n  const minEms = pixelsToEm(getBreakValue(fromBp, breakpointsMap));\n  const maxEms = pixelsToEm(getNextBreakValue(toBp, breakpointsMap));\n  return `@media screen and (min-width: ${minEms}) and (max-width: ${maxEms})`;\n};\n\nconst createOnly = breakpointsMap => breakpointKey => {\n  const minEms = pixelsToEm(getBreakValue(breakpointKey, breakpointsMap));\n  const maxEms = pixelsToEm(getNextBreakValue(breakpointKey, breakpointsMap));\n  return `@media screen and (min-width: ${minEms}) and (max-width: ${maxEms})`;\n};\n\n/**\n * Media query generator\n * @param {Object} breakpoints - Map labels to breakpoint sizes\n * @return {Object} - Media generators for each breakpoint\n */\nexport const createBreakpoints = (breakpoints = defaultBreakpoints) => {\n  const above = createAbove(breakpoints);\n  const below = createBelow(breakpoints);\n  const between = createBetween(breakpoints);\n  const only = createOnly(breakpoints);\n\n  return { above, below, between, only };\n};\n\n/**\n * Media object with default breakpoints\n * @return {object} - Media generators for each size\n */\nexport const { above, below, between, only } = createBreakpoints();\n"],"names":["pixelsToEm","inPx","parseFloat","getNextBreakValue","breakpointValue","breakpoints","result","breakName","namesOfBreakpoins","Object","keys","penultimateBreakName","length","currentPosition","indexOf","Error","err","console","warn","getNextBreakName","parseInt","Number","getBreakValue","defaultBreakpoints","tablet","desktop","lgDesktop","createBreakpoints","breakpointsMap","above","breakpointKey","below","between","fromBp","toBp","only"],"mappings":"wMAAA,IACaA,EAAa,SAAAC,UACrBC,WAAWD,GAFkB,SAsBrBE,EAAoB,SAACC,EAAiBC,YAAAA,IAAAA,EAAc,QAC3DC,EAAS,aAGLC,EAtBe,SAACH,EAAiBC,OACnCG,EAAoBC,OAAOC,KAAKL,GAChCM,EAAuBH,EAAkBA,EAAkBI,OAAS,GACpEC,EAAkBL,EAAkBM,QAAQV,UAG5CS,EAAkBL,EAAkBI,OAAS,SAExCJ,MADWK,EAAkB,UAGhC,IAAIE,8BACgBX,+BAA4CO,OAEtE,MAAOK,GACPC,QAAQC,KAAKF,IAQKG,CAAiBf,EAAiBC,MAChDA,EAAYD,GACdE,EAAYJ,WAAWG,EAAYE,IAAc,aAC5C,CAAA,IAAIa,SAAShB,EAAiB,UAG7B,IAAIW,6BACeX,uDAHzBE,MAAYe,OAAOjB,GAAmB,MAMxC,MAAOY,GACPC,QAAQC,KAAKF,UAGRV,GAGIgB,EAAgB,SAAClB,EAAiBC,YAAAA,IAAAA,EAAc,QACvDC,EAAS,YAGPD,EAAYD,GACdE,EAASD,EAAYD,OAChB,CAAA,IAAIgB,SAAShB,EAAiB,UAG7B,IAAIW,MACR,wEAHFT,EAASF,GAMX,MAAOY,GACPC,QAAQC,KAAKF,UAGRV,GCtDIiB,EAAqB,CAChCC,OAAQ,QACRC,QAAS,QACTC,UAAW,UA8BAC,EAAoB,SAACtB,OA3BduB,EAKAA,EAKEA,EAMHA,kBAWevB,IAAAA,EAAckB,GAMvC,CAAEM,OAjCSD,EA4BQvB,EA5BU,SAAAyB,0CACxB9B,EAAWsB,EAAcQ,EAAeF,UAgCpCG,OA5BEH,EAwBQvB,EAxBU,SAAAyB,0CACxB9B,EAAWsB,EAAcQ,EAAeF,UA2B7BI,SAvBHJ,EAoBUvB,EApBQ,SAAC4B,EAAQC,0CAChClC,EAAWsB,EAAcW,EAAQL,yBACjC5B,EAAWG,EAAkB+B,EAAMN,UAqBlBO,MAjBfP,EAeOvB,EAfW,SAAAyB,0CACpB9B,EAAWsB,EAAcQ,EAAeF,yBACxC5B,EAAWG,EAAkB2B,EAAeF,cAsBdD,IAAhCE,IAAAA,MAAOE,IAAAA,MAAOC,IAAAA,QAASG,IAAAA"}
\ No newline at end of file

package.json

+{
+  "name": "styled-breakpoints",
+  "version": "4.0.3",
+  "description": "Simple and powerfull css breakpoints for styled-components",
+  "main": "dist/styled-breakpoints.common.js",
+  "module": "dist/styled-breakpoints.es.js",
+  "jsnext:main": "dist/styled-breakpoints.es.js",
+  "keywords": [
+    "styled-components",
+    "media-query",
+    "media",
+    "breakpoint",
+    "css-in-js"
+  ],
+  "scripts": {
+    "unit:watch": "NODE_ENV=test jest --watch",
+    "build": "npm run clean && npm run build:common && npm run build:es && npm run build:browser",
+    "build:common": "cross-env  rollup -c --environment COMMON,PRODUCTION",
+    "build:es": "cross-env  rollup -c --environment ES",
+    "build:browser": "cross-env rollup -c --environment BROWSER,PRODUCTION",
+    "clean": "cross-env rimraf dist"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/maxinakenty/styled-breakpoints.git"
+  },
+  "contributors": [
+    "Maxim Alyoshing <mgreen097@gmail.com>",
+    "Sergey Sova <mail@sergeysova.com> (https://sergeysova.com)",
+    "Scott Dowding (https://github.com/sdowding)"
+  ],
+  "license": "MIT",
+  "devDependencies": {
+    "@babel/core": "^7.1.2",
+    "@babel/preset-env": "^7.1.0",
+    "babel-jest": "^23.6.0",
+    "cross-env": "^5.2.0",
+    "eslint": "^5.8.0",
+    "eslint-config-airbnb": "^17.1.0",
+    "eslint-config-prettier": "^3.1.0",
+    "eslint-plugin-import": "^2.11.0",
+    "eslint-plugin-jsx-a11y": "^6.0.3",
+    "eslint-plugin-prettier": "^3.0.0",
+    "eslint-plugin-react": "^7.7.0",
+    "jest": "^23.6.0",
+    "rimraf": "^2.6.2",
+    "rollup": "^0.67.0",
+    "rollup-plugin-babel": "^4.0.3",
+    "rollup-plugin-commonjs": "^9.2.0",
+    "rollup-plugin-node-resolve": "^3.0.0",
+    "rollup-plugin-uglify": "^6.0.0",
+    "styled-components": "^4.0.3"
+  },
+  "jest": {
+    "collectCoverage": false,
+    "transform": {
+      "^.+\\.js$": "./node_modules/babel-jest"
+    },
+    "testFileExtensions": [
+      "es6",
+      "js"
+    ],
+    "moduleFileExtensions": [
+      "js",
+      "json",
+      "es6"
+    ]
+  }
+}

rollup.config.js

+import resolve from 'rollup-plugin-node-resolve';
+import babel from 'rollup-plugin-babel';
+import commonjs from 'rollup-plugin-commonjs';
+import { uglify } from 'rollup-plugin-uglify';
+
+const prod = process.env.PRODUCTION;
+let config = {
+  input: 'src/index.js',
+  external: ['react', 'styled-components'],
+};
+
+const plugins = [resolve(), commonjs(), babel()];
+
+if (prod) plugins.push(uglify());
+
+if (process.env.BROWSER) {
+  config = {
+    ...config,
+    output: {
+      file: 'dist/styled-breakpoints.umd.js',
+      sourcemap: true,
+      format: 'umd',
+      exports: 'named',
+      name: 'styled-breakpoints',
+    },
+    plugins,
+  };
+} else if (process.env.COMMON) {
+  config = {
+    ...config,
+    plugins: [resolve(), commonjs(), babel()],
+    output: {
+      file: 'dist/styled-breakpoints.common.js',
+      format: 'cjs',
+    },
+  };
+} else if (process.env.ES) {
+  config = {
+    ...config,
+    plugins: [resolve(), commonjs(), babel()],
+    output: {
+      file: 'dist/styled-breakpoints.es.js',
+      format: 'es',
+    },
+  };
+}
+
+export default config;

src/helpers.js

+const BROWSER_DEFAULT_FONT_SIZE = 16;
+export const pixelsToEm = inPx =>
+  `${parseFloat(inPx) / BROWSER_DEFAULT_FONT_SIZE}em`;
+
+const getNextBreakName = (breakpointValue, breakpoints) => {
+  const namesOfBreakpoins = Object.keys(breakpoints);
+  const penultimateBreakName = namesOfBreakpoins[namesOfBreakpoins.length - 2];
+  const currentPosition = namesOfBreakpoins.indexOf(breakpointValue);
+
+  try {
+    if (currentPosition < namesOfBreakpoins.length - 1) {
+      const nextBreak = currentPosition + 1;
+      return namesOfBreakpoins[`${nextBreak}`];
+    }
+    throw new Error(
+      `"styled-breakpoints: ${breakpointValue}" is incorrect value. Use ${penultimateBreakName}.`,
+    );
+  } catch (err) {
+    console.warn(err);
+  }
+};
+
+export const getNextBreakValue = (breakpointValue, breakpoints = {}) => {
+  let result = null;
+
+  try {
+    const breakName = getNextBreakName(breakpointValue, breakpoints);
+    if (breakpoints[breakpointValue]) {
+      result = `${parseFloat(breakpoints[breakName]) - 0.02}px`;
+    } else if (parseInt(breakpointValue, 10)) {
+      result = `${Number(breakpointValue) - 0.02}`;
+    } else {
+      throw new Error(
+        `styled-breakpoints: ${breakpointValue} no valid breakpoint or size specified for media.`,
+      );
+    }
+  } catch (err) {
+    console.warn(err);
+  }
+
+  return result;
+};
+
+export const getBreakValue = (breakpointValue, breakpoints = {}) => {
+  let result = null;
+
+  try {
+    if (breakpoints[breakpointValue]) {
+      result = breakpoints[breakpointValue];
+    } else if (parseInt(breakpointValue, 10)) {
+      result = breakpointValue;
+    } else {
+      throw new Error(
+        'styled-breakpoints: No valid breakpoint or size specified for media.',
+      );
+    }
+  } catch (err) {
+    console.warn(err);
+  }
+
+  return result;
+};

src/index.js

+import { pixelsToEm, getNextBreakValue, getBreakValue } from './helpers';
+
+/**
+ * Default media breakpoints
+ * @type {Object}
+ */
+export const defaultBreakpoints = {
+  tablet: '768px',
+  desktop: '992px',
+  lgDesktop: '1200px',
+};
+
+const createAbove = breakpointsMap => breakpointKey => {
+  const ems = pixelsToEm(getBreakValue(breakpointKey, breakpointsMap));
+  return `@media screen and (min-width: ${ems})`;
+};
+
+const createBelow = breakpointsMap => breakpointKey => {
+  const ems = pixelsToEm(getBreakValue(breakpointKey, breakpointsMap));
+  return `@media screen and (max-width: ${ems})`;
+};
+
+const createBetween = breakpointsMap => (fromBp, toBp) => {
+  const minEms = pixelsToEm(getBreakValue(fromBp, breakpointsMap));
+  const maxEms = pixelsToEm(getNextBreakValue(toBp, breakpointsMap));
+  return `@media screen and (min-width: ${minEms}) and (max-width: ${maxEms})`;
+};
+
+const createOnly = breakpointsMap => breakpointKey => {
+  const minEms = pixelsToEm(getBreakValue(breakpointKey, breakpointsMap));
+  const maxEms = pixelsToEm(getNextBreakValue(breakpointKey, breakpointsMap));
+  return `@media screen and (min-width: ${minEms}) and (max-width: ${maxEms})`;
+};
+
+/**
+ * Media query generator
+ * @param {Object} breakpoints - Map labels to breakpoint sizes
+ * @return {Object} - Media generators for each breakpoint
+ */
+export const createBreakpoints = (breakpoints = defaultBreakpoints) => {
+  const above = createAbove(breakpoints);
+  const below = createBelow(breakpoints);
+  const between = createBetween(breakpoints);
+  const only = createOnly(breakpoints);
+
+  return { above, below, between, only };
+};
+
+/**
+ * Media object with default breakpoints
+ * @return {object} - Media generators for each size
+ */
+export const { above, below, between, only } = createBreakpoints();