Commit 2c139cb1 authored by Lee Yen's avatar Lee Yen

🎉 Restore from production

parents
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
# 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.
'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;
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 };
!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
{"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
{
"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"
]
}
}
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;
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;
};
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();
This source diff could not be displayed because it is too large. You can view the blob instead.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment