test.ts

declare var require: any;
var css = require('./index');


var base = {
    color: 'red'
};


console.log(css.css({
    '.block': {
        border: '1px solid red',
        p: {
            a: {
                'background-color': 'red',
                opacity: 0.8
            }
        }
    }
}));
// .block{border:1px solid red}
// .block p a{background-color:red;opacity:0.8}


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


// ## 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',
        }
    }
}));
// 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',
            }
        }
    ],
}));
// .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',
        }
    ],
}));
// .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
console.log(css.css({
    'article[role="main"]': {
        fl: 'left',
        w: 600 / 960 * 100 + '%',
    },
    'aside[role="complementary"]': {
        fl: 'right',
        w: 300 / 960 * 100 + '%',
    }
}));
// article[role="main"]{float:left;width:62.5%}
// aside[role="complementary"]{float:right;width:31.25%}


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


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


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


// ## Nested lists
console.log(css.css({
    'section, div': {
        'h1, h2': {
            'span, .light': {
                td: 'none'
            },
        },
    },
}));
// 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
console.log(css.css({
    div: [
        {boder: '1px solid red'},
        {boder: '1px solid green'},
    ]
}));
// div{boder:1px solid red;boder:1px solid green}