styled-breakpoints - npm Package Compare versions

Comparing version 0.0.1-alpha.11 to 0.0.1-alpha.12

dist/styled-breakpoints.common.js

@@ -38,7 +38,3 @@ 'use strict';
  */
-function toEm(breakpoints) {
-  var ratio = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 16;
 
-  return toEmOrRem(breakpoints, ratio, 'em');
-}
 
@@ -56,12 +52,13 @@ /**
 
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
 var _templateObject = _taggedTemplateLiteralLoose(['\n    @media screen and (min-width: ', ') {\n      ', ';\n    }\n  '], ['\n    @media screen and (min-width: ', ') {\n      ', ';\n    }\n  ']);
 var _templateObject2 = _taggedTemplateLiteralLoose(['\n    @media screen and (max-width: ', ') {\n      ', ';\n    }\n  '], ['\n    @media screen and (max-width: ', ') {\n      ', ';\n    }\n  ']);
 var _templateObject3 = _taggedTemplateLiteralLoose(['\n    @media screen and (min-width: ', ') and (max-width: ', ') {\n      ', ';\n    }\n  '], ['\n    @media screen and (min-width: ', ') and (max-width: ', ') {\n      ', ';\n    }\n  ']);
-var _templateObject4 = _taggedTemplateLiteralLoose(['\n          @media (max-width: ', ') {\n            ', ';\n          }\n        '], ['\n          @media (max-width: ', ') {\n            ', ';\n          }\n        ']);
-var _templateObject5 = _taggedTemplateLiteralLoose(['\n          @media (min-width: ', ') {\n            ', ';\n          }\n        '], ['\n          @media (min-width: ', ') {\n            ', ';\n          }\n        ']);
 
 function _taggedTemplateLiteralLoose(strings, raw) { strings.raw = raw; return strings; }
 
+var BROWSER_DEFAULT_FONT_SIZE = 16;
+var toEm = function toEm(inPx) {
+  return parseFloat(inPx) / BROWSER_DEFAULT_FONT_SIZE + 'em';
+};
+
 /**
@@ -145,3 +142,3 @@ * Default media breakpoints
     return function () {
-      return styledComponents.css(_templateObject, _getBreakValue(breakpointValue, breakpoints), styledComponents.css.apply(undefined, arguments));
+      return styledComponents.css(_templateObject, toEm(_getBreakValue(breakpointValue, breakpoints)), styledComponents.css.apply(undefined, arguments));
     };
@@ -152,3 +149,3 @@ };
     return function () {
-      return styledComponents.css(_templateObject2, _getNextBreakValue(breakpointValue, breakpoints), styledComponents.css.apply(undefined, arguments));
+      return styledComponents.css(_templateObject2, toEm(_getNextBreakValue(breakpointValue, breakpoints)), styledComponents.css.apply(undefined, arguments));
     };
@@ -159,3 +156,3 @@ };
     return function () {
-      return styledComponents.css(_templateObject3, _getBreakValue(breakpointValue, breakpoints), _getNextBreakValue(breakpointValue, breakpoints), styledComponents.css.apply(undefined, arguments));
+      return styledComponents.css(_templateObject3, toEm(_getBreakValue(breakpointValue, breakpoints)), toEm(_getNextBreakValue(breakpointValue, breakpoints)), styledComponents.css.apply(undefined, arguments));
     };
@@ -166,23 +163,7 @@ };
     return function () {
-      return styledComponents.css(_templateObject3, _getBreakValue(firstBreakpoint, breakpoints), _getNextBreakValue(secondBreakpoint, breakpoints), styledComponents.css.apply(undefined, arguments));
+      return styledComponents.css(_templateObject3, toEm(_getBreakValue(firstBreakpoint, breakpoints)), toEm(_getNextBreakValue(secondBreakpoint, breakpoints)), styledComponents.css.apply(undefined, arguments));
     };
   };
 
-  var oldStyle = Object.keys(breakpoints).reduce(function (acc, label) {
-    var size = breakpoints[label];
-
-    acc.to[label] = function () {
-      console.warn('styled-breakpoints: Use media.below(\'' + label + '\') instead of old media.to.' + label + ' (Probably we\'ll deprecate it)');
-      return styledComponents.css(_templateObject4, size, styledComponents.css.apply(undefined, arguments));
-    };
-
-    acc.from[label] = function () {
-      console.warn('styled-breakpoints: Use media.above(\'' + label + '\') instead of old media.from.' + label + ' (Probably we\'ll deprecate it)');
-      return styledComponents.css(_templateObject5, size, styledComponents.css.apply(undefined, arguments));
-    };
-
-    return acc;
-  }, { to: {}, from: {} });
-
-  return _extends({}, oldStyle, { below: below, above: above, only: only, between: between });
+  return { below: below, above: above, only: only, between: between };
 };
@@ -201,3 +182,2 @@
 
-exports.toEm = toEm;
 exports.toRem = toRem;
@@ -204,0 +184,0 @@ exports.defaultBreakpoints = defaultBreakpoints;

dist/styled-breakpoints.es.js

@@ -34,7 +34,3 @@ import { css } from 'styled-components';
  */
