Get CSS breakpoints in to JS

breakpoint.js

/**
 * Get current CSS breakpoint from doc body pseudo element
 * Fires custom event 'breakpoint-changed' every time a new breakpoint is hit
 * 
 * @type {Object}
 * {
 *   current: {string} current breakpoint,
 *   previous: {string} previous breakpoint,
 * }
 */
import resize from './_window-resize';

export default (() => {
  const breakpoint = {
    current: null,
    previous: null,
  };
  breakpoint.refreshValue = () => {
    breakpoint.current = window.getComputedStyle(document.body, ':before').getPropertyValue('content').replace(/"/g, '');
  };
  breakpoint.refreshValue();

  const refreshBreakpoint = () => {
    breakpoint.refreshValue();

    if (breakpoint.current !== breakpoint.previous) {
      const breakpointChangedEvent = new CustomEvent('breakpoint-changed', {
        detail: breakpoint,
      });

      document.body.dispatchEvent(breakpointChangedEvent);
    }

    breakpoint.previous = breakpoint.current;
  };

  resize.listen(refreshBreakpoint);

  return breakpoint;
})();

breakpoint.scss

/**
 * Set the current breakpoint name as the content of the doc body's
 * before pseudo element
 */
body {
  &::before {
    display: none;
    content: 'mobile';

    @if (variable-exists(mq-breakpoints)) {
      @each $bp-name, $bp-value in $mq-breakpoints {
        @include mq($from: $bp-name) {
          content: '#{$bp-name}';
        }
      }
    }
  }
}