femto-style
v0.0.1
Published
Smallest 4th gen CSS-in-JS library
Downloads
3
Maintainers
Readme
ezcss
Super lite CSS-in-JS solution.
Usage
Import renderer.
import {Renderer} from 'ezcss';
const renderer = new Renderer;
const {rule, sheet, withStyles, useStyles, styled, css} = renderer;
Render a single "rule".
const className = rule({
border: '1px solid red'
}, 'MyName');
<div className={className} />
Create a "styles sheet" with multiple lazy-evaluating rules.
const styles = sheet({
main: {
border: '1px solid red'
},
element: {
border: '1px solid blue'
}
}, 'MyName');
<div className={styles.main} />
Injects styles
prop into component.
const styles = {
main: {
border: '1px solid red'
}
};
const MyComp = withStyles(styles, function MyComp ({styles}) {
return <div className={styles.main} />
});
Use styles
object in your component.
const styles = {
main: {
border: '1px solid red'
}
};
const MyComp = useStyles(styles, function MyComp (props, styles) {
return <div className={styles.main} />
});
Create "styled" components.
const Div = styled('div', {
border: '1px solid red'
}, 'RedBorderDiv');
<Div>Hello world!</Div>
Stateful component style decorator.
@css({
border: '1px solid red'
})
class MyComponent extends Component {
render () {
}
}
Server Side Rendering
excss
works in Node.js environment as well. Use .raw
property to access raw CSS styles
on server and include then in your template.
const html += `<style>${renderer.raw}</style>`;
License
Unlicense — public domain.