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.

1/* Before running postcss-arithmetic */
2.test1 {
3	width: 100% - 200px;
4}
5
6.test2 {
7	top: 200px - 150px;
8}
9
10.test3 {
11	width: 3 * 10rem;
12	font-size: 10pt * 4;
13}
14
15.test4 {
16	width: 100% / 10%;
17}
18
19.test5 {
20	border-width: (9px % 5) (10px / 2px); /* Parentheses ensure that expressions that are 
21	                                        side by side are evaluated correctly.*/
22}
23
24/* After running postcss-arithmetic */
25.test1 {
26	width: calc(100% - 200px);
27}
28
29.test2 {
30	top: 50px;
31}
32
33.test3 {
34	width: 30rem;
35	font-size: 40pt;
36}
37
38.test4 {
39	width: 10%;
40}
41
42.test5 {
43	border-width: 4px 5px;
44}

Options:

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

By: Zack Frost