Package Exports

css-calc-transform
css-calc-transform/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (css-calc-transform) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

yarn add --save css-calc-transform

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

evaluator.js - A replacement for eval()