get current media query size from HTML::before

checkMediaQuery.ts

/**
 * check the html::before element for a string indicating the currect css media query.
 * @return boolean if the passed string matches the current media query contained in the ::before's content attribute.
 * In your css just add a content value to the html::before element that you can check for a size.
 * E.G: if (MQ('large')) { ...do stuff }
 */
const MQ = (MQName: string): boolean => {
    return MQName === window
        .getComputedStyle(document.documentElement, '::before')
        .getPropertyValue('content')
        .replace(/['"]/g, '');
}

export default MQ;