/
media.ts
38 lines (31 loc) · 964 Bytes
/
media.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
34
35
36
37
38
import { css, SerializedStyles } from '@emotion/react';
import { config } from '../config';
import { Breakpoints, DefaultTheme } from '../types/emotion';
export function media(breakpoint: Breakpoints): string {
const breakpoints = config().grid.breakpoints;
if (!Object.keys(breakpoints).includes(breakpoint)) {
throw new Error(`Breakpoint '${breakpoint}' not found`);
}
return `@media (min-width: ${breakpoints[breakpoint]}em)`;
}
export function responsive(
breakpoints: DefaultTheme['grid']['breakpoints'] | Array<Breakpoints>,
mapper: (value: any) => any
) {
if (Array.isArray(breakpoints)) {
return breakpoints.map(
(breakpoint): SerializedStyles => css`
${media(breakpoint)} {
${mapper(breakpoint)}
}
`
);
}
return Object.keys(breakpoints).map(
(breakpoint): SerializedStyles => css`
${media(breakpoint as Breakpoints)} {
${mapper(breakpoint)}
}
`
);
}