femto-style

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.