import scoped from '@ryanmorr/scoped';

const applyStyles = scoped(`
    .foo {
        width: 100px;
        height: 100px;
    }

    .bar {
        width: 200px;
        height: 200px;
    }
`);

applyStyles(element);

const applyStyles = scoped(`
    div {
        color: red;
    }
`, 'scoped');

applyStyles(element);
element.hasAttribute('scoped'); //=> true

const applyStyles = scoped(`
    .foo {
        background-color: red;
        animation-name: slide-in 1s ease-in;
    }

    @keyframes slide-in {
        from {
            transform: translateX(0%);
        }
        to {
            transform: translateX(100%);
        }
    }

    @media screen and (max-width: 600px) {
        .foo {
            background-color: blue;
        }
    }
`);