Β
Every React component gets an inbuilt javascript constructor for functional logic.
Introducing the css constructor for styling!
Β Β
import React from 'react';
import css from 'css-constructor'; // πΆ Super tiny: only 1.2K gzipped!
export default class Hello extends React.Component {
/* javascript constructor */
constructor (props) {
super(props);
}
/* css constructor */
@css` // π Isolated and co-located
font-size: 16px;
text-align: center; // π Supports the entirety of CSS
color: {this.props.color}; // π₯ Use props in css
display: flex; // π» Built in vendor prefixing
&:hover { // π Pseudo selectors
color: #FFF;
}
img { // πͺ Nested css
border-radius: 50%;
}
#handle {
margin-top: 20px;
}
@media (max-width: 600px) { // π± Media queries support
& {font-size: 18px;}
}
`
render () {
return (<div> // πΌ Attaches class to the highest element
<img src="https://github.com/siddharthkp.png"/>
<div id="handle">@siddharthkp</div>
</div>)
}
};
// <Hello color='papayawhip'/>
--
Other features
π Uses classes instead of inline styles
π§ Editable in developer tools
πΆ Super tiny: only 1.2K gzipped!
π Official library emoji
Coming soon
π server side rendering
--
-
npm install css-constructor --save
-
import css from 'css-constructor'
-
Add a
@css
block just before therender
function (important) -
Add
transform-decorators-legacy
as the firstplugin
in your.babelrc
(already downloaded with π).
If you are not familiar with babel plugins
you can follow the detailed instructions here.
Or, if you would prefer using π without adding the babel transform for decorators, up-vote this issue.
--
π uses ES7 class method decorators on the render function. Detailed post coming soon.
Heavily inspired from glamor, styled-components and radium
Special thanks to thysultan. stylis is the bomb!
βοΈ this repo!