Precalc

Simplify CSS equations with mixed units and wrap them in calc.

const { calc } = require('precalc')

const num = 5

calc(`${num}px * 5 + 20px`)
// '45px' (calc is not required)

calc(`${num}% * 5 + 20px`)
// 'calc(25% + 20px)`

calc('(2vh * (9)) / 3 * 4 + -(4vh) - 10px')
// 'calc(20vh - 10px)'

API

The primary function. It supports currying.

`calc([options], input)`

options (object) - optional
- units (array<string> | boolean) - default: false
  - validate the unit types in the input equation
  - array - if the equation has units that are not in the array, throw an error
  - true - valdate against vh, vw, px, %, em, rem
  - false - do not validate units
- throws (boolean) - default: true
  - throw errors for malformed equations
  - when false, eq and calc return null for invalid input
input (string) - css equation
- supported operators: + - / *

// this works...
calc('5px + 10px')

// and this works...
calc({ throws: false }, '5px + 10px')

// and this...
calc = calc({ throws: false })

// ...works too!
calc('5px + 10px') // evaluates with throws: false

`eq([options], input)`

just like calc, but without the word "calc" in the output

const num = 5

eq(`${num}px * 5 + 20px`)
// '45px'

eq(`${num}% * 5 + 20px`)
// '25% + 20px`

`wrapInCalc(input)`

wraps the input with "calc" if necessary

input (string) - css equation

wrapInCalc('50%')
// '50%'

wrapInCalc('50% + 25px')
// 'calc(50% + 25px)'

NOTE:

calc is just shorthand for eq and wrapInCalc together:

const calc = (...args) => wrapInCalc(eq(...args))

Example

generating 16x9 height and width

const columns = 2
const ratio = '9 / 16'

let width = eq(`20vw * ${columns} + 10px * ${columns}`)
// input:  '20vw * 2 + 10px * 2'
// output: '40vw + 20px'

const height = calc(`(${width}) * (${ratio})`)
// input:  '(40vw + 20px) * (9 / 16)'
// output: 'calc(22.5vw + 11.25px)'

width = wrapInCalc(width)
// input:  '40vw + 20px'
// output: 'calc(40vw + 20px)'

To see examples of valid input, check index.test.js

Input Errors

Non-matching parentheses
Letters or % character with no preceding number
Unsupported unit types (unless options.units is false)
Input with chars that are not + - * / % ( ) digits or letters
Adding or subtracting a number with units to a number without units
Multiplying two numbers that both have units
Dividing by a number with units
Dividing by zero

ViacomInc/precalc