Merge branch 'main' into feat/migrate-to-webidl

.github/workflows/build.yml

@@ -0,0 +1,26 @@
+name: Build
+on:
+  pull_request:
+    branches:
+    - main
+  push:
+    branches:
+    - main
+jobs:
+  build:
+    name: Lint and tests
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        node-version:
+          - 18
+          - 20
+          - latest
+    steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+      with:
+        node-version: ${{ matrix.node-version }}
+    - run: npm ci
+    - run: npm run test-ci

README.md

@@ -2,13 +2,13 @@
 
 A Node JS implementation of the CSS Object Model [CSSStyleDeclaration interface](https://www.w3.org/TR/cssom-1/#the-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)
+[![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=main)](https://travis-ci.org/jsdom/cssstyle) [![codecov](https://codecov.io/gh/jsdom/cssstyle/branch/main/graph/badge.svg)](https://codecov.io/gh/jsdom/cssstyle)
 
 ## 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.
 
-It was originally created by Chad Walker, it is now maintained by Jon Sakas and other open source contributors.
+It was originally created by Chad Walker, it is now maintained by the jsdom community.
 
 Bug reports and pull requests are welcome.
 

lib/CSSStyleDeclaration-impl.js

@@ -3,11 +3,12 @@
  * https://github.com/NV/CSSOM
  ********************************************************************/
 'use strict';
-const CSSOM = require('cssom');
-const allProperties = require('./allProperties');
-const allExtraProperties = require('./allExtraProperties');
-const implementedProperties = require('./implementedProperties');
-const idlUtils = require('./utils.js');
+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');
 
 class CSSStyleDeclarationImpl {
   /**
@@ -24,7 +25,8 @@ class CSSStyleDeclarationImpl {
     this._values = Object.create(null);
     this._importants = Object.create(null);
     this._list = [];
-    this._onChange = onChangeCallback || (() => {});
+    this._onChange = onChangeCallback;
+    this._setInProgress = false;
     this.parentRule = null;
   }
 
@@ -57,6 +59,7 @@ class CSSStyleDeclarationImpl {
       // malformed css, just return
       return;
     }
+    this._setInProgress = true;
     const rule_length = dummyRule.length;
     for (let i = 0; i < rule_length; ++i) {
       const name = dummyRule[i];
@@ -66,17 +69,23 @@ class CSSStyleDeclarationImpl {
         dummyRule.getPropertyPriority(name)
       );
     }
-    this._onChange(this.cssText);
+    this._setInProgress = false;
+    this._onChange?.(this.cssText);
   }
 
   /**
    * @see https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-length
    */
-  get length() {
+  get length () {
     return this._list.length;
   }
 
-  set length(value) {
+  /**
+   * 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 (value) {
     this._list.length = value;
   }
 
@@ -87,8 +96,11 @@ class CSSStyleDeclarationImpl {
    * @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(name) {
-    return this._values[name] || '';
+  getPropertyValue (name) {
+    if (!this._values.hasOwnProperty(name)) {
+      return '';
+    }
+    return this._values[name].toString();
   }
 
   /**
@@ -98,7 +110,7 @@ class CSSStyleDeclarationImpl {
    * @param {string} [priority=""] "important" or ""
    * @see https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-setproperty
    */
-  setProperty(name, value, priority = '') {
+  setProperty (name, value, priority = '') {
     if (value === '') {
       this.removeProperty(name);
       return;
@@ -127,7 +139,7 @@ class CSSStyleDeclarationImpl {
    * @param {string | null} value
    * @param {string} [priority=""]
    */
-  _setProperty(name, value, priority = '') {
+  _setProperty (name, value, priority = '') {
     // FIXME: A good chunk of the implemented properties call this method
     // with `value = undefined`, expecting it to do nothing:
     if (value === undefined) {
@@ -137,6 +149,12 @@ class CSSStyleDeclarationImpl {
       this.removeProperty(name);
       return;
     }
+
+    let originalText;
+    if (this._onChange) {
+      originalText = this.cssText;
+    }
+
     if (this._values[name]) {
       // Property already exist. Overwrite it.
       if (!this._list.includes(name)) {
@@ -148,7 +166,9 @@ class CSSStyleDeclarationImpl {
     }
     this._values[name] = value;
     this._importants[name] = priority;
-    this._onChange(this.cssText);
+    if (this._onChange && this.cssText !== originalText && !this._setInProgress) {
+      this._onChange(this.cssText);
+    }
   }
 
   /**
@@ -158,7 +178,7 @@ class CSSStyleDeclarationImpl {
    * @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(name) {
+  removeProperty (name) {
     if (!idlUtils.hasOwn(this._values, name)) {
       return '';
     }
@@ -178,7 +198,7 @@ class CSSStyleDeclarationImpl {
     // That's what Firefox does
     //this._list[index] = ''
 
-    this._onChange(this.cssText);
+    this._onChange?.(this.cssText);
     return prevValue;
   }
 
@@ -187,14 +207,14 @@ class CSSStyleDeclarationImpl {
    * @param {String} name
    * @see https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-getpropertypriority
    */
-  getPropertyPriority(name) {
+  getPropertyPriority (name) {
     return this._importants[name] || '';
   }
 
   /**
    * @see https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-item
    */
-  item(index) {
+  item (index) {
     const { _list } = this;
     if (index < 0 || index >= _list.length) {
       return '';