cssstyle 4.3.1 → 4.4.0

package/lib/CSSStyleDeclaration.js

@@ -1,272 +1,611 @@
-/*********************************************************************
+/**
  * This is a fork from the CSS Style Declaration part of
  * https://github.com/NV/CSSOM
- ********************************************************************/
-'use strict';
-var CSSOM = require('rrweb-cssom');
-var allProperties = require('./allProperties');
-var allExtraProperties = require('./allExtraProperties');
-var implementedProperties = require('./implementedProperties');
-var { dashedToCamelCase } = require('./parsers');
-var getBasicPropertyDescriptor = require('./utils/getBasicPropertyDescriptor');
+ */
+"use strict";
+const CSSOM = require("rrweb-cssom");
+const allExtraProperties = require("./allExtraProperties");
+const allProperties = require("./generated/allProperties");
+const implementedProperties = require("./generated/implementedProperties");
+const generatedProperties = require("./generated/properties");
+const { hasVarFunc, parseKeyword, parseShorthand, prepareValue, splitValue } = require("./parsers");
+const { dashedToCamelCase } = require("./utils/camelize");
+const { getPropertyDescriptor } = require("./utils/propertyDescriptors");
 
 /**
- * @constructor
- * @see http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration
+ * @see https://drafts.csswg.org/cssom/#the-cssstyledeclaration-interface
  */
