Package Exports

css-calc-transform

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

When you want to transform CSS calc() value containing pixels into a number:

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

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

↓ ↓ ↓ ↓ ↓ ↓

38.57142857142857

When you want to transform CSS calc() value containing percentages into a number:

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

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

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

↓ ↓ ↓ ↓ ↓ ↓

470

When you want to transform CSS calc() value containing viewport units into a number:

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

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

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

↓ ↓ ↓ ↓ ↓ ↓

330

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