Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
type BreakpointMap = {
[key in Breakpoint]: string
}
const minWidth = (from: number): string => `@media (min-width: ${`${from}px`})`
const maxWidth = (until: number): string =>
`@media (max-width: ${`${until - 1}px`})`
const minWidthMaxWidth = (from: number, until: number): string =>
`@media (min-width: ${`${from}px`}) and (max-width: ${`${until - 1}px`})`
// e.g. from.*
const from: BreakpointMap = {
mobileMedium: minWidth(breakpoints.mobileMedium),
mobileLandscape: minWidth(breakpoints.mobileLandscape),
phablet: minWidth(breakpoints.phablet),
tablet: minWidth(breakpoints.tablet),
desktop: minWidth(breakpoints.desktop),
leftCol: minWidth(breakpoints.leftCol),
wide: minWidth(breakpoints.wide),
}
// e.g. until.*
const until: BreakpointMap = {
mobileMedium: maxWidth(breakpoints.mobileMedium),
mobileLandscape: maxWidth(breakpoints.mobileLandscape),
phablet: maxWidth(breakpoints.phablet),
tablet: maxWidth(breakpoints.tablet),
desktop: maxWidth(breakpoints.desktop),
leftCol: maxWidth(breakpoints.leftCol),
`@media (min-width: ${`${from}px`}) and (max-width: ${`${until - 1}px`})`
// e.g. from.*
const from: BreakpointMap = {
mobileMedium: minWidth(breakpoints.mobileMedium),
mobileLandscape: minWidth(breakpoints.mobileLandscape),
phablet: minWidth(breakpoints.phablet),
tablet: minWidth(breakpoints.tablet),
desktop: minWidth(breakpoints.desktop),
leftCol: minWidth(breakpoints.leftCol),
wide: minWidth(breakpoints.wide),
}
// e.g. until.*
const until: BreakpointMap = {
mobileMedium: maxWidth(breakpoints.mobileMedium),
mobileLandscape: maxWidth(breakpoints.mobileLandscape),
phablet: maxWidth(breakpoints.phablet),
tablet: maxWidth(breakpoints.tablet),
desktop: maxWidth(breakpoints.desktop),
leftCol: maxWidth(breakpoints.leftCol),
wide: maxWidth(breakpoints.wide),
}
// e.g. between.*.and.*
const between = {
mobileMedium: {
and: {
mobileLandscape: minWidthMaxWidth(
breakpoints.mobileMedium,
breakpoints.mobileLandscape,
),
breakpoints.mobileLandscape,
),
phablet: minWidthMaxWidth(
breakpoints.mobileMedium,
breakpoints.phablet,
),
tablet: minWidthMaxWidth(
breakpoints.mobileMedium,
breakpoints.tablet,
),
desktop: minWidthMaxWidth(
breakpoints.mobileMedium,
breakpoints.desktop,
),
leftCol: minWidthMaxWidth(
breakpoints.mobileMedium,
breakpoints.leftCol,
),
wide: minWidthMaxWidth(breakpoints.mobileMedium, breakpoints.wide),
},
},
mobileLandscape: {
and: {
phablet: minWidthMaxWidth(
breakpoints.mobileLandscape,
breakpoints.phablet,
),
tablet: minWidthMaxWidth(
breakpoints.mobileLandscape,
breakpoints.tablet,
),
desktop: minWidthMaxWidth(