cssstyle 1.0.0 → 1.2.1

package/.eslintignore

@@ -0,0 +1,3 @@
+node_modules
+lib/implementedProperties.js
+lib/properties.js

package/.eslintrc.js

@@ -0,0 +1,50 @@
+'use strict';
+
+module.exports = {
+  root: true,
+  extends: ['eslint:recommended', 'prettier'],
+  parserOptions: {
+    ecmaVersion: 2018,
+  },
+  env: {
+    es6: true,
+  },
+  globals: {
+    exports: true,
+    module: true,
+    require: true,
+    window: true,
+  },
+  plugins: ['prettier'],
+  rules: {
+    'prettier/prettier': [
+      'warn',
+      {
+        printWidth: 100,
+        singleQuote: true,
+        trailingComma: 'es5',
+      },
+    ],
+    strict: ['warn', 'global'],
+  },
+  overrides: [
+    {
+      files: ['lib/implementedProperties.js', 'lib/properties.js'],
+      rules: {
+        'prettier/prettier': 'off',
+      },
+    },
+    {
+      files: 'scripts/**/*',
+      rules: {
+        'no-console': 'off',
+      },
+    },
+    {
+      files: ['scripts/**/*', 'tests/**/*'],
+      env: {
+        node: true,
+      },
+    },
+  ],
+};

package/.npmignore

@@ -0,0 +1 @@
+node_module

package/.travis.yml

@@ -0,0 +1,15 @@
+sudo: false
+language: node_js
+cache:
+  directories:
+    - node_modules
+notifications:
+  email: true
+node_js:
+  - 6
+  - 8
+  - 10
+  - 11
+
+script:
+  - npm run test-ci

package/README.md

