Package Exports

stylis
stylis/stylis.js
stylis/stylis.min

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (stylis) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Stylis

~705bytes minified+gzipped
~1kb minified

Stylis is a small css compiler that turns this

stylis('#user', styles);

Where styles is the following css

@root {
    body {
        background: yellow;
    }
}

.name {
    transform: rotate(30deg);
}

span, h1 {
    color:red;

    /**
     * removes block comments and line comments
     */
}

&{
    animation: slidein 3s ease infinite;
}

&:before {
    animation: slidein 3s ease infinite;	
}

@keyframes slidein {
    from { transform: translate(10px); }
    to { transform: translate(200px); }
}

@media (max-width: 600px) {
    & { appearance: none; }
}

into this (minus the whitespace)

body {
    background: yellow;
}
#user .name {
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
}
#user span,
#user h1 {
    color: red;
}
#user {
    -webkit-animation: userslidein 3s ease infinite;
    animation: userslidein 3s ease infinite;
}
#user:before {
    -webkit-animation: userslidein 3s ease infinite;
    animation: userslidein 3s ease infinite;
}
@-webkit-keyframes userslidein {
    from {
        -webkit-transform: translate(10px);
        transform: translate(10px);
    }
    to {
        -webkit-transform: translate(200px);
        transform: translate(200px);
    }
}
@keyframes userslidein {
    from {
        -webkit-transform: translate(10px);
        transform: translate(10px);
    }
    to {
        -webkit-transform: translate(200px);
        transform: translate(200px);
    }
}
@media (max-width: 600px) {
    #user {
        -webkit-appearance: none;
        appearance: none;
    }
}

and if you wanted to append this to a style element/string

// browser
stylis('#user', styles, document.querySelector('style'));

// or explicity request a string, 
// in node this returns the css wrapped in <style></style> tags
// and in the browser this returns a style element with the css
stylis('#user', styles, true);

Supports

Edge
IE 9+
Chrome
Firefox
Safari
Node.js

Installation

direct download

<script src=stylis.min.js></script>

CDN

<script src=https://unpkg.com/stylis@0.1.5/stylis.min.js></script>

npm

npm install stylis --save