unistyle-flat

Unnest/flatten a Unistyle Object to a structure which resembles real CSS

Installation

Install unistyle-flat using npm:

npm install --save unistyle-flat

Usage

Module usage

Nesting

var flat = require('unistyle-flat');
 
flat({
    a: {
        ':hover': {
            fontWeight: 'bold'
        }
    }
});
/**
 * {
 *   'a:hover': {
 *     fontWeight: 'bold'
 *   }
 * }
 */

References

var flat = require('unistyle-flat');
 
flat({
    a: {
        '& + span': {
            fontWeight: 'bold'
        }
    }
});
/**
 * {
 *   'a + span': {
 *     fontWeight: 'bold'
 *   }
 * }
 */

Media Queries

var flat = require('unistyle-flat');
 
flat({
    p: {
        fontSize: '1em',
        '@media only screen and (max-width: 700px)': {
            fontSize: '.8em'
        }
    }
});
/**
 * {
 *   p: {
 *     fontSize: '1em'
 *   },
 *   '@media only screen and (max-width: 700px)': {
 *     p: {
 *       fontSize: '.8em'
 *     }
 *   }
 * }
 */

Arrays

var flat = require('unistyle-flat');
 
flat([
    {body: {color: 'white'}},
    {body: {background: 'blue'}}
]);
/**
 * {
 *   body: {
 *     color: 'white',
 *     background: 'blue'
 *   }
 * }
 */

Grouping of selectors

var flat = require('unistyle-flat');
 
flat({
    '.item1': {color: 'white'},
    '.item2': {color: 'white', background: 'blue'}
});
/**
 * {
 *   '.item1, .item2': {
 *     color: 'white'
 *   },
 *   '.item2': {
 *     background: 'blue'
 *   }
 * }
 */

API

flat(obj)

Name	Type	Description
obj	Object|Array	A Unistyle Object or an Array of Unistyle Objects

Returns: Object, the flattened/unnested object.

License

MIT © Joakim Carlstein