@@ -1,27 +1,27 @@
-CSSStyleDeclaration
-===================
+# CSSStyleDeclaration
+
+[![NpmVersion](https://img.shields.io/npm/v/cssstyle.svg)](https://www.npmjs.com/package/cssstyle) [![Build Status](https://travis-ci.org/jsakas/CSSStyleDeclaration.svg?branch=master)](https://travis-ci.org/jsakas/CSSStyleDeclaration)
 
 CSSStyleDeclaration is a work-a-like to the CSSStyleDeclaration class in Nikita Vasilyev's [CSSOM](https://github.com/NV/CSSOM). I made it so that when using [jQuery in node](https://github.com/tmtk75/node-jquery) setting css attributes via $.fn.css() would work. node-jquery uses [jsdom](https://github.com/tmpvar/jsdom) to create a DOM to use in node. jsdom uses CSSOM for styling, and CSSOM's implementation of the [CSSStyleDeclaration](http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration) doesn't support [CSS2Properties](http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSS2Properties), which is how jQuery's [$.fn.css()](http://api.jquery.com/css/) operates.
 
+### Why not just issue a pull request?
 
-Why not just issue a pull request?
-----
 Well, NV wants to keep CSSOM fast (which I can appreciate) and CSS2Properties aren't required by the standard (though every browser has the interface). So I figured the path of least resistance would be to just modify this one class, publish it as a node module (that requires CSSOM) and then make a pull request of jsdom to use it.
 
-How do I test this code?
----
+### How do I test this code?
+
 `npm test` should do the trick, assuming you have the dev dependencies installed:
-> ```
-> $ npm test
->
-> tests
-> ✔ Verify Has Properties
-> ✔ Verify Has Functions
-> ✔ Verify Has Special Properties
-> ✔ Test From Style String
-> ✔ Test From Properties
-> ✔ Test Shorthand Properties
-> ✔ Test width and height Properties and null and empty strings
-> ✔ Test Implicit Properties
-> ```
 
+```
+$ npm test
+
+tests
+✔ Verify Has Properties
+✔ Verify Has Functions
+✔ Verify Has Special Properties
+✔ Test From Style String
+✔ Test From Properties
+✔ Test Shorthand Properties
+✔ Test width and height Properties and null and empty strings
+✔ Test Implicit Properties
+```

package/lib/CSSStyleDeclaration.js

@@ -2,232 +2,254 @@
  * This is a fork from the CSS Style Declaration part of
  * https://github.com/NV/CSSOM
  ********************************************************************/
-"use strict";
+'use strict';
 var CSSOM = require('cssom');
-var fs = require('fs');
-var path = require('path');
-
-var camelToDashed = require('./parsers').camelToDashed;
-var dashedToCamelCase = require('./parsers').dashedToCamelCase;
+var allProperties = require('./allProperties');
+var allExtraProperties = require('./allExtraProperties');
+var implementedProperties = require('./implementedProperties');
+var { dashedToCamelCase } = require('./parsers');
+var getBasicPropertyDescriptor = require('./utils/getBasicPropertyDescriptor');
 
 /**
  * @constructor
  * @see http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration
  */
 var CSSStyleDeclaration = function CSSStyleDeclaration(onChangeCallback) {
-    this._values = {};
-    this._importants = {};
-    this._length = 0;
-    this._onChange = onChangeCallback || function () { return; };
+  this._values = {};
+  this._importants = {};
+  this._length = 0;
+  this._onChange =
+    onChangeCallback ||
+    function() {
+      return;
+    };
 };
 CSSStyleDeclaration.prototype = {
-    constructor: CSSStyleDeclaration,
+  constructor: CSSStyleDeclaration,
+
+  /**
+   *
+   * @param {string} name
+   * @see http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration-getPropertyValue
+   * @return {string} the value of the property if it has been explicitly set for this declaration block.
+   * Returns the empty string if the property has not been set.
+   */
+  getPropertyValue: function(name) {
+    if (!this._values.hasOwnProperty(name)) {
+      return '';
+    }
+    return this._values[name].toString();
+  },
+
+  /**
+   *
+   * @param {string} name
+   * @param {string} value
+   * @param {string} [priority=null] "important" or null
+   * @see http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration-setProperty
+   */
+  setProperty: function(name, value, priority) {
+    if (value === undefined) {
+      return;
+    }
+    if (value === null || value === '') {
+      this.removeProperty(name);
+      return;
+    }
+    var lowercaseName = name.toLowerCase();
+    if (!allProperties.has(lowercaseName) && !allExtraProperties.has(lowercaseName)) {
+      return;
+    }
 
-    /**
-     *
-     * @param {string} name
-     * @see http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration-getPropertyValue
-     * @return {string} the value of the property if it has been explicitly set for this declaration block.
-     * Returns the empty string if the property has not been set.
-     */
-    getPropertyValue: function (name) {
-        if (!this._values.hasOwnProperty(name)) {
-            return "";
-        }
-        return this._values[name].toString();
-    },
+    this[lowercaseName] = value;
+    this._importants[lowercaseName] = priority;
+  },
+  _setProperty: function(name, value, priority) {
+    if (value === undefined) {
+      return;
+    }
+    if (value === null || value === '') {
+      this.removeProperty(name);
+      return;
+    }
+    if (this._values[name]) {
+      // Property already exist. Overwrite it.
+      var index = Array.prototype.indexOf.call(this, name);
+      if (index < 0) {
+        this[this._length] = name;
+        this._length++;
+      }
+    } else {
+      // New property.
+      this[this._length] = name;
+      this._length++;
+    }
+    this._values[name] = value;
+    this._importants[name] = priority;
+    this._onChange(this.cssText);
+  },
+
+  /**
+   *
+   * @param {string} name
+   * @see http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration-removeProperty
+   * @return {string} the value of the property if it has been explicitly set for this declaration block.
+   * Returns the empty string if the property has not been set or the property name does not correspond to a known CSS property.
+   */
+  removeProperty: function(name) {
+    if (!this._values.hasOwnProperty(name)) {
+      return '';
+    }
 
-    /**
-     *
-     * @param {string} name
-     * @param {string} value
-     * @param {string} [priority=null] "important" or null
-     * @see http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration-setProperty
-     */
-    setProperty: function (name, value, priority) {
-        if (value === undefined) {
-            return;
-        }
-        if (value === null || value === '') {
-            this.removeProperty(name);
-            return;
-        }
-        var camel_case = dashedToCamelCase(name);
-        this[camel_case] = value;
-        this._importants[name] = priority;
-    },
-    _setProperty: function (name, value, priority) {
-        if (value === undefined) {
-            return;
-        }
-        if (value === null || value === '') {
-            this.removeProperty(name);
-            return;
-        }
-        if (this._values[name]) {
-            // Property already exist. Overwrite it.
-            var index = Array.prototype.indexOf.call(this, name);
-            if (index < 0) {
-                this[this._length] = name;
-                this._length++;
-            }
-        } else {
-            // New property.
-            this[this._length] = name;
-            this._length++;
-        }
-        this._values[name] = value;
-        this._importants[name] = priority;
-        this._onChange(this.cssText);
-    },
+    var prevValue = this._values[name];
+    delete this._values[name];
+    delete this._importants[name];
 
-    /**
-     *
-     * @param {string} name
-     * @see http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration-removeProperty
-     * @return {string} the value of the property if it has been explicitly set for this declaration block.
-     * Returns the empty string if the property has not been set or the property name does not correspond to a known CSS property.
-     */
-    removeProperty: function (name) {
-        if (!this._values.hasOwnProperty(name)) {
-            return "";
-        }
+    var index = Array.prototype.indexOf.call(this, name);
+    if (index < 0) {
+      return prevValue;
+    }
 
-        var prevValue = this._values[name];
-        delete this._values[name];
-        delete this._importants[name];
+    // That's what WebKit and Opera do
+    Array.prototype.splice.call(this, index, 1);
+
+    // That's what Firefox does
+    //this[index] = ""
+
+    this._onChange(this.cssText);
+    return prevValue;
+  },
+
+  /**
+   *
+   * @param {String} name
+   */
+  getPropertyPriority: function(name) {
+    return this._importants[name] || '';
+  },
+
+  getPropertyCSSValue: function() {
+    //FIXME
+    return;
+  },
+
+  /**
+   *   element.style.overflow = "auto"
+   *   element.style.getPropertyShorthand("overflow-x")
+   *   -> "overflow"
+   */
+  getPropertyShorthand: function() {
+    //FIXME
+    return;
+  },
+
+  isPropertyImplicit: function() {
+    //FIXME
+    return;
+  },
+
+  /**
+   *   http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration-item
+   */
+  item: function(index) {
+    index = parseInt(index, 10);
+    if (index < 0 || index >= this._length) {
+      return '';
+    }
+    return this[index];
+  },
+};
 
-        var index = Array.prototype.indexOf.call(this, name);
-        if (index < 0) {
-            return prevValue;
+Object.defineProperties(CSSStyleDeclaration.prototype, {
+  cssText: {
+    get: function() {
+      var properties = [];
+      var i;
+      var name;
+      var value;
+      var priority;
+      for (i = 0; i < this._length; i++) {
+        name = this[i];
+        value = this.getPropertyValue(name);
+        priority = this.getPropertyPriority(name);
+        if (priority !== '') {
+          priority = ' !' + priority;
         }
-
-        // That's what WebKit and Opera do
-        Array.prototype.splice.call(this, index, 1);
-
-        // That's what Firefox does
-        //this[index] = ""
-
-        this._onChange(this.cssText);
-        return prevValue;
+        properties.push([name, ': ', value, priority, ';'].join(''));
+      }
+      return properties.join(' ');
     },
-
-
-    /**
-     *
-     * @param {String} name
-     */
-    getPropertyPriority: function (name) {
-        return this._importants[name] || "";
-    },
-
-
-    getPropertyCSSValue: function () {
-        //FIXME
+    set: function(value) {
+      var i;
+      this._values = {};
+      Array.prototype.splice.call(this, 0, this._length);
+      this._importants = {};
+      var dummyRule;
+      try {
+        dummyRule = CSSOM.parse('#bogus{' + value + '}').cssRules[0].style;
+      } catch (err) {
+        // malformed css, just return
         return;
+      }
+      var rule_length = dummyRule.length;
+      var name;
+      for (i = 0; i < rule_length; ++i) {
+        name = dummyRule[i];
+        this.setProperty(
+          dummyRule[i],
+          dummyRule.getPropertyValue(name),
+          dummyRule.getPropertyPriority(name)
+        );
+      }
+      this._onChange(this.cssText);
     },
-
-    /**
-     *   element.style.overflow = "auto"
-     *   element.style.getPropertyShorthand("overflow-x")
-     *   -> "overflow"
-     */
-    getPropertyShorthand: function () {
-        //FIXME
-        return;
+    enumerable: true,
+    configurable: true,
+  },
+  parentRule: {
+    get: function() {
+      return null;
     },
-
-    isPropertyImplicit: function () {
-        //FIXME
-        return;
+    enumerable: true,
+    configurable: true,
+  },
+  length: {
+    get: function() {
+      return this._length;
     },
-
     /**
-     *   http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration-item
-     */
-    item: function (index) {
-        index = parseInt(index, 10);
-        if (index < 0 || index >= this._length) {
-            return '';
-        }
-        return this[index];
-    }
-};
-
-Object.defineProperties(CSSStyleDeclaration.prototype, {
-    cssText: {
-        get: function () {
-            var properties = [];
-            var i;
-            var name;
-            var value;
-            var priority;
-            for (i = 0; i < this._length; i++) {
-                name = this[i];
-                value = this.getPropertyValue(name);
-                priority = this.getPropertyPriority(name);
-                if (priority !== '') {
-                    priority = " !" + priority;
-                }
-                properties.push([name, ': ', value, priority, ';'].join(''));
-            }
-            return properties.join(' ');
-        },
-        set: function (value) {
-            var i;
-            this._values = {};
-            Array.prototype.splice.call(this, 0, this._length);
-            this._importants = {};
-            var dummyRule;
-            try {
-                dummyRule = CSSOM.parse('#bogus{' + value + '}').cssRules[0].style;
-            } catch (err) {
-                // malformed css, just return
-                return;
-            }
-            var rule_length = dummyRule.length;
-            var name;
-            for (i = 0; i < rule_length; ++i) {
-                name = dummyRule[i];
-                this.setProperty(dummyRule[i], dummyRule.getPropertyValue(name), dummyRule.getPropertyPriority(name));
-            }
-            this._onChange(this.cssText);
-        },
-        enumerable: true,
-        configurable: true
-    },
-    parentRule: {
-        get: function () { return null; },
-        enumerable: true,
-        configurable: true
+     * This deletes indices if the new length is less then the current
+     * length. If the new length is more, it does nothing, the new indices
+     * will be undefined until set.
+     **/
+    set: function(value) {
+      var i;
+      for (i = value; i < this._length; i++) {
+        delete this[i];
+      }
+      this._length = value;
     },
-    length: {
-        get: function () { return this._length; },
-        /**
-         * This deletes indices if the new length is less then the current
-         * length. If the new length is more, it does nothing, the new indices
-         * will be undefined until set.
-         **/
-        set: function (value) {
-            var i;
-            for (i = value; i < this._length; i++) {
-                delete this[i];
-            }
-            this._length = value;
-        },
-        enumerable: true,
-        configurable: true
-    },
-    'float': {
-        get: function () { return this.cssFloat; },
-        set: function (value) {
-            this.cssFloat = value;
-        },
-        enumerable: true,
-        configurable: true
-    }
+    enumerable: true,
+    configurable: true,
+  },
 });
 
 require('./properties')(CSSStyleDeclaration.prototype);
 
+allProperties.forEach(function(property) {
+  if (!implementedProperties.has(property)) {
+    var declaration = getBasicPropertyDescriptor(property);
+    Object.defineProperty(CSSStyleDeclaration.prototype, property, declaration);
+    Object.defineProperty(CSSStyleDeclaration.prototype, dashedToCamelCase(property), declaration);
+  }
+});
+
+allExtraProperties.forEach(function(property) {
+  if (!implementedProperties.has(property)) {
+    var declaration = getBasicPropertyDescriptor(property);
+    Object.defineProperty(CSSStyleDeclaration.prototype, property, declaration);
+    Object.defineProperty(CSSStyleDeclaration.prototype, dashedToCamelCase(property), declaration);
+  }
+});
+
 exports.CSSStyleDeclaration = CSSStyleDeclaration;