-var CSSStyleDeclaration = function CSSStyleDeclaration(onChangeCallback) {
-  this._values = {};
-  this._importants = {};
-  this._length = 0;
-  this._onChange = onChangeCallback;
-  this._setInProgress = false;
-};
-CSSStyleDeclaration.prototype = {
-  constructor: CSSStyleDeclaration,
-
+class 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.
+   * @param {Function} onChangeCallback
+   * @param {object} [opt]
+   * @param {object} [opt.context] - Window, Element or CSSRule.
    */
-  getPropertyValue: function (name) {
-    if (!this._values.hasOwnProperty(name)) {
-      return '';
-    }
-    return this._values[name].toString();
-  },
+  constructor(onChangeCallback, opt = {}) {
+    // Make constructor and internals non-enumerable.
+    Object.defineProperties(this, {
+      constructor: {
+        enumerable: false,
+        writable: true
+      },
 
-  /**
-   *
-   * @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;
+      // Window
+      _global: {
+        value: globalThis,
+        enumerable: false,
+        writable: true
+      },
+
+      // Element
+      _ownerNode: {
+        value: null,
+        enumerable: false,
+        writable: true
+      },
+
+      // CSSRule
+      _parentNode: {
+        value: null,
+        enumerable: false,
+        writable: true
+      },
+
+      _onChange: {
+        value: null,
+        enumerable: false,
+        writable: true
+      },
+
+      _values: {
+        value: new Map(),
+        enumerable: false,
+        writable: true
+      },
+
+      _priorities: {
+        value: new Map(),
+        enumerable: false,
+        writable: true
+      },
+
+      _length: {
+        value: 0,
+        enumerable: false,
+        writable: true
+      },
+
+      _computed: {
+        value: false,
+        enumerable: false,
+        writable: true
+      },
+
+      _readonly: {
+        value: false,
+        enumerable: false,
+        writable: true
+      },
+
+      _setInProgress: {
+        value: false,
+        enumerable: false,
+        writable: true
+      }
+    });
+
+    const { context } = opt;
+    if (context) {
+      if (typeof context.getComputedStyle === "function") {
+        this._global = context;
+        this._computed = true;
+        this._readonly = true;
+      } else if (context.nodeType === 1 && Object.hasOwn(context, "style")) {
+        this._global = context.ownerDocument.defaultView;
+        this._ownerNode = context;
+      } else if (Object.hasOwn(context, "parentRule")) {
+        this._parentRule = context;
+        // Find Window from the owner node of the StyleSheet.
+        const window = context?.parentStyleSheet?.ownerNode?.ownerDocument?.defaultView;
+        if (window) {
+          this._global = window;
+        }
+      }
     }
-    if (value === null || value === '') {
-      this.removeProperty(name);
-      return;
+    if (typeof onChangeCallback === "function") {
+      this._onChange = onChangeCallback;
     }
-    var isCustomProperty =
-      name.indexOf('--') === 0 ||
-      (typeof value === 'string' && /^var\(--[-\w]+,?.*\)$/.test(value));
-    if (isCustomProperty) {
-      this._setProperty(name, value, priority);
-      return;
+  }
+
+  get cssText() {
+    if (this._computed) {
+      return "";
     }
-    var lowercaseName = name.toLowerCase();
-    if (!allProperties.has(lowercaseName) && !allExtraProperties.has(lowercaseName)) {
-      return;
+    const properties = [];
+    for (let i = 0; i < this._length; i++) {
+      const property = this[i];
+      const value = this.getPropertyValue(property);
+      const priority = this.getPropertyPriority(property);
+      if (priority === "important") {
+        properties.push(`${property}: ${value} !${priority};`);
+      } else {
+        properties.push(`${property}: ${value};`);
+      }
     }
+    return properties.join(" ");
+  }
 
-    this[lowercaseName] = value;
-    this._importants[lowercaseName] = priority;
-  },
-  _setProperty: function (name, value, priority) {
-    if (value === undefined) {
-      return;
+  set cssText(value) {
+    if (this._readonly) {
+      const msg = "cssText can not be modified.";
+      const name = "NoModificationAllowedError";
+      throw new this._global.DOMException(msg, name);
     }
-    if (value === null || value === '') {
-      this.removeProperty(name);
+    Array.prototype.splice.call(this, 0, this._length);
+    this._values.clear();
+    this._priorities.clear();
+    if (this._parentRule || (this._ownerNode && this._setInProgress)) {
       return;
     }
-
-    var originalText;
-    if (this._onChange) {
-      originalText = this.cssText;
+    this._setInProgress = true;
+    let dummyRule;
+    try {
+      dummyRule = CSSOM.parse(`#bogus{${value}}`).cssRules[0].style;
+    } catch {
+      // Malformed css, just return.
+      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++;
+    for (let i = 0; i < dummyRule.length; i++) {
+      const property = dummyRule[i];
+      this.setProperty(
+        property,
+        dummyRule.getPropertyValue(property),
+        dummyRule.getPropertyPriority(property)
+      );
     }
-    this._values[name] = value;
-    this._importants[name] = priority;
-    if (this._onChange && this.cssText !== originalText && !this._setInProgress) {
+    this._setInProgress = false;
+    if (typeof this._onChange === "function") {
       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 '';
-    }
+  }
 
-    var prevValue = this._values[name];
-    delete this._values[name];
-    delete this._importants[name];
+  get length() {
+    return this._length;
+  }
 
-    var index = Array.prototype.indexOf.call(this, name);
-    if (index < 0) {
-      return prevValue;
+  // 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 length(len) {
+    for (let i = len; i < this._length; i++) {
+      delete this[i];
     }
+    this._length = len;
+  }
 
-    // That's what WebKit and Opera do
-    Array.prototype.splice.call(this, index, 1);
+  // Readonly
+  get parentRule() {
+    return this._parentRule;
+  }
 
-    // That's what Firefox does
-    //this[index] = ""
+  get cssFloat() {
+    return this.getPropertyValue("float");
+  }
 
-    if (this._onChange) {
-      this._onChange(this.cssText);
-    }
-    return prevValue;
-  },
+  set cssFloat(value) {
+    this._setProperty("float", value);
+  }
 
   /**
-   *
-   * @param {String} name
+   * @param {string} property
    */
-  getPropertyPriority: function (name) {
-    return this._importants[name] || '';
-  },
+  getPropertyPriority(property) {
+    return this._priorities.get(property) || "";
+  }
 
-  getPropertyCSSValue: function () {
-    //FIXME
-    return;
-  },
+  /**
+   * @param {string} property
+   */
+  getPropertyValue(property) {
+    if (this._values.has(property)) {
+      return this._values.get(property).toString();
+    }
+    return "";
+  }
 
   /**
-   *   element.style.overflow = "auto"
-   *   element.style.getPropertyShorthand("overflow-x")
-   *   -> "overflow"
+   * @param {...number} args
    */
-  getPropertyShorthand: function () {
-    //FIXME
-    return;
-  },
+  item(...args) {
+    if (!args.length) {
+      const msg = "1 argument required, but only 0 present.";
+      throw new this._global.TypeError(msg);
+    }
+    let [index] = args;
+    index = parseInt(index);
+    if (Number.isNaN(index) || index < 0 || index >= this._length) {
+      return "";
+    }
+    return this[index];
+  }
 
-  isPropertyImplicit: function () {
-    //FIXME
-    return;
-  },
+  /**
+   * @param {string} property
+   */
+  removeProperty(property) {
+    if (this._readonly) {
+      const msg = `Property ${property} can not be modified.`;
+      const name = "NoModificationAllowedError";
+      throw new this._global.DOMException(msg, name);
+    }
+    if (!this._values.has(property)) {
+      return "";
+    }
+    const prevValue = this._values.get(property);
+    this._values.delete(property);
+    this._priorities.delete(property);
+    const index = Array.prototype.indexOf.call(this, property);
+    if (index >= 0) {
+      Array.prototype.splice.call(this, index, 1);
+      if (typeof this._onChange === "function") {
+        this._onChange(this.cssText);
+      }
+    }
+    return prevValue;
+  }
 
   /**
-   *   http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration-item
+   * @param {string} property
+   * @param {string} value
+   * @param {string?} [priority] - "important" or null
    */
-  item: function (index) {
-    index = parseInt(index, 10);
-    if (index < 0 || index >= this._length) {
-      return '';
+  setProperty(property, value, priority = null) {
+    if (this._readonly) {
+      const msg = `Property ${property} can not be modified.`;
+      const name = "NoModificationAllowedError";
+      throw new this._global.DOMException(msg, name);
     }
-    return this[index];
-  },
-};
+    value = prepareValue(value, this._global);
+    if (value === "") {
+      this[property] = "";
+      this.removeProperty(property);
+      return;
+    }
+    const isCustomProperty = property.startsWith("--");
+    if (isCustomProperty) {
+      this._setProperty(property, value);
+      return;
+    }
+    property = property.toLowerCase();
+    if (!allProperties.has(property) && !allExtraProperties.has(property)) {
+      return;
+    }
+    this[property] = value;
+    if (priority) {
+      this._priorities.set(property, priority);
+    } else {
+      this._priorities.delete(property);
+    }
+  }
+}
 
+// Internal methods
 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;
+  _shorthandGetter: {
+    /**
+     * @param {string} property
+     * @param {object} shorthandFor
+     */
+    value(property, shorthandFor) {
+      const parts = [];
+      for (const key of shorthandFor.keys()) {
+        const val = this.getPropertyValue(key);
+        if (hasVarFunc(val)) {
+          return "";
+        }
+        if (val !== "") {
+          parts.push(val);
         }
-        properties.push([name, ': ', value, priority, ';'].join(''));
       }
-      return properties.join(' ');
+      if (parts.length) {
+        return parts.join(" ");
+      }
+      if (this._values.has(property)) {
+        return this.getPropertyValue(property);
+      }
+      return "";
     },
-    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
+    enumerable: false
+  },
+
+  _implicitGetter: {
+    /**
+     * @param {string} property
+     * @param {Array.<string>} positions
+     */
+    value(property, positions = []) {
+      const parts = [];
+      for (const position of positions) {
+        const val = this.getPropertyValue(`${property}-${position}`);
+        if (val === "" || hasVarFunc(val)) {
+          return "";
+        }
+        parts.push(val);
+      }
+      if (!parts.length) {
+        return "";
+      }
+      switch (positions.length) {
+        case 4: {
+          const [top, right, bottom, left] = parts;
+          if (top === right && top === bottom && right === left) {
+            return top;
+          }
+          if (top !== right && top === bottom && right === left) {
+            return `${top} ${right}`;
+          }
+          if (top !== right && top !== bottom && right === left) {
+            return `${top} ${right} ${bottom}`;
+          }
+          return `${top} ${right} ${bottom} ${left}`;
+        }
+        case 2: {
+          const [x, y] = parts;
+          if (x === y) {
+            return x;
+          }
+          return `${x} ${y}`;
+        }
+        default:
+          return "";
+      }
+    },
+    enumerable: false
+  },
+
+  _setProperty: {
+    /**
+     * @param {string} property
+     * @param {string} val
+     * @param {string?} [priority]
+     */
+    value(property, val, priority = null) {
+      if (typeof val !== "string") {
         return;
       }
-      this._setInProgress = true;
-      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)
-        );
+      if (val === "") {
+        this.removeProperty(property);
+        return;
       }
-      this._setInProgress = false;
-      if (this._onChange) {
+      let originalText = "";
+      if (typeof this._onChange === "function") {
+        originalText = this.cssText;
+      }
+      if (this._values.has(property)) {
+        const index = Array.prototype.indexOf.call(this, property);
+        // The property already exists but is not indexed into `this` so add it.
+        if (index < 0) {
+          this[this._length] = property;
+          this._length++;
+        }
+      } else {
+        // New property.
+        this[this._length] = property;
+        this._length++;
+      }
+      this._values.set(property, val);
+      if (priority) {
+        this._priorities.set(property, priority);
+      } else {
+        this._priorities.delete(property);
+      }
+      if (
+        typeof this._onChange === "function" &&
+        this.cssText !== originalText &&
+        !this._setInProgress
+      ) {
         this._onChange(this.cssText);
       }
     },
-    enumerable: true,
-    configurable: true,
+    enumerable: false
   },
-  parentRule: {
-    get: function () {
-      return null;
+
+  _shorthandSetter: {
+    /**
+     * @param {string} property
+     * @param {string} val
+     * @param {object} shorthandFor
+     */
+    value(property, val, shorthandFor) {
+      val = prepareValue(val, this._global);
+      const obj = parseShorthand(val, shorthandFor);
+      if (!obj) {
+        return;
+      }
+      for (const subprop of Object.keys(obj)) {
+        // In case subprop is an implicit property, this will clear *its*
+        // subpropertiesX.
+        const camel = dashedToCamelCase(subprop);
+        this[camel] = obj[subprop];
+        // In case it gets translated into something else (0 -> 0px).
+        obj[subprop] = this[camel];
+        this.removeProperty(subprop);
+        // Don't add in empty properties.
+        if (obj[subprop] !== "") {
+          this._values.set(subprop, obj[subprop]);
+        }
+      }
+      for (const [subprop] of shorthandFor) {
+        if (!Object.hasOwn(obj, subprop)) {
+          this.removeProperty(subprop);
+          this._values.delete(subprop);
+        }
+      }
+      // In case the value is something like 'none' that removes all values,
+      // check that the generated one is not empty, first remove the property,
+      // if it already exists, then call the shorthandGetter, if it's an empty
+      // string, don't set the property.
+      this.removeProperty(property);
+      const calculated = this._shorthandGetter(property, shorthandFor);
+      if (calculated !== "") {
+        this._setProperty(property, calculated);
+      }
+      return obj;
     },
-    enumerable: true,
-    configurable: true,
+    enumerable: false
   },
-  length: {
-    get: function () {
-      return this._length;
-    },
+
+  // Companion to shorthandSetter, but for the individual parts which takes
+  // position value in the middle.
+  _midShorthandSetter: {
     /**
-     * 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];
+     * @param {string} property
+     * @param {string} val
+     * @param {object} shorthandFor
+     * @param {Array.<string>} positions
+     */
+    value(property, val, shorthandFor, positions = []) {
+      val = prepareValue(val, this._global);
+      const obj = this._shorthandSetter(property, val, shorthandFor);
+      if (!obj) {
+        return;
+      }
+      for (const position of positions) {
+        this.removeProperty(`${property}-${position}`);
+        this._values.set(`${property}-${position}`, val);
       }
-      this._length = value;
     },
-    enumerable: true,
-    configurable: true,
+    enumerable: false
   },
-});
 
-require('./properties')(CSSStyleDeclaration.prototype);
+  _implicitSetter: {
+    /**
+     * @param {string} prefix
+     * @param {string} part
+     * @param {string} val
+     * @param {Function} isValid
+     * @param {Function} parser
+     * @param {Array.<string>} positions
+     */
+    value(prefix, part, val, isValid, parser, positions = []) {
+      val = prepareValue(val, this._global);
+      if (typeof val !== "string") {
+        return;
+      }
+      part ||= "";
+      if (part) {
+        part = `-${part}`;
+      }
+      let parts = [];
+      if (val === "") {
+        parts.push(val);
+      } else {
+        const key = parseKeyword(val);
+        if (key) {
+          parts.push(key);
+        } else {
+          parts.push(...splitValue(val));
+        }
+      }
+      if (!parts.length || parts.length > positions.length || !parts.every(isValid)) {
+        return;
+      }
+      parts = parts.map((p) => parser(p));
+      this._setProperty(`${prefix}${part}`, parts.join(" "));
+      switch (positions.length) {
+        case 4:
+          if (parts.length === 1) {
+            parts.push(parts[0], parts[0], parts[0]);
+          } else if (parts.length === 2) {
+            parts.push(parts[0], parts[1]);
+          } else if (parts.length === 3) {
+            parts.push(parts[1]);
+          }
+          break;
+        case 2:
+          if (parts.length === 1) {
+            parts.push(parts[0]);
+          }
+          break;
+        default:
+      }
+      for (let i = 0; i < positions.length; i++) {
+        const property = `${prefix}-${positions[i]}${part}`;
+        this.removeProperty(property);
+        this._values.set(property, parts[i]);
+      }
+    },
+    enumerable: false
+  },
 
-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);
+  // Companion to implicitSetter, but for the individual parts.
+  // This sets the individual value, and checks to see if all sub-parts are
+  // set. If so, it sets the shorthand version and removes the individual parts
+  // from the cssText.
+  _subImplicitSetter: {
+    /**
+     * @param {string} prefix
+     * @param {string} part
+     * @param {string} val
+     * @param {Function} isValid
+     * @param {Function} parser
+     * @param {Array.<string>} positions
+     */
+    value(prefix, part, val, isValid, parser, positions = []) {
+      val = prepareValue(val, this._global);
+      if (typeof val !== "string" || !isValid(val)) {
+        return;
+      }
+      val = parser(val);
+      const property = `${prefix}-${part}`;
+      this._setProperty(property, val);
+      const combinedPriority = this.getPropertyPriority(prefix);
+      const subparts = [];
+      for (const position of positions) {
+        subparts.push(`${prefix}-${position}`);
+      }
+      const parts = subparts.map((subpart) => this._values.get(subpart));
+      const priorities = subparts.map((subpart) => this.getPropertyPriority(subpart));
+      const [priority] = priorities;
+      // Combine into a single property if all values are set and have the same
+      // priority.
+      if (
+        priority === combinedPriority &&
+        parts.every((p) => p) &&
+        priorities.every((p) => p === priority)
+      ) {
+        for (let i = 0; i < subparts.length; i++) {
+          this.removeProperty(subparts[i]);
+          this._values.set(subparts[i], parts[i]);
+        }
+        this._setProperty(prefix, parts.join(" "), priority);
+      } else {
+        this.removeProperty(prefix);
+        for (let i = 0; i < subparts.length; i++) {
+          // The property we're setting won't be important, the rest will either
+          // keep their priority or inherit it from the combined property
+          const subPriority = subparts[i] === property ? "" : priorities[i] || combinedPriority;
+          this._setProperty(subparts[i], parts[i], subPriority);
+        }
+      }
+    },
+    enumerable: false
   }
 });
 
-allExtraProperties.forEach(function (property) {
+// Properties
+Object.defineProperties(CSSStyleDeclaration.prototype, generatedProperties);
+
+// Additional properties
+[...allProperties, ...allExtraProperties].forEach(function (property) {
   if (!implementedProperties.has(property)) {
-    var declaration = getBasicPropertyDescriptor(property);
+    const declaration = getPropertyDescriptor(property);
     Object.defineProperty(CSSStyleDeclaration.prototype, property, declaration);
-    Object.defineProperty(CSSStyleDeclaration.prototype, dashedToCamelCase(property), declaration);
+    const camel = dashedToCamelCase(property);
+    Object.defineProperty(CSSStyleDeclaration.prototype, camel, declaration);
+    if (/^webkit[A-Z]/.test(camel)) {
+      const pascal = camel.replace(/^webkit/, "Webkit");
+      Object.defineProperty(CSSStyleDeclaration.prototype, pascal, declaration);
+    }
   }
 });