π 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