packages/styles/scss/base/_active-breakpoint.scss

   1 // Add the screen size inside a pseudo element on <body> to be read in useActiveBreakpoint in React
   2 body::before {
   3         display: none;
   4
   5         @each $screeSize,
   6                 $query
   7                         in (
   8                                 'xsmall': '<=xsmall',
   9                                 'small': '>xsmall',
  10                                 'medium': '>small',
  11                                 'large': '>medium',
  12                                 'xlarge': '>large',
  13                                 '2xlarge': '>xlarge'
  14                         )
  15         {
  16                 @include media($query) {
  17                         content: '#{$screeSize}';
  18                 }
  19         }
  20 }