@gravitylabs/css-calc-transform

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

• None