css-calc-transform

    0.11.0 • Public • Published

    CSS calc() to pixels transform

    NPM version Build Status Build status Size contributions welcome

    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

    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.

    Install

    npm i css-calc-transform

    DownloadsWeekly Downloads

    3

    Version

    0.11.0

    License

    MIT

    Unpacked Size

    13.4 kB

    Total Files

    7

    Last publish

    Collaborators

    • kristerkari