CSS calc() to pixels transform
Tiny Javascript library to transform CSS properties with CSS calc() function values to pixels based on window and element dimensions.
Install
yarn add --save css-calc-transform
or
npm install --save css-calc-transform
Usage
Pixels
import { transform } from "css-calc-transform";
transform({
prop: "width",
value: "calc(10px + (100px / 3.5))"
});
↓ ↓ ↓ ↓ ↓ ↓
38.57142857142857
Percentages
import { transform } from "css-calc-transform";
const parentElementDimensions = {
width: 480,
height: 100
};
transform({
prop: "width",
value: "calc(100% - 10px)",
parent: parentElementDimensions
});
↓ ↓ ↓ ↓ ↓ ↓
470
Viewport units
import { transform } from "css-calc-transform";
const windowDimensions = {
width: 480,
height: 640
};
transform({
prop: "height",
value: "calc(50vh + 10px)",
win: windowDimensions
});
↓ ↓ ↓ ↓ ↓ ↓
330
rem unit
import { transform } from "css-calc-transform";
transform({
prop: "fontSize",
value: "calc(2rem + 1px)",
});
↓ ↓ ↓ ↓ ↓ ↓
33
em unit
When em units are used on font-size, the size is relative to the font-size of the parent.
When used on other properties, it’s relative to the font-size of the element itself.
https://www.digitalocean.com/community/tutorials/css-rem-vs-em-units
import { transform } from "css-calc-transform";
transform({
prop: "fontSize",
value: "calc(2em + 1px)",
parent: {
font: {
size: 16
}
}
});
↓ ↓ ↓ ↓ ↓ ↓
33
import { transform } from "css-calc-transform";
transform({
prop: "height",
value: "calc(10px + 2em)",
font: {
size: 16
}
});
↓ ↓ ↓ ↓ ↓ ↓
42
min(), max(), clamp()
import { transform } from "css-calc-transform";
transform({
prop: "height",
value: "calc(min(2px, 3px) + clamp(100px, 150px, 200px) + max(1px, 2px))",
});
↓ ↓ ↓ ↓ ↓ ↓
154
More examples
For more examples, please have a look at the tests.
Dependencies
