webcoreui/utils/getBreakpoint.ts

UI component and template library for Astro, Svelte, and React apps styled with Sass.

import { isOneOf } from './isOneOf'

const breakpoints = ['xs', 'sm', 'md', 'lg'] as const

export type Breakpoint = typeof breakpoints[number]

export const getBreakpoint = (): Breakpoint => {
    const value = getComputedStyle(document.documentElement)
        .getPropertyValue('--w-breakpoint')
        .trim()

    if (isOneOf<Breakpoint>(breakpoints)(value)) {
        return value
    }

    throw new Error(`Unexpected breakpoint: ${value}`)
}