j2c-math

A j2c companion library to do math on CSS lengths like 2em or 20%.

Installation

$ npm install --save j2c-math

Usage

import {length} form 'j2c-math';
import j2c from 'j2c';

let baseWidth = length('4em');
let pageWidth = baseWidth.mul(10);        // base * 10, returns a new object.
let navWidth  = baseWidth.mul(2);         // base * 2
let mainWidth = pageWidth.sub(navWidth);  // page - side

// j2c treats these objects as values.

sheet = j2c.sheet({
    " body": {
        margin: '0 auto',
        width: baseWidth,

        " nav": {
            float: 'left',
            width: sideWidth
        },
        " main": {
            float: 'left',
            width: mainWidth
        }
    }
})

Becomes

body {
    margin: 0 auto;
    width: 40em;
}
body nav{
    float: left;
    width: 8em;
}
body main{
    float: left;
    width: 32em;
}

Factory

let len = length('2em') // returns a Length object.

The length factory takes as input strings representing CSS lengths, like '2em', '3%'. and returns a new Length object, which is immutable.

Methods

The following methods are supported; they all return a new value:

len.add(another: length|string) : length

If another is a string it must represent a length.

Units must match.

en.sub(another: length|string) : length

As above.

len.mul(n: number|string) : length

If n is a string, it must represent a number, not a length.

len.div(n: number|string) : length

Likewise.

Division by 0 throws.

len.div(another: length|string) : number

Units must match.

Division by 0 throws.

len.toString() and len.valueOf()

Return the corresponding length as a string. j2c actually uses .valueOf() under the hood to get the String representation.

console.log('' + length('6em').div(3)); // '2em'

License: MIT