postcss-arithmetic

PostCSS plugin to do +, -, *, /, %, and ^ operations.

Utilizes math.js to correctly parse order of operations. Also, when expressions can not be resolved (if there are are multiple units types for example), postcss-arithmetic can replace the whole expression with a CSS calc() statement.

Syntax

Use the operators just like in JavaScript. The following example has the calcMultipleUnits option enabled. Use parentheses around side-by-side expressions to make sure everything inside is evaluated together. See the code example for how to do this.

/* Before running postcss-arithmetic */
.test1 {
	width: 100% - 200px;
}

.test2 {
	top: 200px - 150px;
}

.test3 {
	width: 3 * 10rem;
	font-size: 10pt * 4;
}

.test4 {
	width: 100% / 10%;
}

.test5 {
	border-width: (9px % 5) (10px / 2px); /* Parentheses ensure that expressions that are 
	                                        side by side are evaluated correctly.*/
}

/* After running postcss-arithmetic */
.test1 {
	width: calc(100% - 200px);
}

.test2 {
	top: 50px;
}

.test3 {
	width: 30rem;
	font-size: 40pt;
}

.test4 {
	width: 10%;
}

.test5 {
	border-width: 4px 5px;
}

Options:

• calcMultipleUnits --- Replace exrpessions with multiple units with CSS calc() functions; type: Boolean, Default: true

By: Zack Frost