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`

Returns: Object, the flattened/unnested object.

License

MIT © Joakim Carlstein