💄 now supports

✅ props
✅ pseudo selectors
✅ media queries
✅ nested elements
✅ auto vendor prefix

All these new features at the same size of 1.2K!

@css`
    font-size: 16px;
    text-align: center;

    /* Use props in your CSS */
    color: {this.props.color};

    /* Pseudo selectors */
    &:hover {
        color: #FFF;
    }

    /* Nested elements */
    img {
        border-radius: 50%;
    }
    #handle {
        margin-top: 20px;
    }

    /* Media queries */
    @media (max-width: 600px) {
        & {font-size: 18px;}
    }
`

Updated features chart:

🎀 Supports real css

🔥 use props in css

🔼 Attaches styles to the highest element in your component

🙋 Uses classes instead of inline styles

👶 Super tiny: only 1.2K gzipped

🌀 pseudo selectors

📱 media queries support

👪 nested css

💻 vendor prefixes

💄 Official library emoji

Thanks to thysultan for stylis

💄 now generates classes and attaches them as className to the component

Bonus: It's 0.2K smaller now! Standing at just 1.2K

Updated features chart:

🎀 Supports real css

🔥 use props in css

🔼 Attaches styles to the highest element in your component

🙋 Uses classes instead of inline styles

👶 Super tiny: only 1.4K1.2K gzipped

💄 Offical library emoji

Coming soon

🌀 pseudo selectors

📱 media queries support

💻 vendor prefixes

👪 nested css

Features:

🎀 Supports real css

🔥 use props in css

🔼 Attaches inline styles to the highest element in your component

👶 Super tiny: only 1.4K gzipped

💄 Offical library emoji

Coming soon

🙋 classes instead of inline styles

🌀 pseudo selectors

📱 media queries support

💻 vendor prefixes

👪 nested css