-function toEm(breakpoints) {
-  var ratio = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 16;
 
-  return toEmOrRem(breakpoints, ratio, 'em');
-}
 
@@ -52,12 +48,13 @@ /**
 
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
 var _templateObject = _taggedTemplateLiteralLoose(['\n    @media screen and (min-width: ', ') {\n      ', ';\n    }\n  '], ['\n    @media screen and (min-width: ', ') {\n      ', ';\n    }\n  ']);
 var _templateObject2 = _taggedTemplateLiteralLoose(['\n    @media screen and (max-width: ', ') {\n      ', ';\n    }\n  '], ['\n    @media screen and (max-width: ', ') {\n      ', ';\n    }\n  ']);
 var _templateObject3 = _taggedTemplateLiteralLoose(['\n    @media screen and (min-width: ', ') and (max-width: ', ') {\n      ', ';\n    }\n  '], ['\n    @media screen and (min-width: ', ') and (max-width: ', ') {\n      ', ';\n    }\n  ']);
-var _templateObject4 = _taggedTemplateLiteralLoose(['\n          @media (max-width: ', ') {\n            ', ';\n          }\n        '], ['\n          @media (max-width: ', ') {\n            ', ';\n          }\n        ']);
-var _templateObject5 = _taggedTemplateLiteralLoose(['\n          @media (min-width: ', ') {\n            ', ';\n          }\n        '], ['\n          @media (min-width: ', ') {\n            ', ';\n          }\n        ']);
 
 function _taggedTemplateLiteralLoose(strings, raw) { strings.raw = raw; return strings; }
 
+var BROWSER_DEFAULT_FONT_SIZE = 16;
+var toEm = function toEm(inPx) {
+  return parseFloat(inPx) / BROWSER_DEFAULT_FONT_SIZE + 'em';
+};
+
 /**
@@ -141,3 +138,3 @@ * Default media breakpoints
     return function () {
-      return css(_templateObject, _getBreakValue(breakpointValue, breakpoints), css.apply(undefined, arguments));
+      return css(_templateObject, toEm(_getBreakValue(breakpointValue, breakpoints)), css.apply(undefined, arguments));
     };
@@ -148,3 +145,3 @@ };
     return function () {
-      return css(_templateObject2, _getNextBreakValue(breakpointValue, breakpoints), css.apply(undefined, arguments));
+      return css(_templateObject2, toEm(_getNextBreakValue(breakpointValue, breakpoints)), css.apply(undefined, arguments));
     };
@@ -155,3 +152,3 @@ };
     return function () {
-      return css(_templateObject3, _getBreakValue(breakpointValue, breakpoints), _getNextBreakValue(breakpointValue, breakpoints), css.apply(undefined, arguments));
+      return css(_templateObject3, toEm(_getBreakValue(breakpointValue, breakpoints)), toEm(_getNextBreakValue(breakpointValue, breakpoints)), css.apply(undefined, arguments));
     };
@@ -162,23 +159,7 @@ };
     return function () {
-      return css(_templateObject3, _getBreakValue(firstBreakpoint, breakpoints), _getNextBreakValue(secondBreakpoint, breakpoints), css.apply(undefined, arguments));
+      return css(_templateObject3, toEm(_getBreakValue(firstBreakpoint, breakpoints)), toEm(_getNextBreakValue(secondBreakpoint, breakpoints)), css.apply(undefined, arguments));
     };
   };
 
-  var oldStyle = Object.keys(breakpoints).reduce(function (acc, label) {
-    var size = breakpoints[label];
-
-    acc.to[label] = function () {
-      console.warn('styled-breakpoints: Use media.below(\'' + label + '\') instead of old media.to.' + label + ' (Probably we\'ll deprecate it)');
-      return css(_templateObject4, size, css.apply(undefined, arguments));
-    };
-
-    acc.from[label] = function () {
-      console.warn('styled-breakpoints: Use media.above(\'' + label + '\') instead of old media.from.' + label + ' (Probably we\'ll deprecate it)');
-      return css(_templateObject5, size, css.apply(undefined, arguments));
-    };
-
-    return acc;
-  }, { to: {}, from: {} });
-
-  return _extends({}, oldStyle, { below: below, above: above, only: only, between: between });
+  return { below: below, above: above, only: only, between: between };
 };
@@ -197,3 +178,3 @@
 
-export { toEm, toRem, defaultBreakpoints, _getBreakValue, generateMedia };export default index;
+export { toRem, defaultBreakpoints, _getBreakValue, generateMedia };export default index;
 //# sourceMappingURL=styled-breakpoints.es.js.map

dist/styled-breakpoints.umd.js

@@ -1,2 +0,2 @@
-!function(n,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("styled-components")):"function"==typeof define&&define.amd?define(["exports","styled-components"],e):e(n["styled-breakpoints"]={},n.styledComponents)}(this,function(n,e){"use strict";function t(n){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:16,t=arguments[2],r={};for(var i in n){var o=n[i];String(o).includes("px")?r[i]=+parseInt(o,10)/e+t:r[i]=o}return r}function r(n,e){return n.raw=e,n}var i=Object.assign||function(n){for(var e=1;e<arguments.length;e++){var t=arguments[e];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(n[r]=t[r])}return n},o=r(["\n    @media screen and (min-width: ",") {\n      ",";\n    }\n  "],["\n    @media screen and (min-width: ",") {\n      ",";\n    }\n  "]),a=r(["\n    @media screen and (max-width: ",") {\n      ",";\n    }\n  "],["\n    @media screen and (max-width: ",") {\n      ",";\n    }\n  "]),s=r(["\n    @media screen and (min-width: ",") and (max-width: ",") {\n      ",";\n    }\n  "],["\n    @media screen and (min-width: ",") and (max-width: ",") {\n      ",";\n    }\n  "]),d=r(["\n          @media (max-width: ",") {\n            ",";\n          }\n        "],["\n          @media (max-width: ",") {\n            ",";\n          }\n        "]),c=r(["\n          @media (min-width: ",") {\n            ",";\n          }\n        "],["\n          @media (min-width: ",") {\n            ",";\n          }\n        "]),l={mobile:"576px",tablet:"768px",desktop:"992px",lgDesktop:"1200px"},u=function(n,e){var t=Object.keys(e),r=t[t.length-2],i=t.indexOf(n);try{if(i<t.length-1)return t[""+(i+1)];throw new Error('"styled-breakpoints: '+n+'" is incorrect value. Use '+r+".")}catch(n){console.warn(n)}},f=function(n){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},t=null;try{var r=u(n,e);if(e[n])t=parseFloat(e[r])-.02+"px";else{if(!parseInt(n,10))throw new Error("styled-breakpoints: "+n+" no valid breakpoint or size specified for media.");t=""+(Number(n)-.02)}}catch(n){console.warn(n)}return t},p=function(n){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},t=null;try{if(e[n])t=e[n];else{if(!parseInt(n,10))throw new Error("styled-breakpoints: No valid breakpoint or size specified for media.");t=n}}catch(n){console.warn(n)}return t},m=function(){var n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:l,t=Object.keys(n).reduce(function(t,r){var i=n[r];return t.to[r]=function(){return console.warn("styled-breakpoints: Use media.below('"+r+"') instead of old media.to."+r+" (Probably we'll deprecate it)"),e.css(d,i,e.css.apply(void 0,arguments))},t.from[r]=function(){return console.warn("styled-breakpoints: Use media.above('"+r+"') instead of old media.from."+r+" (Probably we'll deprecate it)"),e.css(c,i,e.css.apply(void 0,arguments))},t},{to:{},from:{}});return i({},t,{below:function(t){return function(){return e.css(a,f(t,n),e.css.apply(void 0,arguments))}},above:function(t){return function(){return e.css(o,p(t,n),e.css.apply(void 0,arguments))}},only:function(t){return function(){return e.css(s,p(t,n),f(t,n),e.css.apply(void 0,arguments))}},between:function(t,r){return function(){return e.css(s,p(t,n),f(r,n),e.css.apply(void 0,arguments))}}})},v=m();n.toEm=function(n){return t(n,arguments.length>1&&void 0!==arguments[1]?arguments[1]:16,"em")},n.toRem=function(n){return t(n,arguments.length>1&&void 0!==arguments[1]?arguments[1]:16,"rem")},n.defaultBreakpoints=l,n._getBreakValue=p,n.generateMedia=m,n.default=v,Object.defineProperty(n,"__esModule",{value:!0})});
+!function(n,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("styled-components")):"function"==typeof define&&define.amd?define(["exports","styled-components"],e):e(n["styled-breakpoints"]={},n.styledComponents)}(this,function(n,e){"use strict";function t(n){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:16,t=arguments[2],r={};for(var i in n){var o=n[i];String(o).includes("px")?r[i]=+parseInt(o,10)/e+t:r[i]=o}return r}function r(n,e){return n.raw=e,n}var i=r(["\n    @media screen and (min-width: ",") {\n      ",";\n    }\n  "],["\n    @media screen and (min-width: ",") {\n      ",";\n    }\n  "]),o=r(["\n    @media screen and (max-width: ",") {\n      ",";\n    }\n  "],["\n    @media screen and (max-width: ",") {\n      ",";\n    }\n  "]),a=r(["\n    @media screen and (min-width: ",") and (max-width: ",") {\n      ",";\n    }\n  "],["\n    @media screen and (min-width: ",") and (max-width: ",") {\n      ",";\n    }\n  "]),s=function(n){return parseFloat(n)/16+"em"},d={mobile:"576px",tablet:"768px",desktop:"992px",lgDesktop:"1200px"},c=function(n,e){var t=Object.keys(e),r=t[t.length-2],i=t.indexOf(n);try{if(i<t.length-1)return t[""+(i+1)];throw new Error('"styled-breakpoints: '+n+'" is incorrect value. Use '+r+".")}catch(n){console.warn(n)}},u=function(n){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},t=null;try{var r=c(n,e);if(e[n])t=parseFloat(e[r])-.02+"px";else{if(!parseInt(n,10))throw new Error("styled-breakpoints: "+n+" no valid breakpoint or size specified for media.");t=""+(Number(n)-.02)}}catch(n){console.warn(n)}return t},l=function(n){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},t=null;try{if(e[n])t=e[n];else{if(!parseInt(n,10))throw new Error("styled-breakpoints: No valid breakpoint or size specified for media.");t=n}}catch(n){console.warn(n)}return t},f=function(){var n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:d;return{below:function(t){return function(){return e.css(o,s(u(t,n)),e.css.apply(void 0,arguments))}},above:function(t){return function(){return e.css(i,s(l(t,n)),e.css.apply(void 0,arguments))}},only:function(t){return function(){return e.css(a,s(l(t,n)),s(u(t,n)),e.css.apply(void 0,arguments))}},between:function(t,r){return function(){return e.css(a,s(l(t,n)),s(u(r,n)),e.css.apply(void 0,arguments))}}}},p=f();n.toRem=function(n){return t(n,arguments.length>1&&void 0!==arguments[1]?arguments[1]:16,"rem")},n.defaultBreakpoints=d,n._getBreakValue=l,n.generateMedia=f,n.default=p,Object.defineProperty(n,"__esModule",{value:!0})});
 //# sourceMappingURL=styled-breakpoints.umd.js.map

package.json

 {
   "name": "styled-breakpoints",
-  "version": "0.0.1-alpha.11",
+  "version": "0.0.1-alpha.12",
   "description": "",
@@ -5,0 +5,0 @@ "main": "dist/styled-breakpoints.common.js",

src/index.js

 import { css } from 'styled-components';
-import { toEm, toRem } from './convertors';
+import { toRem } from './convertors';
 
-export { toEm, toRem };
+export { toRem };
 
+const BROWSER_DEFAULT_FONT_SIZE = 16;
+const toEm = inPx => `${parseFloat(inPx) / BROWSER_DEFAULT_FONT_SIZE}em`;
+
 /**
@@ -83,5 +86,4 @@ * Default media breakpoints
   const above = breakpointValue => (...args) => css`
-    @media screen and (min-width: ${_getBreakValue(
-        breakpointValue,
-        breakpoints,
+    @media screen and (min-width: ${toEm(
+        _getBreakValue(breakpointValue, breakpoints),
       )}) {
@@ -93,5 +95,4 @@ ${css(...args)};
   const below = breakpointValue => (...args) => css`
-    @media screen and (max-width: ${_getNextBreakValue(
-        breakpointValue,
-        breakpoints,
+    @media screen and (max-width: ${toEm(
+        _getNextBreakValue(breakpointValue, breakpoints),
       )}) {
@@ -103,6 +104,7 @@ ${css(...args)};
   const only = breakpointValue => (...args) => css`
-    @media screen and (min-width: ${_getBreakValue(
-        breakpointValue,
-        breakpoints,
-      )}) and (max-width: ${_getNextBreakValue(breakpointValue, breakpoints)}) {
+    @media screen and (min-width: ${toEm(
+        _getBreakValue(breakpointValue, breakpoints),
+      )}) and (max-width: ${toEm(
+        _getNextBreakValue(breakpointValue, breakpoints),
+      )}) {
       ${css(...args)};
@@ -113,8 +115,6 @@ }
   const between = (firstBreakpoint, secondBreakpoint) => (...args) => css`
-    @media screen and (min-width: ${_getBreakValue(
-        firstBreakpoint,
-        breakpoints,
-      )}) and (max-width: ${_getNextBreakValue(
-        secondBreakpoint,
-        breakpoints,
+    @media screen and (min-width: ${toEm(
+        _getBreakValue(firstBreakpoint, breakpoints),
+      )}) and (max-width: ${toEm(
+        _getNextBreakValue(secondBreakpoint, breakpoints),
       )}) {
@@ -125,34 +125,3 @@ ${css(...args)};
 
-  const oldStyle = Object.keys(breakpoints).reduce(
-    (acc, label) => {
-      const size = breakpoints[label];
-
-      acc.to[label] = (...args) => {
-        console.warn(
-          `styled-breakpoints: Use media.below('${label}') instead of old media.to.${label} (Probably we'll deprecate it)`,
-        );
-        return css`
-          @media (max-width: ${size}) {
-            ${css(...args)};
-          }
-        `;
-      };
-
-      acc.from[label] = (...args) => {
-        console.warn(
-          `styled-breakpoints: Use media.above('${label}') instead of old media.from.${label} (Probably we'll deprecate it)`,
-        );
-        return css`
-          @media (min-width: ${size}) {
-            ${css(...args)};
-          }
-        `;
-      };
-
-      return acc;
-    },
-    { to: {}, from: {} },
-  );
-
-  return { ...oldStyle, below, above, only, between };
+  return { below, above, only, between };
 };
@@ -159,0 +128,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

45574

decreased by-14.65%

Lines of code

452

decreased by-12.06%

No dependency changes