Home > @css-hooks/recommended > BreakpointsToMediaQueriesImpl

BreakpointsToMediaQueriesImpl type

This utility type helps convert a list of breakpoints into a list of media queries.

Signature:

export type BreakpointsToMediaQueriesImpl<
  Breakpoints,
  Acc extends string[] = [],
> = Breakpoints extends [infer A, infer B, ...infer Tail]
  ? Acc extends []
    ? BreakpointsToMediaQueriesImpl<
        [A, B, ...Tail],
        [...Acc, `@media (width < ${A extends string ? A : never})`]
      >
    : BreakpointsToMediaQueriesImpl<
        [B, ...Tail],
        [
          ...Acc,
          `@media (${A extends string ? A : never} <= width < ${B extends string
            ? B
            : never})`,
        ]
      >
  : Breakpoints extends [infer A]
    ? Acc extends []
      ? [
          `@media (width < ${A extends string ? A : never})`,
          `@media (${A extends string ? A : never} <= width)`,
        ]
      : [...Acc, `@media (${A extends string ? A : never} <= width)`]
    : Acc;

References: BreakpointsToMediaQueriesImpl