stylis
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/stylis package

    0.1.1 • Public • Published

    Stylis

    npm licence dependencies

    • ~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);
    }
     
    spanh1 {
        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.1/stylis.min.js></script>

    npm

    npm install stylis --save
    

    Keywords

    none

    Install

    npm i stylis@0.1.1

    Version

    0.1.1

    License

    MIT

    Last publish

    Collaborators

    • andarist
    • thysultan