Refactor for further compatibility and simplicity

Author: jonathantneal

README.md

@@ -16,7 +16,7 @@ npm install css-typed-om
 Polyfill the `window` object:
 
 ```js
-import { polyfill } from 'css-typed-om';
+import polyfill from 'css-typed-om';
 
 polyfill(window);
 ```
@@ -85,20 +85,37 @@ exist:
 
 ### StylePropertyMap
 
-A constructor for `StylePropertyMap`, used to polyfill 
+A constructor for `StylePropertyMap`, used by the polyfill for `CSS`,
+`CSSRule`, and `Element`.
+
+```js
+import { StylePropertyMap } from 'css-typed-om';
+```
 
 ### CSSKeywordValue
 
 A constructor for `CSSKeywordValue`, used by `StylePropertyMap`.
 
+```js
+import { CSSKeywordValue } from 'css-typed-om';
+```
+
 ### CSSUnitValue
 
 A constructor for `CSSUnitValue`, used by `StylePropertyMap`.
 
+```js
+import { CSSUnitValue } from 'css-typed-om';
+```
+
 ### CSSStyleValue
 
 A constructor for `CSSStyleValue`, the super constructor of `CSSKeywordValue`
-and `CSSUnitValue`.
+and `CSSStyleValue`.
+
+```js
+import { StylePropertyMap } from 'css-typed-om';
+```
 
 [npm-url]: https://www.npmjs.com/package/css-typed-om
 [npm-img]: https://img.shields.io/npm/v/css-typed-om.svg

index.js

@@ -4,8 +4,9 @@ import CSSStyleValue from './lib/CSSStyleValue';
 import CSSUnitValue from './lib/CSSUnitValue';
 import StylePropertyMap from './lib/StylePropertyMap';
 
+export default polyfill
+
 export {
-	polyfill,
 	CSSKeywordValue,
 	CSSStyleValue,
 	CSSUnitValue,

lib/CSSKeywordValue.js

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

lib/CSSStyleValue.js

@@ -1 +1,5 @@
-export default class CSSStyleValue {}
+export default class CSSStyleValue {
+	constructor() {
+		throw new TypeError('Illegal constructor');
+	}
+}

lib/CSSUnitValue.js

@@ -1,35 +1,48 @@
 import CSSStyleValue from './CSSStyleValue';
 import units from './units';
 
-export default class CSSUnitValue extends CSSStyleValue {
-	get value() {
-		return this._value;
-	}
-
-	set value(value) {
-		this._value = getFiniteNumber(value)
-	}
-
-	get unit() {
-		return this._unit;
-	}
-
-	toString() {
-		return this._unit === 'number' ? `${this._value}` : `${this._value}${units[this._unit]}`;
-	}
-
+export default class CSSUnitValue {
 	constructor(...args) {
-		super()
-
 		if (args.length < 2) {
 			throw new TypeError(`Failed to construct 'CSSUnitValue': 2 arguments required, but only ${args.length} present.`);
 		}
 
-		this._value = getFiniteNumber(args[0]);
-		this._unit = getUnit(args[1]);
+		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]}`;
+				}
+			}
+		});
 	}
 }
 
+CSSUnitValue.prototype = Object.create(CSSStyleValue.prototype);
+
 function getFiniteNumber(value) {
 	if (isNaN(value) || Math.abs(value) === Infinity) {
 		throw new TypeError(`Failed to set the 'value' property on 'CSSUnitValue': The provided double value is non-finite.`);

lib/parse-as-value.js

@@ -8,7 +8,7 @@ export default string => {
 	if (unitParsingMatch) {
 		const [, value, unit] = unitParsingMatch;
 
-		return new CSSUnitValue(value, unitKeys[unitValues.indexOf(unit)]);
+		return new CSSUnitValue(value, unitKeys[unitValues.indexOf(unit || '')]);
 	}
 
 	return new CSSKeywordValue(string);

lib/polyfill.js

@@ -1,4 +1,7 @@
-import { CSSKeywordValue, CSSUnitValue, CSSStyleValue, StylePropertyMap } from 'css-typed-om';
+import CSSKeywordValue from './CSSKeywordValue';
+import CSSUnitValue from './CSSUnitValue';
+import CSSStyleValue from './CSSStyleValue';
+import StylePropertyMap from './StylePropertyMap';
 import units from './units';
 
 export default function polyfill(window) {