postcss-position-nib

PostCSS Position Nib

PostCSS plugin to shorthand position rules like nib does.

Input

.shorthand {
	relative: 0;
	absolute: 0;
	fixed: 0;
}

.full {
	relative: top right bottom left;
	absolute: top right bottom left;
	fixed: top right bottom left;
}

.oneDirection {
	absolute: top;
}
.oneDirectionPush {
	absolute: top 10px;
}

.twoDirection {
	absolute: top right;
}
.twoDirectionPush {
	absolute: top -10px right -50px;
}

.threeDirection {
	fixed: bottom right top;
}
.threeDirectionPush {
	fixed: bottom 10px right 10px top 10px;
}

Output

.shorthand {
	position: relative;
	position: absolute;
	position: fixed;
}

.full {
	position: relative;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.oneDirection {
	position: absolute;
	top: 0;
}
.oneDirectionPush {
	position: absolute;
	top: 10px;
}

.twoDirection {
	position: absolute;
	top: 0;
	right: 0;
}
.twoDirectionPush {
	position: absolute;
	top: -10px;
	right: -50px;
}

.threeDirection {
	position: fixed;
	bottom: 0;
	right: 0;
	top: 0;
}
.threeDirectionPush {
	position: fixed;
	bottom: 10px;
	right: 10px;
	top: 10px;
}

Usage

postcss([ require('postcss-position-nib') ])

See PostCSS docs for examples for your environment.