[Request] Export breakpoint CSS variables

[jjwinskill]

Summary

I'd like to use the same breakpoints within our application that are being applied in Primer Brand. Currently, Primer Brand exports a React hook for using breakpoints at the JS level, but I'd like to use CSS variables so I can follow the standard expected in Primer Brand at the CSS level.

Details

Primer Brand exports a hook at packages/react/src/hooks/useWindowSize.ts that allows us to respond to breakpoint changes programmatically within React. Those values map to the following:

const breakpointSwitch = (value: number) => {
  let current = BreakpointSize.XXLARGE
  switch (true) {
    case value >= 320 && value < 544:
      current = BreakpointSize.XSMALL
      break
    case value >= 544 && value < 768:
      current = BreakpointSize.SMALL
      break
    case value >= 768 && value < 1012:
      current = BreakpointSize.MEDIUM
      break
    case value >= 1012 && value < 1280:
      current = BreakpointSize.LARGE
      break
    case value >= 1280 && value < 1440:
      current = BreakpointSize.XLARGE
      break
    default:
      current = BreakpointSize.XXLARGE
  }
  return current
}

Ideally, we would be able to use media queries within our application using these same values but bypassing the need for JS. This might be similar or even identical to the CSS variables being exported by GitHub Primer:

:root {
  --breakpoint-xsmall: 20rem;
  --breakpoint-small: 34rem;
  --breakpoint-medium: 48rem;
  --breakpoint-large: 63.25rem;
  --breakpoint-xlarge: 80rem;
  --breakpoint-xxlarge: 87.5rem;
}

[simurai]

@jjwinskill That would be nice.. ❤ Although AFAIK, it's not possible to use CSS variables in media queries like:

@media (min-width: var(--breakpoint-medium)) {
  // won't work
}

I guess a browser limitation? 🤔 So you'd still have to hard code the value.

[joshfarrant]

Hey @jjwinskill 👋

The breakpoint values should already be available on the :root as CSS variables as they're coming straight from @primer/primitives.

--brand-breakpoint-xxlarge: 87.5rem;
--brand-breakpoint-xlarge: 80rem;
--brand-breakpoint-large: 63.25rem;
--brand-breakpoint-medium: 48rem;
--brand-breakpoint-small: 34rem;
--brand-breakpoint-xsmall: 20rem;

As @simurai mentioned, you're not going to be able to use those directly in media queries at the moment though.

There is a draft Media Queries Level 5 spec which includes Custom Media Queries, so we may be getting them at some point, which will allow us to do something like:

@custom-media --breakpoint-medium (max-width: 48rem);

@media (--breakpoint-medium) {
  /* ... */
}

For now though, the closest you can get is using a PostCSS plugin.