Neurophysiologically Pseudoscientific Manatee

    This package has been deprecated

    Author message:

    Not supported

    i-css

    2.1.0 • Public • Published

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

    Install

    npm i i-css

    DownloadsWeekly Downloads

    1

    Version

    2.1.0

    License

    ISC

    Unpacked Size

    9.52 kB

    Total Files

    3

    Last publish

    Collaborators

    • irom.io