/
breakpoint.ts
33 lines (29 loc) 路 1.29 KB
/
breakpoint.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
import {StyledProps, css} from 'styled-components';
import {ThemedBreakpointName, BreakpointMap} from './types';
import {defaults} from './defaults';
import {createBreakpoint} from './createBreakpoint';
type CSSFunction = (
...params: Parameters<typeof css>
) => <P extends object>({theme}: StyledProps<P>) => ReturnType<typeof css>;
type ThemedBreakpointMap = BreakpointMap<ThemedBreakpointName>;
/* eslint-disable @typescript-eslint/no-explicit-any */
// casting because we can't really do anything better when the theme is defined but no theme values are defined
const getBreakpointsFromTheme = <P extends object>({
theme,
}: StyledProps<P>): ThemedBreakpointMap =>
theme && theme.breakpoints ? theme.breakpoints : (defaults as any);
/* eslint-enable @typescript-eslint/no-explicit-any */
export const breakpoint = (
breakpointA: ThemedBreakpointName,
breakpointB?: ThemedBreakpointName,
): CSSFunction => {
/* eslint-disable @typescript-eslint/no-explicit-any */
return (strings: any, ...interpolations: any[]) => {
/* eslint-enable @typescript-eslint/no-explicit-any */
return <P extends object>(props: StyledProps<P>) => {
return createBreakpoint<ThemedBreakpointName>(
getBreakpointsFromTheme(props),
)(breakpointA, breakpointB)(strings, interpolations);
};
};
};