viewporter.js

let view;
const viewporter = {};
const html = document.documentElement;

viewporter.getView = () => {
    try {
        view = window
            .getComputedStyle(html, ":after")
            .getPropertyValue("content")
            .replace(/["']/g, "");
    } catch (error) {
        view = "undefined";
    }

    return view;
};

// split view names and return only the main part
viewporter.mainView = () => viewporter.getView().split("-")[0];

export const getView = viewporter.getView;

// convenience functions for common view names
export const isLarge = () => viewporter.mainView() === "large";
export const isMedium = () => viewporter.mainView() === "medium";
export const isSmall = () => viewporter.mainView() === "small";

viewporter.scss

html:after {
    @include media("", tablet) {
        content: "small";
    }
    @include media(tablet, desktop) {
        content: "medium";
    }
    @include media(desktop, "") {
        content: "large";
    }
    display: none;
}