CSS calc() to pixels transform

!Size

Tiny Javascript library to transform CSS properties with CSS calc() function values to pixels based on window and element dimensions.

Install

``sh
yarn add --save css-calc-transform
`

or

`sh
npm install --save css-calc-transform
`

Usage

$3

`js
import { transform } from "css-calc-transform";

transform({
prop: "width",
value: "calc(10px + (100px / 3.5))"
});

↓ ↓ ↓ ↓ ↓ ↓

38.57142857142857
`

$3

`js
import { transform } from "css-calc-transform";

const parentElementDimensions = {
width: 480,
height: 100
};

transform({
prop: "width",
value: "calc(100% - 10px)",
parent: parentElementDimensions
});

↓ ↓ ↓ ↓ ↓ ↓

470
`

$3

`js
import { transform } from "css-calc-transform";

const windowDimensions = {
width: 480,
height: 640
};

transform({
prop: "height",
value: "calc(50vh + 10px)",
win: windowDimensions
});

↓ ↓ ↓ ↓ ↓ ↓

330
`

$3

`js
import { transform } from "css-calc-transform";

transform({
prop: "fontSize",
value: "calc(2rem + 1px)",
});

↓ ↓ ↓ ↓ ↓ ↓

33
`

$3

> 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

`js
import { transform } from "css-calc-transform";

transform({
prop: "fontSize",
value: "calc(2em + 1px)",
parent: {
font: {
size: 16
}
}
});

↓ ↓ ↓ ↓ ↓ ↓

33
`

`js
import { transform } from "css-calc-transform";

transform({
prop: "height",
value: "calc(10px + 2em)",
font: {
size: 16
}
});

↓ ↓ ↓ ↓ ↓ ↓

42
`

min(), max(), clamp()

`js
import { transform } from "css-calc-transform";

transform({
prop: "height",
value: "calc(min(2px, 3px) + clamp(100px, 150px, 200px) + max(1px, 2px))",
});

↓ ↓ ↓ ↓ ↓ ↓

154
`

$3

For more examples, please have a look at the tests.

Dependencies

- evaluator.js - A replacement for eval()`