I-CSS (CSS in JS)

It is npm package, for writing css in js.

• ✓ Naming like CSS modules
• ✓ Automatic Vendor Prefixing
• ✓ Pseudo Classes
• ✓ Media Queries
• ✓ CSS cascade
• ✓ Mix styles like mix native objects
• ✓ You can use function for create css class
• ✓ Styles As Object Literals

Based on free-style
Demo
Demo app component source
Demo index file (Example for hot-reloading)

Install

$ npm install i-css --save

Usage

Basic

import React from 'react';
import {addStyles, renderCss} from 'i-css';

const app = addStyles({
    wrapper: { //css modules className: .wrapper_{hash}
        width: '100%',
        border: `1px solid orange`
    }
});
renderCss(document.getElementById('rootCss')); //call it once in root component

const App = () => <div className={app.wrapper}></div>

Mix styles

const grid = addStyles({
    fullWidth: {
        width: '100%'
    },
    fullHeight: {
        height: '100%'
    }
})

const app = addStyles({
    //...
    wrapper() { //you can use function or plain object
        return {
            ...this.full,
            border: `1px solid orange`
        }
    },
    full: {
        ...grid.fullWidth,
        ...grid.fullHeight //Mix as native object and use it as className
    }
    //...
});

const App = () => (
    <div className={app.wrapper}>
        <div className={grid.fullHeight}></div>
    </div>
)

Mix classNames

import {cn} from 'i-css';
//...
const App = () => <div className={cn(app.wrapper, app.full, {[app.greenBack]: this.state.isGreen})}>

Pseudo selectors & css cascade

const app = addStyles({
    //...
    wrapper() {
        return {
           '&:hover': { //pseudo selectors
               backgroundColor: '#ffffff'
           },
           [`&:hover .${this.text}`]: {//css cascade
               color: '#000000'
           }
       }
    },
    text: {
        color: 'red'
    }
    //...
});

Rules

const app = addStyles({
    //...
    _rules: {
        '@font-face': {
            fontFamily: 'myriad-pro',
            src: `
                url(${require('./font/myriad-pro__regular.eot')}), 
                url(${require('./font/myriad-pro__regular.eot?#iefix')}) format('embedded-opentype'),
                url(${require('./font/myriad-pro__regular.woff')}) format('woff'),
                url(${require('./font/myriad-pro__regular.ttf')}) format('truetype')
            `,
            fontStyle: 'normal',
            fontWeight: 'normal'
        }
    }
    //...
});
//...

Global variables

const app = addStyles({
    //...
    _global: {
        'html, body, #root': {
            padding: 0,
            margin: 0
        },
        body: {
            backgroundColor: 'blue'
        }
    }
    //...
});
//...

Animation

const app = addStyles({
    //...
    _animation: {
        spinner: {
            '0%': { 'transform': 'rotate(0deg)' },
            '100%': { 'transform': 'rotate(360deg)' }   
        }
    },
    spinner() {
        const size = 56;
        const borderWidth = '7px';
        const color = '#ff6d4a';

        return {
            width: size,
            height: size,
            border: `${borderWidth} solid ${color}`,
            'animation': `${this._animation.spinner} 2s linear infinite`
        }
    }
    //...
});
//...