responsiveStyle

A utility to make authoring mobile-first responsive styles in vanilla-extract stylesheets easier.

Authoring styles by breakpoint

The responsiveStyle function is a convenience for authoring responsive styling rules. It accepts sets of rules for each breakpoint, e.g. mobile, tablet, desktop or wide, and returns them wrapped in the corresponding media query.

As an optimisation, responsiveStyle evaluates the rules mobile-first and omits any redundant rule sets to reduce the overall CSS output.

The returned object must be passed through one of vanilla-extract’s styling apis, e.g. style, to create the actual styles.

// styles.css.ts
import { style } from "@vanilla-extract/css"
import { vars, responsiveStyle } from "braid-design-system/css"

export const className = style(
  responsiveStyle({
    mobile: { flexBasis: vars.space.small },
    tablet: { flexBasis: vars.space.medium },
    desktop: { flexBasis: vars.space.large },
    wide: { flexBasis: vars.space.xlarge },
  })
)

// is equivalent to
import { style } from "@vanilla-extract/css"
import { vars, breakpoints } from "braid-design-system/css"

export const className = style({
  flexBasis: vars.space.small,
  "@media": {
    [`screen and (min-width: ${breakpoints.tablet}px)`]: {
      flexBasis: vars.space.medium,
    },
    [`screen and (min-width: ${breakpoints.desktop}px)`]: {
      flexBasis: vars.space.large,
    },
    [`screen and (min-width: ${breakpoints.wide}px)`]: {
      flexBasis: vars.space.xlarge,
    },
  },
})

Braid Logo