npm

Join us for the upcoming webinar, "Enterprise JavaScript done right: the tools you love, the security you need."Sign up here »

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

68

version

0.4.0

license

CC0-1.0

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability