streamich / css-light

Light-weight module to write CSS in JavaScript

css-light

Super light-weight package to write CSS in JavaScript. At only 100 lines of code this module has everything you need to generate CSS from plain JavaScript objects on the server or client.

var css = require('css-light');
console.log(css.css({
    '.block': {
        border: '1px solid red',
    }
}));

This will generate:

.block{border:1px solid red}

Variables

var fontStack = 'Helvetica, sans-serif';
var primaryColor = '#333';
console.log(css.css({
    body: {
        font: `100% ${fontStack}`,
        color: primaryColor,
    }
}));

Output:

body{font:100% Helvetica, sans-serif;color:#333}

Nesting

console.log(css.css({
    nav: {
        ul: {
            mar: 0,
            pad: 0,
            lis: 'none',
        },
        li: {d: 'inline-block'},
        a: {
            d: 'block',
            pad: '6px 12px',
            ted: 'none',
        }
    }
}));

Output:

nav ul{margin:0;padding:0;list-style:none}
nav li{display:inline-block}
nav a{display:block;padding:6px 12px;text-decoration:none}

Mixins

function borderRadius(radius) {
    return {
        '-webkit-border-radius': radius,
        '-moz-border-radius': radius,
        '-ms-border-radius': radius,
        'border-radius': radius,
    };
}
console.log(css.css({
    '.box': borderRadius('10px'),
    '.another-box': [
        borderRadius('20px'),
        {
            'background': 'red',
            '.child': {
                'font-size': '12pt',
            }
        }
    ],
}));

Output:

.box{-webkit-border-radius:10px;-moz-border-radius:10px;-ms-border-radius:10px;border-radius:10px}
.another-box{-webkit-border-radius:20px;-moz-border-radius:20px;-ms-border-radius:20px;border-radius:20px;background:red}
.another-box .child{font-size:}

Extend/Inheritance

    var message = {
        bd: '1px solid #ccc',
        pad: '10px',
        col: '#333',
    };
    console.log(css.css({
        '.message': message,
        '.success': css.extend({}, message, {
            'border-color': 'green',
        }),
        '.error': [
            message,
            {
                'border-color': 'red',
            }
        ],
    }));

Output:

.message{border:1px solid #ccc;padding:10px;color:#333}
.success{border:1px solid #ccc;padding:10px;color:#333;border-color:green}
.error{border:1px solid #ccc;padding:10px;color:#333;border-color:red}

Operators

Use standard JavaScript to do calculations *, /, +, -:

console.log(css.css({
    'article[role="main"]': {
        fl: 'left',
        w: 600 / 960 * 100 + '%',
    },
    'aside[role="complementary"]': {
        fl: 'right',
        w: 300 / 960 * 100 + '%',
    }
}));

Output:

article[role="main"]{float:left;width:62.5%}
aside[role="complementary"]{float:right;width:31.25%}

& Operator

The & operator is replaced by the parent selector:

console.log(css.css({
    '.parent': {
        '.child': { color: 'red'},
        '& .child': { color: 'red'},
        '&.child': { color: 'red'},
    }
}));

Output:

.parent .child{color:red}
.parent .child{color:red}
.parent.child{color:red}

Atoms

css-light comes with a short list of atoms for commonly used CSS properties, for example, use pad instead of padding:

console.log(css.css({
    'div': {
        padding: '0 0 0 0',
        pad: '0 0 0 0',
    }
}));

Output:

div{padding:0 0 0 0;padding:0 0 0 0}

Print the full list of atoms:

console.log(css.atoms);

Output:

{
    d:      'display',
    mar:    'margin',
    mart:   'margin-top',
    marr:   'margin-right',
    marb:   'margin-bottom',
    marl:   'margin-left',
    pad:    'padding',
    padt:   'padding-top',
    padr:   'padding-right',
    padb:   'padding-bottom',
    padl:   'padding-left',
    bd:     'border',
    bdt:    'border-top',
    bdr:    'border-right',
    bdb:    'border-bottom',
    bdl:    'border-left',
    bdrad:  'border-radius',
    col:    'color',
    op:     'opacity',
    bg:     'background',
    bgc:    'background-color',
    fz:     'font-size',
    fs:     'font-style',
    fw:     'font-weight',
    ff:     'font-family',
    lh:     'line-height',
    bxz:    'box-sizing',
    w_bxz:  '-webkit-box-sizing',
    m_bxz:  '-moz-box-sizing',
    cur:    'cursor',
    ov:     'overflow',
    pos:    'position',
    ls:     'list-style',
    ta:     'text-align',
    td:     'text-decoration',
    fl:     'float',
    w:      'width',
    h:      'height',
    trs:    'transition',
    out:    'outline',
    vis:    'visibility',
    ww:     'word-wrap',
    con:    'content',
}

Media Queries

// ## Media queries
console.log(css.css({
    '@media (max-width: 600px)': {
        '.facet_sidebar': {
            display: 'none'
        }
    }
}));

Output:

@media (max-width: 600px){
    .facet_sidebar{display:none}
}

Nested lists

console.log(css.css({
    'section, div': {
        'h1, h2': {
            'span, .light': {
                td: 'none'
            },
        },
    },
}));

Output:

section h1 span, div h1 span,section  h2 span, div  h2 span,section h1  .light, div h1  .light,section  h2  .light, div  h2  .light{text-decoration:none}

// ## Overwrite

Add multiple definitions of the same property:

console.log(css.css({
    div: [
        {boder: '1px solid red'},
        {boder: '1px solid green'},
    ]
}));

Output:

div{boder:1px solid red;boder:1px solid green}