Rewrite

.eslintignore

@@ -1,4 +1,7 @@
 node_modules
+lib/CSSStyleDeclaration.js
+lib/Function.js
+lib/VoidFunction.js
 lib/implementedProperties.js
-lib/properties.js
+lib/utils.js
 jest.config.js

.eslintrc.js

@@ -8,12 +8,9 @@ module.exports = {
   },
   env: {
     es6: true,
+    node: true,
   },
   globals: {
-    exports: true,
-    module: true,
-    require: true,
-    window: true,
     describe: true,
     it: true,
     test: true,
@@ -34,7 +31,7 @@ module.exports = {
   },
   overrides: [
     {
-      files: ['lib/implementedProperties.js', 'lib/properties.js'],
+      files: ['lib/implementedProperties.js'],
       rules: {
         'prettier/prettier': 'off',
       },
@@ -47,9 +44,6 @@ module.exports = {
     },
     {
       files: ['scripts/**/*', 'tests/**/*'],
-      env: {
-        node: true,
-      },
     },
   ],
 };

.gitignore

@@ -1,5 +1,9 @@
 node_modules
 npm-debug.log
+lib/CSSStyleDeclaration.js
+lib/Function.js
+lib/VoidFunction.js
 lib/implementedProperties.js
-lib/properties.js
+lib/utils.js
 coverage
+src/CSSStyleDeclaration-properties.webidl

.npmignore

@@ -1,3 +1,5 @@
 /*
 !lib/
+lib/Function.js
+lib/VoidFunction.js
 !LICENSE

.travis.yml

@@ -9,7 +9,6 @@ install:
     - npm install
     - npm install -g codecov
 node_js:
-  - "8"
   - "10"
   - "12"
 

README.md

@@ -4,12 +4,47 @@ A Node JS implementation of the CSS Object Model [CSSStyleDeclaration interface]
 
 [![NpmVersion](https://img.shields.io/npm/v/cssstyle.svg)](https://www.npmjs.com/package/cssstyle) [![Build Status](https://travis-ci.org/jsdom/cssstyle.svg?branch=master)](https://travis-ci.org/jsdom/cssstyle) [![codecov](https://codecov.io/gh/jsdom/cssstyle/branch/master/graph/badge.svg)](https://codecov.io/gh/jsdom/cssstyle)
 
----
+## Background
 
-#### Background
+This package is an extension of the CSSStyleDeclaration class in Nikita Vasilyev's [CSSOM](https://github.com/NV/CSSOM) with added support for CSS 2 & 3 properties. The primary use case is for testing browser code in a Node environment.
 
-This package is an extension of the CSSStyleDeclaration class in Nikita Vasilyev's [CSSOM](https://github.com/NV/CSSOM) with added support for CSS 2 & 3 properties. The primary use case is for testing browser code in a Node environment. 
-
-It was originally created by Chad Walker, it is now maintained by the jsdom community.
+It was originally created by Chad Walker, it is now maintained by Jon Sakas and other open source contributors.
 
 Bug reports and pull requests are welcome.
+
+## APIs
+
+This package exposes two flavors of the `CSSStyleDeclaration` interface depending on the imported module.
+
+### `cssstyle` module
+
+This module default-exports the `CSSStyleDeclaration` interface constructor, with the change that it can be constructed with an optional `onChangeCallback` parameter. Whenever any CSS property is modified through an instance of this class, the callback (if provided) will be called with a string that represents all CSS properties of this element, serialized. This allows the embedding environment to properly reflect the style changes to an element's `style` attribute.
+
+Here is a crude example of using the `onChangeCallback` to implement the `style` property of `HTMLElement`:
+```js
+const CSSStyleDeclaration = require('cssstyle');
+
+class HTMLElement extends Element {
+  constructor() {
+    this._style = new CSSStyleDeclaration(newCSSText => {
+      this.setAttributeNS(null, "style", newCSSText);
+    });
+  }
+
+  get style() {
+    return this._style;
+  }
+
+  set style(text) {
+    this._style.cssText = text;
+  }
+}
+```
+
+### `cssstyle/webidl2js-wrapper` module
+
+This module exports the `CSSStyleDeclaration` [interface wrapper API](https://github.com/jsdom/webidl2js#for-interfaces) generated by [webidl2js](https://github.com/jsdom/webidl2js). Unlike the default export, `CSSStyleDeclaration` constructors installed by the webidl2js wrapper do _not_ support construction, just like how they actually are in browsers. Creating new `CSSStyleDeclaration` objects can be done with the [`create`](https://github.com/jsdom/webidl2js#createglobalobject-constructorargs-privatedata) method of the wrapper.
+
+#### `privateData`
+
+The `privateData` parameter of `create` and `createImpl` provides a way to specify the `onChangeCallback` that is a constructor parameter in the default export. Only the `onChangeCallback` property is supported on `privateData` currently, with the same semantics as the constructor parameter documented above.

index.js

@@ -0,0 +1,34 @@
+'use strict';
+const webidlWrapper = require('./webidl2js-wrapper.js');
+
+const sharedGlobalObject = {};
+webidlWrapper.install(sharedGlobalObject, ['Window']);
+
+const origCSSStyleDeclaration = sharedGlobalObject.CSSStyleDeclaration;
+
+/**
+ * @constructor
+ * @param {((cssText: string) => void) | null} [onChangeCallback]
+ * The callback that is invoked whenever a property changes.
+ */
+function CSSStyleDeclaration(onChangeCallback = null) {
+  if (new.target === undefined) {
+    throw new TypeError("Class constructor CSSStyleDeclaration cannot be invoked without 'new'");
+  }
+
+  if (onChangeCallback !== null && typeof onChangeCallback !== 'function') {
+    throw new TypeError('Failed to construct CSSStyleDeclaration: parameter 1 is not a function');
+  }
+
+  return webidlWrapper.create(sharedGlobalObject, undefined, { onChangeCallback });
+}
+
+sharedGlobalObject.CSSStyleDeclaration = CSSStyleDeclaration;
+Object.defineProperty(CSSStyleDeclaration, 'prototype', {
+  value: origCSSStyleDeclaration.prototype,
+  writable: false,
+});
+CSSStyleDeclaration.prototype.constructor = CSSStyleDeclaration;
+Object.setPrototypeOf(CSSStyleDeclaration, Object.getPrototypeOf(origCSSStyleDeclaration));
+
+module.exports = CSSStyleDeclaration;

jest.config.js

@@ -3,8 +3,9 @@ module.exports = {
   "collectCoverage": true,
   "collectCoverageFrom": [
     "lib/**/*.js",
+    "!lib/CSSStyleDeclaration.js",
     "!lib/implementedProperties.js",
-    "!lib/properties.js",
+    "!lib/utils.js",
   ],
   "coverageDirectory": "coverage",
 };