cssstyle 4.2.1 → 4.3.1

package/README.md

@@ -1,14 +1,10 @@
 # CSSStyleDeclaration
 
-A Node JS implementation of the CSS Object Model [CSSStyleDeclaration interface](https://www.w3.org/TR/cssom-1/#the-cssstyledeclaration-interface).
+A Node.js implementation of the CSS Object Model [`CSSStyleDeclaration` class](https://drafts.csswg.org/cssom/#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=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
 
----
-
-#### 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 modern specifications. 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.
 

package/lib/implementedProperties.js

@@ -1,6 +1,6 @@
 
 'use strict';
-// autogenerated - 2025-01-09
+// autogenerated - 2025-04-20
 // https://www.w3.org/Style/CSS/all-properties.en.html
 
 module.exports = new Set([

package/lib/parsers.js

@@ -4,7 +4,8 @@
  ********************************************************************/
 'use strict';
 
-const { cssCalc, isColor, resolve } = require('@asamuzakjp/css-color');
+const { resolve: resolveColor, utils } = require('@asamuzakjp/css-color');
+const { cssCalc, isColor, isGradient, splitValue } = utils;
 
 exports.TYPES = {
   INTEGER: 1,
@@ -19,6 +20,7 @@ exports.TYPES = {
   NULL_OR_EMPTY_STR: 10,
   CALC: 11,
   VAR: 12,
+  GRADIENT: 13,
 };
 
 // regular expressions
@@ -31,7 +33,7 @@ var lengthRegEx = new RegExp(
 );
 var percentRegEx = new RegExp(`^${NUMBER}%$`);
 var angleRegEx = new RegExp(`^${NUMBER}(?:deg|g?rad|turn)$`);
-var urlRegEx = /^url\(\s*([^)]*)\s*\)$/;
+var urlRegEx = /^url\(\s*((?:[^)]|\\\))*)\s*\)$/;
 var stringRegEx = /^("[^"]*"|'[^']*')$/;
 var varRegEx = /^var\(|(?<=[*/\s(])var\(/;
 var calcRegEx =
@@ -78,6 +80,9 @@ exports.valueType = function valueType(val) {
   if (isColor(val)) {
     return exports.TYPES.COLOR;
   }
+  if (isGradient(val)) {
+    return exports.TYPES.GRADIENT;
+  }
 
   switch (val.toLowerCase()) {
     // the following are deprecated in CSS3
@@ -184,6 +189,16 @@ exports.parseMeasurement = function parseMeasurement(val) {
   return exports.parsePercent(val);
 };
 
+exports.parseInheritingMeasurement = function parseInheritingMeasurement(v) {
+  if (String(v).toLowerCase() === 'auto') {
+    return 'auto';
+  }
+  if (String(v).toLowerCase() === 'inherit') {
+    return 'inherit';
+  }
+  return exports.parseMeasurement(v);
+};
+
 exports.parseUrl = function parseUrl(val) {
   var type = exports.valueType(val);
   if (type === exports.TYPES.NULL_OR_EMPTY_STR) {
@@ -203,24 +218,45 @@ exports.parseUrl = function parseUrl(val) {
     str = str.substr(1, str.length - 2);
   }
 
+  var urlstr = '';
+  var escaped = false;
   var i;
   for (i = 0; i < str.length; i++) {
     switch (str[i]) {
+      case '\\':
+        if (escaped) {
+          urlstr += '\\\\';
+          escaped = false;
+        } else {
+          escaped = true;
+        }
+        break;
       case '(':
       case ')':
       case ' ':
       case '\t':
       case '\n':
       case "'":
+        if (!escaped) {
+          return undefined;
+        }
+        urlstr += str[i];
+        escaped = false;
+        break;
       case '"':
-        return undefined;
-      case '\\':
-        i++;
+        if (!escaped) {
+          return undefined;
+        }
+        urlstr += '\\"';
+        escaped = false;
         break;
+      default:
+        urlstr += str[i];
+        escaped = false;
     }
   }
 
-  return 'url(' + str + ')';
+  return 'url("' + urlstr + '")';
 };
 
 exports.parseString = function parseString(val) {
@@ -258,7 +294,7 @@ exports.parseColor = function parseColor(val) {
   if (/^[a-z]+$/i.test(val) && type === exports.TYPES.COLOR) {
     return val;
   }
-  var res = resolve(val, {
+  var res = resolveColor(val, {
     format: 'specifiedValue',
   });
   if (res) {
@@ -310,6 +346,40 @@ exports.parseKeyword = function parseKeyword(val, valid_keywords) {
   return undefined;
 };
 
+exports.parseImage = function parseImage(val) {
+  if (/^(?:none|inherit)$/i.test(val)) {
+    return val;
+  }
+  var type = exports.valueType(val);
+  if (type === exports.TYPES.NULL_OR_EMPTY_STR || type === exports.TYPES.VAR) {
+    return val;
+  }
+  var values = splitValue(val, ',');
+  var isImage = !!values.length;
+  var i;
+  for (i = 0; i < values.length; i++) {
+    var image = values[i];
+    var t = exports.valueType(image);
+    if (t === exports.TYPES.NULL_OR_EMPTY_STR) {
+      return image;
+    }
+    if (t === exports.TYPES.GRADIENT || /^(?:none|inherit)$/i.test(image)) {
+      continue;
+    }
+    var imageUrl = exports.parseUrl(image);
+    if (exports.valueType(imageUrl) === exports.TYPES.URL) {
+      values[i] = imageUrl;
+    } else {
+      isImage = false;
+      break;
+    }
+  }
+  if (isImage) {
+    return values.join(', ');
+  }
+  return undefined;
+};
+
 // utility to translate from border-width to borderWidth
 var dashedToCamelCase = function (dashed) {
   var i;

package/lib/properties/backgroundColor.js

@@ -7,10 +7,7 @@ var parse = function parse(v) {
   if (parsed !== undefined) {
     return parsed;
   }
-  if (
-    parsers.valueType(v) === parsers.TYPES.KEYWORD &&
-    (v.toLowerCase() === 'transparent' || v.toLowerCase() === 'inherit')
-  ) {
+  if (parsers.valueType(v) === parsers.TYPES.KEYWORD && v.toLowerCase() === 'inherit') {
     return v;
   }
   return undefined;

package/lib/properties/backgroundImage.js

@@ -3,16 +3,10 @@
 var parsers = require('../parsers');
 
 var parse = function parse(v) {
-  var parsed = parsers.parseUrl(v);
+  var parsed = parsers.parseImage(v);
   if (parsed !== undefined) {
     return parsed;
   }
-  if (
-    parsers.valueType(v) === parsers.TYPES.KEYWORD &&
-    (v.toLowerCase() === 'none' || v.toLowerCase() === 'inherit')
-  ) {
-    return v;
-  }
   return undefined;
 };
 

package/lib/properties/borderColor.js

@@ -3,23 +3,22 @@
 var parsers = require('../parsers');
 var implicitSetter = require('../parsers').implicitSetter;
 
-module.exports.isValid = function parse(v) {
-  if (typeof v !== 'string') {
-    return false;
-  }
-  return (
-    v === '' || v.toLowerCase() === 'transparent' || parsers.valueType(v) === parsers.TYPES.COLOR
-  );
-};
-var isValid = module.exports.isValid;
-
 var parser = function (v) {
-  if (isValid(v)) {
-    return v.toLowerCase();
+  var parsed = parsers.parseColor(v);
+  if (parsed !== undefined) {
+    return parsed;
+  }
+  if (parsers.valueType(v) === parsers.TYPES.KEYWORD && v.toLowerCase() === 'inherit') {
+    return v;
   }
   return undefined;
 };
 
+module.exports.isValid = function parse(v) {
+  return parser(v) !== undefined;
+};
+var isValid = module.exports.isValid;
+
 module.exports.definition = {
   set: implicitSetter('border', 'color', isValid, parser),
   get: function () {

package/lib/properties/bottom.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var parseMeasurement = require('../parsers').parseMeasurement;
+var parseMeasurement = require('../parsers').parseInheritingMeasurement;
 
 module.exports.definition = {
   set: function (v) {

package/lib/properties/left.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var parseMeasurement = require('../parsers').parseMeasurement;
+var parseMeasurement = require('../parsers').parseInheritingMeasurement;
 
 module.exports.definition = {
   set: function (v) {

package/lib/properties/right.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var parseMeasurement = require('../parsers').parseMeasurement;
+var parseMeasurement = require('../parsers').parseInheritingMeasurement;
 
 module.exports.definition = {
   set: function (v) {

package/lib/properties/top.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var parseMeasurement = require('../parsers').parseMeasurement;
+var parseMeasurement = require('../parsers').parseInheritingMeasurement;
 
 module.exports.definition = {
   set: function (v) {

package/lib/properties.js

@@ -1,6 +1,6 @@
 'use strict';
 
-// autogenerated - 1/9/2025
+// autogenerated - 4/20/2025
 
 /*
  *
@@ -75,7 +75,7 @@ var backgroundColor_local_var_parse = function parse(v) {
   if (parsed !== undefined) {
     return parsed;
   }
-  if (external_dependency_parsers_0.valueType(v) === external_dependency_parsers_0.TYPES.KEYWORD && (v.toLowerCase() === 'transparent' || v.toLowerCase() === 'inherit')) {
+  if (external_dependency_parsers_0.valueType(v) === external_dependency_parsers_0.TYPES.KEYWORD && v.toLowerCase() === 'inherit') {
     return v;
   }
   return undefined;
@@ -99,13 +99,10 @@ backgroundColor_export_definition = {
 };
 var backgroundImage_export_isValid, backgroundImage_export_definition;
 var backgroundImage_local_var_parse = function parse(v) {
-  var parsed = external_dependency_parsers_0.parseUrl(v);
+  var parsed = external_dependency_parsers_0.parseImage(v);
   if (parsed !== undefined) {
     return parsed;
   }
-  if (external_dependency_parsers_0.valueType(v) === external_dependency_parsers_0.TYPES.KEYWORD && (v.toLowerCase() === 'none' || v.toLowerCase() === 'inherit')) {
-    return v;
-  }
   return undefined;
 };
 backgroundImage_export_isValid = function isValid(v) {
@@ -297,19 +294,20 @@ borderStyle_export_definition = {
   configurable: true
 };
 var borderColor_export_isValid, borderColor_export_definition;
-borderColor_export_isValid = function parse(v) {
-  if (typeof v !== 'string') {
-    return false;
-  }
-  return v === '' || v.toLowerCase() === 'transparent' || external_dependency_parsers_0.valueType(v) === external_dependency_parsers_0.TYPES.COLOR;
-};
-var borderColor_local_var_isValid = borderColor_export_isValid;
 var borderColor_local_var_parser = function (v) {
-  if (borderColor_local_var_isValid(v)) {
-    return v.toLowerCase();
+  var parsed = external_dependency_parsers_0.parseColor(v);
+  if (parsed !== undefined) {
+    return parsed;
+  }
+  if (external_dependency_parsers_0.valueType(v) === external_dependency_parsers_0.TYPES.KEYWORD && v.toLowerCase() === 'inherit') {
+    return v;
   }
   return undefined;
 };
+borderColor_export_isValid = function parse(v) {
+  return borderColor_local_var_parser(v) !== undefined;
+};
+var borderColor_local_var_isValid = borderColor_export_isValid;
 borderColor_export_definition = {
   set: external_dependency_parsers_0.implicitSetter('border', 'color', borderColor_local_var_isValid, borderColor_local_var_parser),
   get: function () {
@@ -678,7 +676,7 @@ borderTop_export_definition = {
 var bottom_export_definition;
 bottom_export_definition = {
   set: function (v) {
-    this._setProperty('bottom', external_dependency_parsers_0.parseMeasurement(v));
+    this._setProperty('bottom', external_dependency_parsers_0.parseInheritingMeasurement(v));
   },
   get: function () {
     return this.getPropertyValue('bottom');
@@ -1054,7 +1052,7 @@ height_export_definition = {
 var left_export_definition;
 left_export_definition = {
   set: function (v) {
-    this._setProperty('left', external_dependency_parsers_0.parseMeasurement(v));
+    this._setProperty('left', external_dependency_parsers_0.parseInheritingMeasurement(v));
   },
   get: function () {
     return this.getPropertyValue('left');
@@ -1335,7 +1333,7 @@ paddingTop_export_definition = {
 var right_export_definition;
 right_export_definition = {
   set: function (v) {
-    this._setProperty('right', external_dependency_parsers_0.parseMeasurement(v));
+    this._setProperty('right', external_dependency_parsers_0.parseInheritingMeasurement(v));
   },
   get: function () {
     return this.getPropertyValue('right');
@@ -1390,7 +1388,7 @@ textUnderlineColor_export_definition = {
 var top_export_definition;
 top_export_definition = {
   set: function (v) {
-    this._setProperty('top', external_dependency_parsers_0.parseMeasurement(v));
+    this._setProperty('top', external_dependency_parsers_0.parseInheritingMeasurement(v));
   },
   get: function () {
     return this.getPropertyValue('top');

package/package.json

@@ -6,7 +6,7 @@
     "CSSStyleDeclaration",
     "StyleSheet"
   ],
-  "version": "4.2.1",
+  "version": "4.3.1",
   "homepage": "https://github.com/jsdom/cssstyle",
   "maintainers": [
     {
@@ -37,20 +37,20 @@
   ],
   "main": "./lib/CSSStyleDeclaration.js",
   "dependencies": {
-    "@asamuzakjp/css-color": "^2.8.2",
+    "@asamuzakjp/css-color": "^3.1.2",
     "rrweb-cssom": "^0.8.0"
   },
   "devDependencies": {
-    "@babel/generator": "^7.26.3",
-    "@babel/parser": "^7.26.3",
-    "@babel/traverse": "^7.26.3",
-    "@babel/types": "^7.26.3",
-    "eslint": "^9.17.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-prettier": "^5.2.1",
-    "globals": "^15.14.0",
+    "@babel/generator": "^7.26.9",
+    "@babel/parser": "^7.26.9",
+    "@babel/traverse": "^7.26.9",
+    "@babel/types": "^7.26.9",
+    "eslint": "^9.22.0",
+    "eslint-config-prettier": "^10.1.1",
+    "eslint-plugin-prettier": "^5.2.3",
+    "globals": "^16.0.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^3.4.2",
+    "prettier": "^3.5.3",
     "resolve": "^1.22.10"
   },
   "scripts": {
@@ -62,8 +62,7 @@
     "lint:fix": "eslint --fix --max-warnings 0",
     "prepublishOnly": "npm run lint && npm run test",
     "test": "npm run generate && node --test",
-    "test-ci": "npm run lint && npm run test",
-    "update-authors": "git log --format=\"%aN <%aE>\" | sort -f | uniq > AUTHORS"
+    "test-ci": "npm run lint && npm run test"
   },
   "license": "MIT",
   "engines": {