cssstyle 4.1.0 → 4.2.0

package/lib/CSSStyleDeclaration.js

@@ -53,7 +53,9 @@ CSSStyleDeclaration.prototype = {
       this.removeProperty(name);
       return;
     }
-    var isCustomProperty = name.indexOf('--') === 0;
+    var isCustomProperty =
+      name.indexOf('--') === 0 ||
+      (typeof value === 'string' && /^var\(--[-\w]+,?.*\)$/.test(value));
     if (isCustomProperty) {
       this._setProperty(name, value, priority);
       return;

package/lib/implementedProperties.js

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

package/lib/parsers.js

@@ -4,8 +4,7 @@
  ********************************************************************/
 'use strict';
 
-const namedColors = require('./named_colors.json');
-const { hslToRgb } = require('./utils/colorSpace');
+const { cssCalc, isColor, resolve } = require('@asamuzakjp/css-color');
 
 exports.TYPES = {
   INTEGER: 1,
@@ -19,22 +18,24 @@ exports.TYPES = {
   KEYWORD: 9,
   NULL_OR_EMPTY_STR: 10,
   CALC: 11,
+  VAR: 12,
 };
 
-// rough regular expressions
-var integerRegEx = /^[-+]?[0-9]+$/;
-var numberRegEx = /^[-+]?[0-9]*\.?[0-9]+$/;
-var lengthRegEx = /^(0|[-+]?[0-9]*\.?[0-9]+(in|cm|em|mm|pt|pc|px|ex|rem|vh|vw|ch))$/;
-var percentRegEx = /^[-+]?[0-9]*\.?[0-9]+%$/;
+// regular expressions
+var DIGIT = '(?:0|[1-9]\\d*)';
+var NUMBER = `[+-]?(?:${DIGIT}(?:\\.\\d*)?|\\.\\d+)(?:e-?${DIGIT})?`;
+var integerRegEx = new RegExp(`^[+-]?${DIGIT}$`);
+var numberRegEx = new RegExp(`^${NUMBER}$`);
+var lengthRegEx = new RegExp(
+  `^${NUMBER}(?:[cm]m|[dls]?v(?:[bhiw]|max|min)|in|p[ctx]|q|r?(?:[cl]h|cap|e[mx]|ic))$`
+);
+var percentRegEx = new RegExp(`^${NUMBER}%$`);
+var angleRegEx = new RegExp(`^${NUMBER}(?:deg|g?rad|turn)$`);
 var urlRegEx = /^url\(\s*([^)]*)\s*\)$/;
 var stringRegEx = /^("[^"]*"|'[^']*')$/;
-var colorRegEx1 = /^#([0-9a-fA-F]{3,4}){1,2}$/;
-var colorRegEx2 = /^rgb\(([^)]*)\)$/;
-var colorRegEx3 = /^rgba\(([^)]*)\)$/;
-var calcRegEx = /^calc\(([^)]*)\)$/;
-var colorRegEx4 =
-  /^hsla?\(\s*(-?\d+|-?\d*.\d+)\s*,\s*(-?\d+|-?\d*.\d+)%\s*,\s*(-?\d+|-?\d*.\d+)%\s*(,\s*(-?\d+|-?\d*.\d+)\s*)?\)/;
-var angleRegEx = /^([-+]?[0-9]*\.?[0-9]+)(deg|grad|rad)$/;
+var varRegEx = /^var\(|(?<=[*/\s(])var\(/;
+var calcRegEx =
+  /^(?:a?(?:cos|sin|tan)|abs|atan2|calc|clamp|exp|hypot|log|max|min|mod|pow|rem|round|sign|sqrt)\(/;
 
 // This will return one of the above types based on the passed in string
 exports.valueType = function valueType(val) {
@@ -44,11 +45,9 @@ exports.valueType = function valueType(val) {
   if (typeof val === 'number') {
     val = val.toString();
   }
-
   if (typeof val !== 'string') {
     return undefined;
   }
-
   if (integerRegEx.test(val)) {
     return exports.TYPES.INTEGER;
   }
@@ -64,6 +63,9 @@ exports.valueType = function valueType(val) {
   if (urlRegEx.test(val)) {
     return exports.TYPES.URL;
   }
+  if (varRegEx.test(val)) {
+    return exports.TYPES.VAR;
+  }
   if (calcRegEx.test(val)) {
     return exports.TYPES.CALC;
   }
@@ -73,54 +75,11 @@ exports.valueType = function valueType(val) {
   if (angleRegEx.test(val)) {
     return exports.TYPES.ANGLE;
   }
-  if (colorRegEx1.test(val)) {
+  if (isColor(val)) {
     return exports.TYPES.COLOR;
   }
 
-  var res = colorRegEx2.exec(val);
-  var parts;
-  if (res !== null) {
-    parts = res[1].split(/\s*,\s*/);
-    if (parts.length !== 3) {
-      return undefined;
-    }
-    if (
-      parts.every(percentRegEx.test.bind(percentRegEx)) ||
-      parts.every(integerRegEx.test.bind(integerRegEx))
-    ) {
-      return exports.TYPES.COLOR;
-    }
-    return undefined;
-  }
-  res = colorRegEx3.exec(val);
-  if (res !== null) {
-    parts = res[1].split(/\s*,\s*/);
-    if (parts.length !== 4) {
-      return undefined;
-    }
-    if (
-      parts.slice(0, 3).every(percentRegEx.test.bind(percentRegEx)) ||
-      parts.slice(0, 3).every(integerRegEx.test.bind(integerRegEx))
-    ) {
-      if (numberRegEx.test(parts[3])) {
-        return exports.TYPES.COLOR;
-      }
-    }
-    return undefined;
-  }
-
-  if (colorRegEx4.test(val)) {
-    return exports.TYPES.COLOR;
-  }
-
-  // could still be a color, one of the standard keyword colors
-  val = val.toLowerCase();
-
-  if (namedColors.includes(val)) {
-    return exports.TYPES.COLOR;
-  }
-
-  switch (val) {
+  switch (val.toLowerCase()) {
     // the following are deprecated in CSS3
     case 'activeborder':
     case 'activecaption':
@@ -209,9 +168,14 @@ exports.parsePercent = function parsePercent(val) {
 // either a length or a percent
 exports.parseMeasurement = function parseMeasurement(val) {
   var type = exports.valueType(val);
-  if (type === exports.TYPES.CALC) {
+  if (type === exports.TYPES.VAR) {
     return val;
   }
+  if (type === exports.TYPES.CALC) {
+    return cssCalc(val, {
+      format: 'specifiedValue',
+    });
+  }
 
   var length = exports.parseLength(val);
   if (length !== undefined) {
@@ -291,116 +255,14 @@ exports.parseColor = function parseColor(val) {
   if (type === exports.TYPES.NULL_OR_EMPTY_STR) {
     return val;
   }
-  var red,
-    green,
-    blue,
-    hue,
-    saturation,
-    lightness,
-    alpha = 1;
-  var parts;
-  var res = colorRegEx1.exec(val);
-  // is it #aaa, #ababab, #aaaa, #abababaa
-  if (res) {
-    var defaultHex = val.substr(1);
-    var hex = val.substr(1);
-    if (hex.length === 3 || hex.length === 4) {
-      hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
-
-      if (defaultHex.length === 4) {
-        hex = hex + defaultHex[3] + defaultHex[3];
-      }
-    }
-    red = parseInt(hex.substr(0, 2), 16);
-    green = parseInt(hex.substr(2, 2), 16);
-    blue = parseInt(hex.substr(4, 2), 16);
-    if (hex.length === 8) {
-      var hexAlpha = hex.substr(6, 2);
-      var hexAlphaToRgbaAlpha = Number((parseInt(hexAlpha, 16) / 255).toFixed(3));
-
-      return 'rgba(' + red + ', ' + green + ', ' + blue + ', ' + hexAlphaToRgbaAlpha + ')';
-    }
-    return 'rgb(' + red + ', ' + green + ', ' + blue + ')';
-  }
-
-  res = colorRegEx2.exec(val);
-  if (res) {
-    parts = res[1].split(/\s*,\s*/);
-    if (parts.length !== 3) {
-      return undefined;
-    }
-    if (parts.every(percentRegEx.test.bind(percentRegEx))) {
-      red = Math.floor((parseFloat(parts[0].slice(0, -1)) * 255) / 100);
-      green = Math.floor((parseFloat(parts[1].slice(0, -1)) * 255) / 100);
-      blue = Math.floor((parseFloat(parts[2].slice(0, -1)) * 255) / 100);
-    } else if (parts.every(integerRegEx.test.bind(integerRegEx))) {
-      red = parseInt(parts[0], 10);
-      green = parseInt(parts[1], 10);
-      blue = parseInt(parts[2], 10);
-    } else {
-      return undefined;
-    }
-    red = Math.min(255, Math.max(0, red));
-    green = Math.min(255, Math.max(0, green));
-    blue = Math.min(255, Math.max(0, blue));
-    return 'rgb(' + red + ', ' + green + ', ' + blue + ')';
-  }
-
-  res = colorRegEx3.exec(val);
-  if (res) {
-    parts = res[1].split(/\s*,\s*/);
-    if (parts.length !== 4) {
-      return undefined;
-    }
-    if (parts.slice(0, 3).every(percentRegEx.test.bind(percentRegEx))) {
-      red = Math.floor((parseFloat(parts[0].slice(0, -1)) * 255) / 100);
-      green = Math.floor((parseFloat(parts[1].slice(0, -1)) * 255) / 100);
-      blue = Math.floor((parseFloat(parts[2].slice(0, -1)) * 255) / 100);
-      alpha = parseFloat(parts[3]);
-    } else if (parts.slice(0, 3).every(integerRegEx.test.bind(integerRegEx))) {
-      red = parseInt(parts[0], 10);
-      green = parseInt(parts[1], 10);
-      blue = parseInt(parts[2], 10);
-      alpha = parseFloat(parts[3]);
-    } else {
-      return undefined;
-    }
-    if (isNaN(alpha)) {
-      alpha = 1;
-    }
-    red = Math.min(255, Math.max(0, red));
-    green = Math.min(255, Math.max(0, green));
-    blue = Math.min(255, Math.max(0, blue));
-    alpha = Math.min(1, Math.max(0, alpha));
-    if (alpha === 1) {
-      return 'rgb(' + red + ', ' + green + ', ' + blue + ')';
-    }
-    return 'rgba(' + red + ', ' + green + ', ' + blue + ', ' + alpha + ')';
+  if (/^[a-z]+$/i.test(val) && type === exports.TYPES.COLOR) {
+    return val;
   }
-
-  res = colorRegEx4.exec(val);
+  var res = resolve(val, {
+    format: 'specifiedValue',
+  });
   if (res) {
-    const [, _hue, _saturation, _lightness, _alphaString = ''] = res;
-    const _alpha = parseFloat(_alphaString.replace(',', '').trim());
-    if (!_hue || !_saturation || !_lightness) {
-      return undefined;
-    }
-    hue = parseFloat(_hue);
-    saturation = parseInt(_saturation, 10);
-    lightness = parseInt(_lightness, 10);
-    if (_alpha && numberRegEx.test(_alpha)) {
-      alpha = parseFloat(_alpha);
-    }
-
-    const [r, g, b] = hslToRgb(hue, saturation / 100, lightness / 100);
-    if (!_alphaString || alpha === 1) {
-      return 'rgb(' + r + ', ' + g + ', ' + b + ')';
-    }
-    return 'rgba(' + r + ', ' + g + ', ' + b + ', ' + alpha + ')';
-  }
-
-  if (type === exports.TYPES.COLOR) {
-    return val;
+    return res;
   }
   return undefined;
 };

package/lib/properties.js

@@ -1,6 +1,6 @@
 'use strict';
 
-// autogenerated - 9/7/2024
+// autogenerated - 1/9/2025
 
 /*
  *

package/package.json

@@ -6,7 +6,7 @@
     "CSSStyleDeclaration",
     "StyleSheet"
   ],
-  "version": "4.1.0",
+  "version": "4.2.0",
   "homepage": "https://github.com/jsdom/cssstyle",
   "maintainers": [
     {
@@ -37,6 +37,7 @@
   ],
   "main": "./lib/CSSStyleDeclaration.js",
   "dependencies": {
+    "@asamuzakjp/css-color": "^2.8.2",
     "rrweb-cssom": "^0.7.1"
   },
   "devDependencies": {

package/lib/utils/colorSpace.js

@@ -1,19 +0,0 @@
-'use strict';
-
-const MAX_HUE = 360;
-const COLOR_NB = 12;
-const MAX_RGB_VALUE = 255;
-
-// https://www.w3.org/TR/css-color-4/#hsl-to-rgb
-exports.hslToRgb = (hue, sat, light) => {
-  hue = hue % MAX_HUE;
-  if (hue < 0) {
-    hue += MAX_HUE;
-  }
-  function f(n) {
-    const k = (n + hue / (MAX_HUE / COLOR_NB)) % COLOR_NB;
-    const a = sat * Math.min(light, 1 - light);
-    return light - a * Math.max(-1, Math.min(k - 3, 9 - k, 1));
-  }
-  return [f(0), f(8), f(4)].map((value) => Math.round(value * MAX_RGB_VALUE));
-};