/precalc

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

Primary LanguageJavaScriptApache License 2.0Apache-2.0

Precalc

Build Status codecov size gzip size module formats: umd, cjs, and es License

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