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-omPolyfill 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) */The polyfill function adds the following functions to window if they do not
already exist:
CSSCSSKeywordValueCSSMathInvertCSSMathMaxCSSMathMinCSSMathProductCSSMathSumCSSStyleValueCSSUnitValueStylePropertyMap
It then adds the following functions to CSS if they do not already exist:
numberpercentemexchremvwvhvminvmaxcmmminptpcpxQdeggradradturnsmsHzkHzdpidpcmdppxfr
The new CSSUnitValue instances returned by these methods extend
CSSNumericValue, which allow them to use the following methods:
adddivmaxminmulsub
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.