Try and make use of custom breakpoints simpler

[jameslnewell]

From:

  ${({theme}) => breakpoint('lg', theme.breakpoints)`
    font-size: 24px;
  `}

To:

  ${breakpoint('lg')`
    font-size: 24px;
    width: ${({width}) => `${width}px`};
  `}

by changing breakpoint to be a fn that returns a fn.

[jameslnewell]

More thoughts:

=====

Use case 1:

import {createStatic} from 'styled-components-breakpoint';

const breakpoint = createStatic({
 xs: 100
});

`
${breakpoint('xs')``};
${breakpoint('xs', 'lg')``};
${breakpoint.lte('xs')``};
${breakpoint.gte('xs')``};
${breakpoint.between('xs')``};
`

// people might want static vars to define their styles
export const xs = breakpoint('xs');
export const md = breakpoint('md');
...

`
${xs`...styles...`}

// implementation looks a bit like this
function createStatic(breakpoints) {
  return name => _gte(breakpoints, name);
}

=====

Use case 2:

import breakpoint from 'styled-components-breakpoint';

`
${breakpoint('xs')``};
${breakpoint('xs', 'lg')``};
${breakpoint.lte('xs')``};
${breakpoint.gte('xs')``};
${breakpoint.between('xs')``};
`

//implementation looks like this
function breakpoint(name) {
  return (props) => _gte(props.theme.breakpoints, name);
}

[jameslnewell]

released in v2