BREAKING: now helpers just return media query, without wrapping css

Before: css` ${media.above('tablet')` background-color: red; `} ` Now: css` ${media.above('tablet')} { background-color: red; } `
DanWebb · Oct 10, 2018 · b6c0140 · b6c0140
1 parent 9004a45
commit b6c0140
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 60 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -2,6 +2,7 @@
   "extends": ["airbnb", "prettier"],
   "plugins": ["prettier"],
   "rules": {
-    "no-underscore-dangle": 0
+    "no-underscore-dangle": 0,
+    "no-use-before-define": 0
   }
 }
diff --git a/README.md b/README.md
@@ -2,6 +2,8 @@
 
 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
+
 ## Installation
 
 Use yarn or npm
@@ -19,7 +21,7 @@ npm i styled-breakpoints
 The following values of breakpoints are used by default.
 
 ```js
-{
+const defaultBreakpoints = {
   tablet: '768px',
   desktop: '992px',
   lgDesktop: '1200px',
@@ -33,13 +35,13 @@ import media from 'styled-breakpoints';
 const Test = styled.div`
   background-color: pink;
 
-  ${media.above('tablet')`
+  ${media.above('tablet')}` {
     background-color: hotpink;
-  `};
+  }
 `;
 ```
 
-Convert to pure css:
+Converts to pure css:
 
 ```css
 div {
@@ -53,15 +55,17 @@ div {
 }
 ```
 
-## Above
+### Above
 
 ```js
-  ${media.above('tablet')`
+css`
+  ${media.above('tablet')}` {
     background-color: hotpink;
-  `};
+  }
+`
 ```
 
-Convert to:
+Converts to:
 
 ```css
 @media screen and (min-width: 48em) {
@@ -71,15 +75,17 @@ Convert to:
 }
 ```
 
-## Below
+### Below
 
 ```js
-  ${media.below('desktop')`
+css`
+  ${media.below('desktop')}` {
     background-color: lightcoral;
-  `};
+  }
+`
 ```
 
-Convert to:
+Converts to:
 
 ```css
 /* (1200px - 0.02px) / 16px */
@@ -90,15 +96,17 @@ Convert to:
 }
 ```
 
-## Between
+### Between
 
 ```js
-  ${media.between('tablet', 'desktop')`
+css`
+  ${media.between('tablet', 'desktop')}` {
     background-color: hotpink;
-  `};
+  }
+`
 ```
 
-Convert to:
+Converts to:
 
 ```css
 /* 778px / 16px                  (1200px - 0.02px) / 16px */
@@ -109,15 +117,17 @@ Convert to:
 }
 ```
 
-## Only
+### Only
 
 ```js
-  ${media.only('tablet')`
+css`
+  ${media.only('tablet')}` {
     background-color: rebeccapurple;
-  `};
+  }
+`
 ```
 
-Convert to:
+Converts to:
 
 ```css
 /*
@@ -129,7 +139,7 @@ Convert to:
 }
 ```
 
-## Custom breakpoints
+### Custom breakpoints
 
 ```js
 import styled from 'styled-components';
@@ -145,12 +155,14 @@ const media = createBreakpoints({
 const Test = styled.div`
   background-color: pink;
 
-  ${media.above('md')`
+  ${media.above('md')}` {
     background-color: hotpink;
-  `};
+  }
 `;
 ```
 
+## License
+
 MIT License
 
 Copyright (c) 2018 Maxim Alyoshin

diff --git a/src/index.js b/src/index.js
@@ -1,4 +1,3 @@
-import { css } from 'styled-components';
 import { _toEm, _getNextBreakValue, _getBreakValue } from './helpers';
 
 /**
@@ -17,45 +16,36 @@ export const defaultBreakpoints = {
  * @return {Object} - Media generators for each breakpoint
  */
 export const createBreakpoints = (breakpoints = defaultBreakpoints) => {
-  const above = breakpointValue => (...args) => css`
-    @media screen and (min-width: ${_toEm(
-        _getBreakValue(breakpointValue, breakpoints),
-      )}) {
-      ${css(...args)};
-    }
-  `;
-
-  const below = breakpointValue => (...args) => css`
-    @media screen and (max-width: ${_toEm(
-        _getNextBreakValue(breakpointValue, breakpoints),
-      )}) {
-      ${css(...args)};
-    }
-  `;
-
-  const only = breakpointValue => (...args) => css`
-    @media screen and (min-width: ${_toEm(
-        _getBreakValue(breakpointValue, breakpoints),
-      )}) and (max-width: ${_toEm(
-        _getNextBreakValue(breakpointValue, breakpoints),
-      )}) {
-      ${css(...args)};
-    }
-  `;
-
-  const between = (firstBreakpoint, secondBreakpoint) => (...args) => css`
-    @media screen and (min-width: ${_toEm(
-        _getBreakValue(firstBreakpoint, breakpoints),
-      )}) and (max-width: ${_toEm(
-        _getNextBreakValue(secondBreakpoint, breakpoints),
-      )}) {
-      ${css(...args)};
-    }
-  `;
+  const above = createAbove(breakpoints);
+  const below = createBelow(breakpoints);
+  const only = createOnly(breakpoints);
+  const between = createBetween(breakpoints);
 
   return { below, above, only, between };
 };
 
+const createAbove = breakpointsMap => breakpointKey => {
+  const pixels = _toEm(_getBreakValue(breakpointKey, breakpointsMap));
+  return `@media screen and (min-width: ${pixels})`;
+};
+
+const createBelow = breakpointsMap => breakpointKey => {
+  const pixels = _toEm(_getNextBreakValue(breakpointKey, breakpointsMap));
+  return `@media screen and (max-width: ${pixels})`;
+}
+
+const createOnly = breakpointsMap => breakpointKey => {
+  const minPixels = _toEm(_getBreakValue(breakpointKey, breakpointsMap));
+  const maxPixels = _toEm(_getNextBreakValue(breakpointKey, breakpointsMap));
+  return `@media screen and (min-width: ${minPixels}) and (max-width: ${maxPixels})`;
+}
+
+const createBetween = breakpointsMap => (fromBp, toBp) => {
+  const fromPixels = _toEm(_getBreakValue(fromBp, breakpointsMap));
+  const toPixels = _toEm(_getNextBreakValue(toBp, breakpointsMap));
+  return `@media screen and (min-width: ${fromPixels}) and (max-width: ${toPixels})`;
+}
+
 /**
  * Media object with default breakpoints
  * @return {object} - Media generators for each size