Numerous Pulsating Martians

    precalc

    1.0.2 • Public • Published

    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

    Install

    npm i precalc

    DownloadsWeekly Downloads

    14

    Version

    1.0.2

    License

    Apache-2.0

    Unpacked Size

    76.5 kB

    Total Files

    7

    Last publish

    Collaborators

    • raingerber