cssstyle 4.0.1 → 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/allProperties.js

@@ -1,11 +1,6 @@
 'use strict';
-
-// autogenerated - 1/22/2023
-
-/*
- *
- * https://www.w3.org/Style/CSS/all-properties.en.html
- */
+// autogenerated - 2024-09-07
+// https://www.w3.org/Style/CSS/all-properties.en.html
 
 module.exports = new Set([
   '-webkit-line-clamp',
@@ -15,10 +10,11 @@ module.exports = new Set([
   'align-self',
   'alignment-baseline',
   'all',
+  'anchor-name',
+  'anchor-scope',
   'animation',
+  'animation-composition',
   'animation-delay',
-  'animation-delay-end',
-  'animation-delay-start',
   'animation-direction',
   'animation-duration',
   'animation-fill-mode',
@@ -26,6 +22,9 @@ module.exports = new Set([
   'animation-name',
   'animation-play-state',
   'animation-range',
+  'animation-range-end',
+  'animation-range-start',
+  'animation-timeline',
   'animation-timing-function',
   'appearance',
   'aspect-ratio',
@@ -122,7 +121,6 @@ module.exports = new Set([
   'caret',
   'caret-color',
   'caret-shape',
-  'chains',
   'clear',
   'clip',
   'clip-path',
@@ -176,7 +174,6 @@ module.exports = new Set([
   'float',
   'flood-color',
   'flood-opacity',
-  'flow',
   'flow-from',
   'flow-into',
   'font',
@@ -191,6 +188,7 @@ module.exports = new Set([
   'font-stretch',
   'font-style',
   'font-synthesis',
+  'font-synthesis-position',
   'font-synthesis-small-caps',
   'font-synthesis-style',
   'font-synthesis-weight',
@@ -204,6 +202,7 @@ module.exports = new Set([
   'font-variant-position',
   'font-variation-settings',
   'font-weight',
+  'font-width',
   'footnote-display',
   'footnote-policy',
   'forced-color-adjust',
@@ -241,6 +240,7 @@ module.exports = new Set([
   'inline-size',
   'inline-sizing',
   'inset',
+  'inset-area',
   'inset-block',
   'inset-block-end',
   'inset-block-start',
@@ -251,12 +251,12 @@ module.exports = new Set([
   'justify-content',
   'justify-items',
   'justify-self',
-  'leading-trim',
   'left',
   'letter-spacing',
   'lighting-color',
   'line-break',
   'line-clamp',
+  'line-fit-edge',
   'line-grid',
   'line-height',
   'line-padding',
@@ -371,6 +371,10 @@ module.exports = new Set([
   'place-self',
   'play-during',
   'position',
+  'position-anchor',
+  'position-try',
+  'position-try-options',
+  'position-try-order',
   'print-color-adjust',
   'quotes',
   'region-fragment',
@@ -440,6 +444,10 @@ module.exports = new Set([
   'text-align',
   'text-align-all',
   'text-align-last',
+  'text-autospace',
+  'text-box',
+  'text-box-edge',
+  'text-box-trim',
   'text-combine-upright',
   'text-decoration',
   'text-decoration-color',
@@ -452,7 +460,6 @@ module.exports = new Set([
   'text-decoration-skip-spaces',
   'text-decoration-style',
   'text-decoration-thickness',
-  'text-edge',
   'text-emphasis',
   'text-emphasis-color',
   'text-emphasis-position',
@@ -464,13 +471,15 @@ module.exports = new Set([
   'text-orientation',
   'text-overflow',
   'text-shadow',
-  'text-space-collapse',
-  'text-space-trim',
   'text-spacing',
+  'text-spacing-trim',
   'text-transform',
   'text-underline-offset',
   'text-underline-position',
   'text-wrap',
+  'text-wrap-mode',
+  'text-wrap-style',
+  'timeline-scope',
   'top',
   'transform',
   'transform-box',
@@ -501,12 +510,13 @@ module.exports = new Set([
   'voice-volume',
   'volume',
   'white-space',
+  'white-space-collapse',
+  'white-space-trim',
   'widows',
   'width',
   'will-change',
-  'word-boundary-detection',
-  'word-boundary-expansion',
   'word-break',
+  'word-space-transform',
   'word-spacing',
   'word-wrap',
   'wrap-after',

package/lib/implementedProperties.js

@@ -1,90 +1,86 @@
-'use strict';
-
-// autogenerated - 12/28/2023
 
-/*
- *
- * https://www.w3.org/Style/CSS/all-properties.en.html
- */
+'use strict';
+// autogenerated - 2025-01-09
+// https://www.w3.org/Style/CSS/all-properties.en.html
 
-var implementedProperties = new Set();
-implementedProperties.add("azimuth");
-implementedProperties.add("background");
-implementedProperties.add("background-attachment");
-implementedProperties.add("background-color");
-implementedProperties.add("background-image");
-implementedProperties.add("background-position");
-implementedProperties.add("background-repeat");
-implementedProperties.add("border");
-implementedProperties.add("border-bottom");
-implementedProperties.add("border-bottom-color");
-implementedProperties.add("border-bottom-style");
-implementedProperties.add("border-bottom-width");
-implementedProperties.add("border-collapse");
-implementedProperties.add("border-color");
-implementedProperties.add("border-left");
-implementedProperties.add("border-left-color");
-implementedProperties.add("border-left-style");
-implementedProperties.add("border-left-width");
-implementedProperties.add("border-right");
-implementedProperties.add("border-right-color");
-implementedProperties.add("border-right-style");
-implementedProperties.add("border-right-width");
-implementedProperties.add("border-spacing");
-implementedProperties.add("border-style");
-implementedProperties.add("border-top");
-implementedProperties.add("border-top-color");
-implementedProperties.add("border-top-style");
-implementedProperties.add("border-top-width");
-implementedProperties.add("border-width");
-implementedProperties.add("bottom");
-implementedProperties.add("clear");
-implementedProperties.add("clip");
-implementedProperties.add("color");
-implementedProperties.add("css-float");
-implementedProperties.add("flex");
-implementedProperties.add("flex-basis");
-implementedProperties.add("flex-grow");
-implementedProperties.add("flex-shrink");
-implementedProperties.add("float");
-implementedProperties.add("flood-color");
-implementedProperties.add("font");
-implementedProperties.add("font-family");
-implementedProperties.add("font-size");
-implementedProperties.add("font-style");
-implementedProperties.add("font-variant");
-implementedProperties.add("font-weight");
-implementedProperties.add("height");
-implementedProperties.add("left");
-implementedProperties.add("lighting-color");
-implementedProperties.add("line-height");
-implementedProperties.add("margin");
-implementedProperties.add("margin-bottom");
-implementedProperties.add("margin-left");
-implementedProperties.add("margin-right");
-implementedProperties.add("margin-top");
-implementedProperties.add("opacity");
-implementedProperties.add("outline-color");
-implementedProperties.add("padding");
-implementedProperties.add("padding-bottom");
-implementedProperties.add("padding-left");
-implementedProperties.add("padding-right");
-implementedProperties.add("padding-top");
-implementedProperties.add("right");
-implementedProperties.add("stop-color");
-implementedProperties.add("text-line-through-color");
-implementedProperties.add("text-overline-color");
-implementedProperties.add("text-underline-color");
-implementedProperties.add("top");
-implementedProperties.add("webkit-border-after-color");
-implementedProperties.add("webkit-border-before-color");
-implementedProperties.add("webkit-border-end-color");
-implementedProperties.add("webkit-border-start-color");
-implementedProperties.add("webkit-column-rule-color");
-implementedProperties.add("webkit-match-nearest-mail-blockquote-color");
-implementedProperties.add("webkit-tap-highlight-color");
-implementedProperties.add("webkit-text-emphasis-color");
-implementedProperties.add("webkit-text-fill-color");
-implementedProperties.add("webkit-text-stroke-color");
-implementedProperties.add("width");
-module.exports = implementedProperties;
+module.exports = new Set([
+  "azimuth",
+  "background",
+  "background-attachment",
+  "background-color",
+  "background-image",
+  "background-position",
+  "background-repeat",
+  "border",
+  "border-bottom",
+  "border-bottom-color",
+  "border-bottom-style",
+  "border-bottom-width",
+  "border-collapse",
+  "border-color",
+  "border-left",
+  "border-left-color",
+  "border-left-style",
+  "border-left-width",
+  "border-right",
+  "border-right-color",
+  "border-right-style",
+  "border-right-width",
+  "border-spacing",
+  "border-style",
+  "border-top",
+  "border-top-color",
+  "border-top-style",
+  "border-top-width",
+  "border-width",
+  "bottom",
+  "clear",
+  "clip",
+  "color",
+  "css-float",
+  "flex",
+  "flex-basis",
+  "flex-grow",
+  "flex-shrink",
+  "float",
+  "flood-color",
+  "font",
+  "font-family",
+  "font-size",
+  "font-style",
+  "font-variant",
+  "font-weight",
+  "height",
+  "left",
+  "lighting-color",
+  "line-height",
+  "margin",
+  "margin-bottom",
+  "margin-left",
+  "margin-right",
+  "margin-top",
+  "opacity",
+  "outline-color",
+  "padding",
+  "padding-bottom",
+  "padding-left",
+  "padding-right",
+  "padding-top",
+  "right",
+  "stop-color",
+  "text-line-through-color",
+  "text-overline-color",
+  "text-underline-color",
+  "top",
+  "webkit-border-after-color",
+  "webkit-border-before-color",
+  "webkit-border-end-color",
+  "webkit-border-start-color",
+  "webkit-column-rule-color",
+  "webkit-match-nearest-mail-blockquote-color",
+  "webkit-tap-highlight-color",
+  "webkit-text-emphasis-color",
+  "webkit-text-fill-color",
+  "webkit-text-stroke-color",
+  "width"
+]);

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/margin.js

@@ -12,6 +12,7 @@ var isValid = function (v) {
     type === TYPES.NULL_OR_EMPTY_STR ||
     type === TYPES.LENGTH ||
     type === TYPES.PERCENT ||
+    type === TYPES.CALC ||
     (type === TYPES.INTEGER && (v === '0' || v === 0))
   );
 };

package/lib/properties/padding.js

@@ -9,6 +9,7 @@ var isValid = function (v) {
     type === TYPES.NULL_OR_EMPTY_STR ||
     type === TYPES.LENGTH ||
     type === TYPES.PERCENT ||
+    type === TYPES.CALC ||
     (type === TYPES.INTEGER && (v === '0' || v === 0))
   );
 };