npm package, for writing css in js
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
public
src
.gitignore
.npmignore
README.md
package-lock.json
package.json

README.md

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`
        }
    }
    //...
});
//...