Package Exports

css-typed-om

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (css-typed-om) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

CSS Typed Object Model

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.