Lazycss NPM | npm.io

lazycss

Helper to bring some comforts to writing css

Basic feature list & goal:

Number to px
Hex to rgba
Nesting
Global unique namepacing
Auto change detection
...

And here's some code! :+1:

Basic 1:

var css = lazycss({
  '.container': {
    height: 400,
    backgroundColor: '#aabbccdd',
    hover: {
      backgroundColor: '#dd2233dd'
    },
    '*': {
      boxSizing: 'border-box'
    },
    '.sidebar': {
      display: 'inline-block',
      width: 200,
      height: '100%',
      backgroundColor: 'green'
    },
    '.main': {
      display: 'inline-block',
      width: -200,
      height: '100%',
      'background-color': 'lightgreen'
    }
  }
})

Result

// css.raw
.container {
	height:400px;
	background-color:rgba(170,187,204,0.86);
}
.container:hover {
	background-color:rgba(221,34,51,0.86);
}
.container * {
	box-sizing:border-box;
}
.container .sidebar {
	display:inline-block;
	width:200px;
	height:100%;
	background-color:green;
}
.container .main {
	display:inline-block;
	width:calc(100% - 200px);
	height:100%;
	background-color:lightgreen;
}
//css.minified
.container{height:400px;background-color:rgba(170,187,204,0.86);}.container:hover{background-color:rgba(221,34,51,0.86);}.container *{box-sizing:border-box;}.container .sidebar{display:inline-block;width:200px;height:100%;background-color:green;}.container .main{display:inline-block;width:calc(100%-200px);height:100%;background-color:lightgreen;}

Motivation

Too lazy to switch files & context to do job
Like to write hover instead :hover
Wanted hex with alpha channel

Installation

<script src="lazycss.min.js"></script>

npm i lazycss

API

Create new style holder

var css = lazycss(defs)
// append a style element to document head if not appended, else edit text content
// future change only part of text that was changed in css object
css.append()
// get compiled style
css.raw
// get minified style
css.minified
// get compiled & minified style
css.css // { css.raw, css.minified }