css-typed-om

    0.4.0 • Public • Published

    CSS Typed Object Model js logo

    NPM Version Build Status

    CSS Typed Object Model is a work-in-progress polyfill for using CSS Typed OM Level 1 in the browser.

    Pull Requests are welcome. Please don’t use this in production until there is a v1.0.0.

    npm install css-typed-om

    Polyfill the window object:

    import polyfill from 'css-typed-om';
     
    polyfill(window);

    Use CSS Typed Object Model features:

    // Element styles
    document.body.attributeStyleMap.set('padding-top', CSS.px(42));
    document.body.attributeStyleMap.get('padding-top') /* CSSUnitValue {
      value: 42,
      unit: 'px'
    }.toString() => 42px */
     
    document.body.attributeStyleMap.set('opacity', 0.3);
    typeof document.body.attributeStyleMap.get('opacity').value // number
    document.body.attributeStyleMap.get('opacity').unit // "number"
     
    // Stylesheet rules
    document.styleSheets[0].cssRules[0].styleMap.set('padding-top', '100px');
    document.styleSheets[0].cssRules[0].styleMap.get('padding-top'); /* CSSUnitValue {
      value: 100,
      unit: 'px'
    }.toString() => 100px */
     
    // Math products
    CSS.px(15).add(CSS.rem(10), CSS.em(5)) /* CSSMathSum {
      operator: "sum",
      values: [
        CSSUnitValue { value: 15, unit: 'px' },
        CSSUnitValue { value: 10, unit: 'rem' },
        CSSUnitValu { value: 5, unit: 'em' }
      ]
    }.toString() => calc(15px + 10rem + 5em) */
     
    CSS.px(15).mul(CSS.rem(10), CSS.em(5)) /* CSSMathProduct {
      operator: "product",
      values: [
        CSSUnitValue { value: 15, unit: 'px' },
        CSSUnitValue { value: 10, unit: 'rem' },
        CSSUnitValu { value: 5, unit: 'em' }
      ]
    }.toString() => calc(15px * 10rem * 5em) */
     
    CSS.px(15).sub(CSS.rem(10), CSS.em(5)) /* CSSMathSum {
      operator: "sum",
      values: [
        CSSUnitValue { value: 15, unit: 'px' },
        CSSUnitValue { value: -10, unit: 'rem' },
        CSSUnitValu { value: -5, unit: 'em' }
      ]
    }.toString() => calc(15px + -10rem + -5em) */
     
    CSS.px(15).div(CSS.rem(10), CSS.em(5)) /* CSSMathProduct {
      operator: "product",
      values: [
        CSSUnitValue { value: 15, unit: 'px' },
        CSSMathInvert {
          operator: 'invert',
          value: CSSUnitValue { value: 10, unit: 'rem' }
        },
        CSSMathInvert {
          operator: 'invert',
          value: CSSUnitValue { value: 5, unit: 'em' }
        }
      ]
    }.toString() => calc(15px / 10rem / 5em) */
     
    CSS.px(15).max(CSS.rem(10), CSS.em(5)) /* CSSMathMax {
      operator: 'max',
      values: [
        CSSUnitValue { value: 15, unit: 'px' },
        CSSUnitValue { value: 10, unit: 'rem' },
        CSSUnitValu { value: 5, unit: 'em' }
      ],
    }.toString() => max(15px, 10rem, 5em) */
     
    CSS.px(15).min(CSS.rem(10), CSS.em(5)) /* CSSMathMin {
      operator: 'min',
      values: [
        CSSUnitValue { value: 15, unit: 'px' },
        CSSUnitValue { value: 10, unit: 'rem' },
        CSSUnitValu { value: 5, unit: 'em' }
      ],
    }.toString() => min(15px, 10rem, 5em) */

    Features

    polyfill

    The polyfill function adds the following functions to window if they do not already exist:

    • CSS
    • CSSKeywordValue
    • CSSMathInvert
    • CSSMathMax
    • CSSMathMin
    • CSSMathProduct
    • CSSMathSum
    • CSSStyleValue
    • CSSUnitValue
    • StylePropertyMap

    It then adds the following functions to CSS if they do not already exist:

    • number
    • percent
    • em
    • ex
    • ch
    • rem
    • vw
    • vh
    • vmin
    • vmax
    • cm
    • mm
    • in
    • pt
    • pc
    • px
    • Q
    • deg
    • grad
    • rad
    • turn
    • s
    • ms
    • Hz
    • kHz
    • dpi
    • dpcm
    • dppx
    • fr

    The new CSSUnitValue instances returned by these methods extend CSSNumericValue, which allow them to use the following methods:

    • add
    • div
    • max
    • min
    • mul
    • sub

    The result of these transforms may be a new CSSUnitValue instance or a new CSSMathProduct, CSSMathMax, CSSMathMin, or CSSMathSum instance.

    They all stringify back into compliant CSS.

    Install

    npm i css-typed-om

    DownloadsWeekly Downloads

    131

    Version

    0.4.0

    License

    CC0-1.0

    Unpacked Size

    67.1 kB

    Total Files

    6

    Last publish

    Collaborators

    • avatar