Skip to content
Use CSS Typed Object Model in the browser
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
lib Support multiplication and division by number primatives May 11, 2018
.appveyor.yml
.editorconfig 0.0.0 Mar 29, 2018
.gitignore 0.0.0 Mar 29, 2018
.rollup.js 0.0.0 Mar 29, 2018
.travis.yml 0.4.0 May 11, 2018
CHANGELOG.md 0.4.0 May 11, 2018
CONTRIBUTING.md 0.4.0 May 11, 2018
LICENSE.md
README.md 0.4.0 May 11, 2018
index.js Refactor for further compatibility and simplicity Apr 2, 2018
package.json
test.js

README.md

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.

You can’t perform that action at this time.