cssstyle - npm Package Compare versions

Comparing version 4.1.0 to 4.2.0

lib/CSSStyleDeclaration.js

@@ -56,3 +56,5 @@ /*********************************************************************
     }
-    var isCustomProperty = name.indexOf('--') === 0;
+    var isCustomProperty =
+      name.indexOf('--') === 0 ||
+      (typeof value === 'string' && /^var\(--[-\w]+,?.*\)$/.test(value));
     if (isCustomProperty) {
@@ -59,0 +61,0 @@ this._setProperty(name, value, priority);

lib/implementedProperties.js

 
 'use strict';
-// autogenerated - 2024-09-07
+// autogenerated - 2025-01-09
 // https://www.w3.org/Style/CSS/all-properties.en.html
@@ -5,0 +5,0 @@

lib/parsers.js

@@ -7,4 +7,3 @@ /*********************************************************************
 
-const namedColors = require('./named_colors.json');
-const { hslToRgb } = require('./utils/colorSpace');
+const { cssCalc, isColor, resolve } = require('@asamuzakjp/css-color');
 
@@ -23,18 +22,20 @@ exports.TYPES = {
   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)\(/;
 
@@ -49,7 +50,5 @@ // This will return one of the above types based on the passed in string
   }
-
   if (typeof val !== 'string') {
     return undefined;
   }
-
   if (integerRegEx.test(val)) {
@@ -70,2 +69,5 @@ return exports.TYPES.INTEGER;
   }
+  if (varRegEx.test(val)) {
+    return exports.TYPES.VAR;
+  }
   if (calcRegEx.test(val)) {
@@ -80,50 +82,7 @@ return exports.TYPES.CALC;
   }
-  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
@@ -217,5 +176,10 @@ case 'activeborder':
   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',
+    });
+  }
 
@@ -300,113 +264,11 @@ var length = exports.parseLength(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 + ')';
+  if (/^[a-z]+$/i.test(val) && type === exports.TYPES.COLOR) {
+    return val;
   }
-
-  res = colorRegEx2.exec(val);
+  var res = resolve(val, {
+    format: 'specifiedValue',
+  });
   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 + ')';
+    return res;
   }
-
-  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 + ')';
-  }
-
-  res = colorRegEx4.exec(val);
-  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 undefined;
@@ -413,0 +275,0 @@ };

lib/properties.js

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

package.json

@@ -9,3 +9,3 @@ {
   ],
-  "version": "4.1.0",
+  "version": "4.2.0",
   "homepage": "https://github.com/jsdom/cssstyle",
@@ -41,2 +41,3 @@ "maintainers": [
   "dependencies": {
+    "@asamuzakjp/css-color": "^2.8.2",
     "rrweb-cssom": "^0.7.1"
@@ -43,0 +44,0 @@ },

No alert changes

Worsened metrics

Total package byte prevSize

147554

decreased by-3.11%

Dependency count

2

increased by100%

Number of package files

92

decreased by-1.08%

Lines of code

5079

decreased by-2.68%

Dependency changes

• + Added@asamuzakjp/css-color@^2.8.2

• + Added@asamuzakjp/css-color@2.8.3(transitive)

• + Added@csstools/color-helpers@5.0.1(transitive)

• + Added@csstools/css-calc@2.1.1(transitive)

• + Added@csstools/css-color-parser@3.0.7(transitive)

• + Added@csstools/css-parser-algorithms@3.0.4(transitive)

• + Added@csstools/css-tokenizer@3.0.3(transitive)

• + Addedlru-cache@10.4.3(transitive)