0.2.0

Author: jonathantneal

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changes to CSS Typed Object Model
 
+### 0.2.0 (April 4, 2018)
+
+- Safely checks for existing methods before polyfilling
+- `CSSUnitValue` and `CSSKeywordValue` have realistic getters and setters
+
 ### 0.1.0 (April 2, 2018)
 
 - Default export is now `polyfill`

lib/CSSKeywordValue.js

@@ -1,6 +1,14 @@
-import CSSStyleValue from './CSSStyleValue';
+const _value = new WeakMap();
 
 export default class CSSKeywordValue {
+	get value() {
+		return _value.get(this);
+	}
+
+	set value(newValue) {
+		_value.set(this, String(newValue));
+	}
+
 	toString() {
 		return `${this.value}`;
 	}
@@ -10,23 +18,10 @@ export default class CSSKeywordValue {
 			throw new TypeError(`Failed to construct 'CSSKeywordValue': 1 arguments required, but only ${args.length} present.`);
 		}
 
-		let [ value ] = args;
-
-		this.value = String(value);
-
-		Object.defineProperties(this, {
-			value: {
-				configurable: true,
-				enumerable: true,
-				get() {
-					return value
-				},
-				set(newValue) {
-					value = String(newValue);
-				}
-			}
-		});
+		_value.set(this, String(args[0]));
 	}
 }
 
-CSSKeywordValue.prototype = Object.create(CSSStyleValue.prototype);
+Object.defineProperties(CSSKeywordValue.prototype, {
+	value: { enumerable: true }
+});

lib/CSSUnitValue.js

@@ -1,47 +1,39 @@
-import CSSStyleValue from './CSSStyleValue';
 import units from './units';
 
+const _value = new WeakMap();
+const _unit = new WeakMap();
+
 export default class CSSUnitValue {
+	get value() {
+		return _value.get(this);
+	}
+
+	set value(newValue) {
+		_value.set(this, getFiniteNumber(newValue));
+	}
+
+	get unit() {
+		return _unit.get(this);
+	}
+
+	toString() {
+		return `${this.value}${units[this.unit]}`;
+	}
+
 	constructor(...args) {
 		if (args.length < 2) {
 			throw new TypeError(`Failed to construct 'CSSUnitValue': 2 arguments required, but only ${args.length} present.`);
 		}
 
-		let [ value, unit ] = args;
-
-		value = getFiniteNumber(value);
-		unit = getUnit(unit);
-
-		Object.defineProperties(this, {
-			value: {
-				configurable: true,
-				enumerable: true,
-				get() {
-					return value
-				},
-				set(newValue) {
-					value = getFiniteNumber(newValue);
-				}
-			},
-			unit: {
-				configurable: true,
-				enumerable: true,
-				get() {
-					return unit
-				}
-			},
-			toString: {
-				configurable: true,
-				enumerable: false,
-				value() {
-					return this.unit === 'number' ? `${this.value}` : `${this.value}${units[this.unit]}`;
-				}
-			}
-		});
+		_value.set(this, getFiniteNumber(args[0]));
+		_unit.set(this, getUnit(args[1]));
 	}
 }
 
-CSSUnitValue.prototype = Object.create(CSSStyleValue.prototype);
+Object.defineProperties(CSSUnitValue.prototype, {
+	value: { enumerable: true },
+	unit: { enumerable: true }
+});
 
 function getFiniteNumber(value) {
 	if (isNaN(value) || Math.abs(value) === Infinity) {

lib/polyfill.js

@@ -9,25 +9,25 @@ export default function polyfill(window) {
 
 	Object.keys(units).forEach(
 		unit => {
-			if (!window.CSS[unit]) {
+			if (!(unit in window.CSS)) {
 				window.CSS[unit] = value => new CSSUnitValue(value, unit);
 			}
 		}
 	);
 
-	if (!CSSRule.prototype.styleMap) defineProperty(
+	defineProperty(
 		CSSRule.prototype,
 		'styleMap',
 		context => context.style
 	);
 
-	if (!CSSRule.prototype.attributeStyleMap) defineProperty(
+	defineProperty(
 		Element.prototype,
 		'attributeStyleMap',
 		context => context.style
 	);
 
-	if (!Element.prototype.computedStyleMap) defineProperty(
+	defineProperty(
 		Element.prototype,
 		'computedStyleMap',
 		context => getComputedStyle(context)
@@ -39,16 +39,18 @@ export default function polyfill(window) {
 	if (!window.StylePropertyMap) window.StylePropertyMap = StylePropertyMap;
 
 	function defineProperty(prototype, property, getStyle) {
-		Object.defineProperty(prototype, property, {
-			configurable: true,
-			enumerable: true,
-			get() {
-				const computedStyleMap = Object.create(StylePropertyMap.prototype);
-
-				computedStyleMap.style = getStyle(this);
-
-				return computedStyleMap;
-			}
-		});
+		if (!(property in prototype)) {
+			Object.defineProperty(prototype, property, {
+				configurable: true,
+				enumerable: true,
+				get() {
+					const computedStyleMap = Object.create(StylePropertyMap.prototype);
+
+					computedStyleMap.style = getStyle(this);
+
+					return computedStyleMap;
+				}
+			});
+		}
 	}
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "css-typed-om",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Use CSS Typed Object Model in the browser",
   "author": "Jonathan Neal <[email protected]>",
   "license": "CC0-1.0",