cssstyle 4.4.0 → 4.6.0

package/lib/CSSStyleDeclaration.js

@@ -11,6 +11,7 @@ const generatedProperties = require("./generated/properties");
 const { hasVarFunc, parseKeyword, parseShorthand, prepareValue, splitValue } = require("./parsers");
 const { dashedToCamelCase } = require("./utils/camelize");
 const { getPropertyDescriptor } = require("./utils/propertyDescriptors");
+const { asciiLowercase } = require("./utils/strings");
 
 /**
  * @see https://drafts.csswg.org/cssom/#the-cssstyledeclaration-interface
@@ -275,7 +276,7 @@ class CSSStyleDeclaration {
       this._setProperty(property, value);
       return;
     }
-    property = property.toLowerCase();
+    property = asciiLowercase(property);
     if (!allProperties.has(property) && !allExtraProperties.has(property)) {
       return;
     }

package/lib/generated/implementedProperties.js

@@ -1,5 +1,5 @@
 "use strict";
-// autogenerated - 2025-06-08
+// autogenerated - 2025-06-25
 // https://www.w3.org/Style/CSS/all-properties.en.html
 
 module.exports = new Set([

package/lib/generated/properties.js

@@ -1,8 +1,9 @@
 "use strict";
-// autogenerated - 2025-06-08
+// autogenerated - 2025-06-25
 // https://www.w3.org/Style/CSS/all-properties.en.html
 
 var external_dependency_parsers_0 = require("../parsers.js");
+var external_dependency_strings_1 = require("../utils/strings.js");
 var backgroundImage_export_parse, backgroundImage_export_isValid, backgroundImage_export_definition;
 backgroundImage_export_parse = function parse(v) {
   return external_dependency_parsers_0.parseImage(v);
@@ -18,7 +19,7 @@ backgroundImage_export_definition = {
     v = external_dependency_parsers_0.prepareValue(v, this._global);
     if (external_dependency_parsers_0.hasVarFunc(v)) {
       this._setProperty("background", "");
-      this._setProperty("backgound-image", v);
+      this._setProperty("background-image", v);
     } else {
       this._setProperty("background-image", backgroundImage_export_parse(v));
     }
@@ -65,7 +66,7 @@ backgroundPosition_export_definition = {
     v = external_dependency_parsers_0.prepareValue(v, this._global);
     if (external_dependency_parsers_0.hasVarFunc(v)) {
       this._setProperty("background", "");
-      this._setProperty("backgound-position", v);
+      this._setProperty("background-position", v);
     } else {
       this._setProperty("background-position", backgroundPosition_export_parse(v));
     }
@@ -92,7 +93,7 @@ backgroundRepeat_export_definition = {
     v = external_dependency_parsers_0.prepareValue(v, this._global);
     if (external_dependency_parsers_0.hasVarFunc(v)) {
       this._setProperty("background", "");
-      this._setProperty("backgound-repeat", v);
+      this._setProperty("background-repeat", v);
     } else {
       this._setProperty("background-repeat", backgroundRepeat_export_parse(v));
     }
@@ -119,7 +120,7 @@ backgroundAttachment_export_definition = {
     v = external_dependency_parsers_0.prepareValue(v, this._global);
     if (external_dependency_parsers_0.hasVarFunc(v)) {
       this._setProperty("background", "");
-      this._setProperty("backgound-attachemnt", v);
+      this._setProperty("background-attachment", v);
     } else {
       this._setProperty("background-attachment", backgroundAttachment_export_parse(v));
     }
@@ -149,7 +150,7 @@ backgroundColor_export_definition = {
     v = external_dependency_parsers_0.prepareValue(v, this._global);
     if (external_dependency_parsers_0.hasVarFunc(v)) {
       this._setProperty("background", "");
-      this._setProperty("backgound-color", v);
+      this._setProperty("background-color", v);
     } else {
       this._setProperty("background-color", backgroundColor_export_parse(v));
     }
@@ -189,7 +190,12 @@ const background_local_var_shorthandFor = new Map([["background-image", {
 background_export_definition = {
   set(v) {
     v = external_dependency_parsers_0.prepareValue(v, this._global);
-    if (v.toLowerCase() === "none" || external_dependency_parsers_0.hasVarFunc(v)) {
+    if (/^none$/i.test(v)) {
+      for (const [key] of background_local_var_shorthandFor) {
+        this._setProperty(key, "");
+      }
+      this._setProperty("background", external_dependency_strings_1.asciiLowercase(v));
+    } else if (external_dependency_parsers_0.hasVarFunc(v)) {
       for (const [key] of background_local_var_shorthandFor) {
         this._setProperty(key, "");
       }
@@ -258,7 +264,7 @@ borderStyle_export_isValid = function isValid(v) {
 borderStyle_export_definition = {
   set(v) {
     v = external_dependency_parsers_0.prepareValue(v, this._global);
-    if (v.toLowerCase() === "none") {
+    if (/^none$/i.test(v)) {
       v = "";
     }
     if (external_dependency_parsers_0.hasVarFunc(v)) {
@@ -323,7 +329,7 @@ const border_local_var_shorthandFor = new Map([["border-width", {
 border_export_definition = {
   set(v) {
     v = external_dependency_parsers_0.prepareValue(v, this._global);
-    if (v.toLowerCase() === "none") {
+    if (/^none$/i.test(v)) {
       v = "";
     }
     if (external_dependency_parsers_0.hasVarFunc(v)) {
@@ -1014,7 +1020,7 @@ clip_export_parse = function parse(v) {
     return val;
   }
   // parse legacy <shape>
-  v = v.toLowerCase();
+  v = external_dependency_strings_1.asciiLowercase(v);
   const matches = v.match(/^rect\(\s*(.*)\s*\)$/);
   if (!matches) {
     return;
@@ -1427,7 +1433,8 @@ fontFamily_export_parse = function parse(v) {
   if (v === "") {
     return v;
   }
-  const keywords = ["serif", "sans-serif", "system-ui", "cursive", "fantasy", "monospace"];
+  const keywords = ["serif", "sans-serif", "cursive", "fantasy", "monospace", "system-ui", "math", "ui-serif", "ui-sans-serif", "ui-monospace", "ui-rounded"];
+  const genericValues = ["fangsong", "kai", "khmer-mul", "nastaliq"];
   const val = external_dependency_parsers_0.splitValue(v, {
     delimiter: ","
   });
@@ -1446,16 +1453,27 @@ fontFamily_export_parse = function parse(v) {
       valid = true;
       continue;
     }
-    // This implementation does not strictly follow the specification. The spec
-    // does not require the first letter of the font-family to be capitalized.
-    // Also, unquoted font-family names are not restricted to ASCII only.
+    const obj = external_dependency_parsers_0.parseFunction(i);
+    if (obj) {
+      const {
+        name,
+        value
+      } = obj;
+      if (name === "generic" && genericValues.includes(value)) {
+        font.push(`${name}(${value})`);
+        valid = true;
+        continue;
+      }
+    }
+    // This implementation does not strictly follow the specification.
+    // The spec does not require the first letter of the font-family to be
+    // capitalized, and unquoted font-family names are not restricted to ASCII.
     // However, in the real world, the first letter of the ASCII font-family
-    // names are always capitalized, and unquoted font-family names do not
-    // contain spaces, e.g. `Times`, and AFAIK, non-ASCII font-family names are
-    // always quoted even without spaces, e.g. `"メイリオ"`.
-    // Therefore, it is unlikely that this implementation will cause problems.
+    // names are capitalized, and unquoted font-family names do not contain
+    // spaces, e.g. `Times`. And non-ASCII font-family names are quoted even
+    // without spaces, e.g. `"メイリオ"`.
     // @see https://drafts.csswg.org/css-fonts/#font-family-prop
-    if (/^\s*(?:[A-Z][A-Za-z\d\s-]+)\s*$/.test(i)) {
+    if (i !== "undefined" && /^(?:[A-Z][A-Za-z\d-]+(?:\s+[A-Z][A-Za-z\d-]+)*|-?[a-z][a-z-]+)$/.test(i)) {
       font.push(i.trim());
       valid = true;
       continue;
@@ -1523,50 +1541,131 @@ font_export_parse = function parse(v) {
   const [fontBlock, ...families] = external_dependency_parsers_0.splitValue(v, {
     delimiter: ","
   });
-  let blockA, blockB;
-  if (fontBlock.includes("/")) {
-    [blockA, blockB] = external_dependency_parsers_0.splitValue(fontBlock, {
-      delimiter: "/"
-    });
-  } else {
-    blockA = fontBlock.trim();
-  }
-  const obj = external_dependency_parsers_0.parseShorthand(blockA, font_local_var_shorthandFor, true);
-  if (!obj) {
-    return;
-  }
-  const font = {};
+  const [fontBlockA, fontBlockB] = external_dependency_parsers_0.splitValue(fontBlock, {
+    delimiter: "/"
+  });
+  const font = {
+    "font-style": "normal",
+    "font-variant": "normal",
+    "font-weight": "normal"
+  };
   const fontFamilies = new Set();
-  for (const [property, value] of Object.entries(obj)) {
-    if (property === "font-family") {
-      if (!blockB) {
-        fontFamilies.add(value);
-      }
-    } else {
-      font[property] = value;
+  if (fontBlockB) {
+    const [lineB, ...familiesB] = fontBlockB.trim().split(" ");
+    if (!lineB || !{
+      parse: lineHeight_export_parse,
+      isValid: lineHeight_export_isValid,
+      definition: lineHeight_export_definition
+    }.isValid(lineB) || !familiesB.length) {
+      return;
     }
-  }
-  // blockB, if matched, includes line-height and first font-family
-  if (blockB) {
-    const [lineheight, family] = external_dependency_parsers_0.splitValue(blockB);
-    if ({
+    const lineHeightB = {
       parse: lineHeight_export_parse,
       isValid: lineHeight_export_isValid,
       definition: lineHeight_export_definition
-    }.isValid(lineheight)) {
-      font["line-height"] = {
-        parse: lineHeight_export_parse,
-        isValid: lineHeight_export_isValid,
-        definition: lineHeight_export_definition
-      }.parse(lineheight);
+    }.parse(lineB);
+    const familyB = familiesB.join(" ");
+    if ({
+      parse: fontFamily_export_parse,
+      isValid: fontFamily_export_isValid,
+      definition: fontFamily_export_definition
+    }.isValid(familyB)) {
+      fontFamilies.add({
+        parse: fontFamily_export_parse,
+        isValid: fontFamily_export_isValid,
+        definition: fontFamily_export_definition
+      }.parse(familyB));
     } else {
       return;
     }
-    if ({
+    const parts = external_dependency_parsers_0.splitValue(fontBlockA.trim());
+    const properties = ["font-style", "font-variant", "font-weight", "font-size"];
+    for (const part of parts) {
+      if (part === "normal") {
+        continue;
+      } else {
+        for (const property of properties) {
+          switch (property) {
+            case "font-style":
+            case "font-variant":
+            case "font-weight":
+            case "font-size":
+              {
+                const value = font_local_var_shorthandFor.get(property);
+                if (value.isValid(part)) {
+                  font[property] = value.parse(part);
+                }
+                break;
+              }
+            default:
+          }
+        }
+      }
+    }
+    if (Object.hasOwn(font, "font-size")) {
+      font["line-height"] = lineHeightB;
+    } else {
+      return;
+    }
+  } else {
+    // FIXME: Switch to toReversed() when we can drop Node.js 18 support.
+    const revParts = [...external_dependency_parsers_0.splitValue(fontBlockA.trim())].reverse();
+    const revFontFamily = [];
+    const properties = ["font-style", "font-variant", "font-weight", "line-height"];
+    font["font-style"] = "normal";
+    font["font-variant"] = "normal";
+    font["font-weight"] = "normal";
+    font["line-height"] = "normal";
+    let fontSizeA;
+    for (const part of revParts) {
+      if (fontSizeA) {
+        if (part === "normal") {
+          continue;
+        } else {
+          for (const property of properties) {
+            switch (property) {
+              case "font-style":
+              case "font-variant":
+              case "font-weight":
+              case "line-height":
+                {
+                  const value = font_local_var_shorthandFor.get(property);
+                  if (value.isValid(part)) {
+                    font[property] = value.parse(part);
+                  }
+                  break;
+                }
+              default:
+            }
+          }
+        }
+      } else if ({
+        parse: fontSize_export_parse,
+        isValid: fontSize_export_isValid,
+        definition: fontSize_export_definition
+      }.isValid(part)) {
+        fontSizeA = {
+          parse: fontSize_export_parse,
+          isValid: fontSize_export_isValid,
+          definition: fontSize_export_definition
+        }.parse(part);
+      } else if ({
+        parse: fontFamily_export_parse,
+        isValid: fontFamily_export_isValid,
+        definition: fontFamily_export_definition
+      }.isValid(part)) {
+        revFontFamily.push(part);
+      } else {
+        return;
+      }
+    }
+    const family = revFontFamily.reverse().join(" ");
+    if (fontSizeA && {
       parse: fontFamily_export_parse,
       isValid: fontFamily_export_isValid,
       definition: fontFamily_export_definition
     }.isValid(family)) {
+      font["font-size"] = fontSizeA;
       fontFamilies.add({
         parse: fontFamily_export_parse,
         isValid: fontFamily_export_isValid,
@@ -1597,7 +1696,7 @@ font_export_parse = function parse(v) {
 font_export_definition = {
   set(v) {
     v = external_dependency_parsers_0.prepareValue(v, this._global);
-    if (external_dependency_parsers_0.hasVarFunc(v)) {
+    if (v === "" || external_dependency_parsers_0.hasVarFunc(v)) {
       for (const [key] of font_local_var_shorthandFor) {
         this._setProperty(key, "");
       }
@@ -1612,7 +1711,7 @@ font_export_definition = {
         const val = obj[key];
         if (typeof val === "string") {
           this._setProperty(key, val);
-          if (val && !str.has(val)) {
+          if (val && val !== "normal" && !str.has(val)) {
             if (key === "line-height") {
               str.add(`/ ${val}`);
             } else {
@@ -1635,7 +1734,7 @@ font_export_definition = {
       if (external_dependency_parsers_0.hasVarFunc(v)) {
         return "";
       }
-      if (v && !str.has(v)) {
+      if (v && v !== "normal" && !str.has(v)) {
         if (key === "line-height") {
           str.add(`/ ${v}`);
         } else {
@@ -1727,7 +1826,7 @@ lightingColor_export_definition = {
 var margin_export_parse, margin_export_isValid, margin_export_definition;
 const margin_local_var_positions = ["top", "right", "bottom", "left"];
 margin_export_parse = function parse(v) {
-  const val = external_dependency_parsers_0.parseMeasurement(v, true);
+  const val = external_dependency_parsers_0.parseMeasurement(v);
   if (val) {
     return val;
   }
@@ -1764,7 +1863,7 @@ margin_export_definition = {
 };
 var marginBottom_export_parse, marginBottom_export_isValid, marginBottom_export_definition;
 marginBottom_export_parse = function parse(v) {
-  const val = external_dependency_parsers_0.parseMeasurement(v, true);
+  const val = external_dependency_parsers_0.parseMeasurement(v);
   if (val) {
     return val;
   }
@@ -1794,7 +1893,7 @@ marginBottom_export_definition = {
 };
 var marginLeft_export_parse, marginLeft_export_isValid, marginLeft_export_definition;
 marginLeft_export_parse = function parse(v) {
-  const val = external_dependency_parsers_0.parseMeasurement(v, true);
+  const val = external_dependency_parsers_0.parseMeasurement(v);
   if (val) {
     return val;
   }
@@ -1824,7 +1923,7 @@ marginLeft_export_definition = {
 };
 var marginRight_export_parse, marginRight_export_isValid, marginRight_export_definition;
 marginRight_export_parse = function parse(v) {
-  const val = external_dependency_parsers_0.parseMeasurement(v, true);
+  const val = external_dependency_parsers_0.parseMeasurement(v);
   if (val) {
     return val;
   }
@@ -1854,7 +1953,7 @@ marginRight_export_definition = {
 };
 var marginTop_export_parse, marginTop_export_isValid, marginTop_export_definition;
 marginTop_export_parse = function parse(v) {
-  const val = external_dependency_parsers_0.parseMeasurement(v, true);
+  const val = external_dependency_parsers_0.parseMeasurement(v);
   if (val) {
     return val;
   }

package/lib/parsers.js

@@ -5,6 +5,7 @@
 "use strict";
 
 const { resolve: resolveColor, utils } = require("@asamuzakjp/css-color");
+const { asciiLowercase } = require("./utils/strings");
 
 const { cssCalc, isColor, isGradient, splitValue } = utils;
 
@@ -24,44 +25,48 @@ const NUM_TYPE = Object.freeze({
 });
 
 // System colors
+// @see https://drafts.csswg.org/css-color/#css-system-colors
+// @see https://drafts.csswg.org/css-color/#deprecated-system-colors
 const SYS_COLOR = Object.freeze([
   "accentcolor",
   "accentcolortext",
+  "activeborder",
+  "activecaption",
   "activetext",
+  "appworkspace",
+  "background",
   "buttonborder",
   "buttonface",
+  "buttonhighlight",
+  "buttonshadow",
   "buttontext",
   "canvas",
   "canvastext",
+  "captiontext",
   "field",
   "fieldtext",
   "graytext",
   "highlight",
   "highlighttext",
-  "linktext",
-  "mark",
-  "marktext",
-  "visitedtext",
-  "activeborder",
-  "activecaption",
-  "appworkspace",
-  "background",
-  "buttonhighlight",
-  "buttonshadow",
-  "captiontext",
   "inactiveborder",
   "inactivecaption",
   "inactivecaptiontext",
   "infobackground",
   "infotext",
+  "linktext",
+  "mark",
+  "marktext",
   "menu",
   "menutext",
   "scrollbar",
+  "selecteditem",
+  "selecteditemtext",
   "threeddarkshadow",
   "threedface",
   "threedhighlight",
   "threedlightshadow",
   "threedshadow",
+  "visitedtext",
   "window",
   "windowframe",
   "windowtext"
@@ -78,6 +83,7 @@ const varRegEx = /^var\(/;
 const varContainedRegEx = /(?<=[*/\s(])var\(/;
 const calcRegEx =
   /^(?:a?(?:cos|sin|tan)|abs|atan2|calc|clamp|exp|hypot|log|max|min|mod|pow|rem|round|sign|sqrt)\(/;
+const functionRegEx = /^([a-z][a-z\d]*(?:-[a-z\d]+)*)\(/i;
 
 const getNumericType = function getNumericType(val) {
   if (varRegEx.test(val)) {
@@ -184,7 +190,7 @@ exports.parseLength = function parseLength(val, restrictToPositive = false) {
       if (restrictToPositive && num < 0) {
         return;
       }
-      return `${num}${unit.toLowerCase()}`;
+      return `${num}${asciiLowercase(unit)}`;
     }
     default:
       if (varContainedRegEx.test(val)) {
@@ -216,7 +222,7 @@ exports.parsePercent = function parsePercent(val, restrictToPositive = false) {
       if (restrictToPositive && num < 0) {
         return;
       }
-      return `${num}${unit.toLowerCase()}`;
+      return `${num}${asciiLowercase(unit)}`;
     }
     default:
       if (varContainedRegEx.test(val)) {
@@ -250,7 +256,7 @@ exports.parseMeasurement = function parseMeasurement(val, restrictToPositive = f
       if (restrictToPositive && num < 0) {
         return;
       }
-      return `${num}${unit.toLowerCase()}`;
+      return `${num}${asciiLowercase(unit)}`;
     }
     default:
       if (varContainedRegEx.test(val)) {
@@ -279,7 +285,7 @@ exports.parseAngle = function parseAngle(val, normalizeDeg = false) {
     case NUM_TYPE.ANGLE: {
       let [, numVal, unit] = unitRegEx.exec(val);
       numVal = parseFloat(numVal);
-      unit = unit.toLowerCase();
+      unit = asciiLowercase(unit);
       if (unit === "deg") {
         if (normalizeDeg && numVal < 0) {
           while (numVal < 0) {
@@ -391,7 +397,7 @@ exports.parseKeyword = function parseKeyword(val, validKeywords = []) {
   if (varRegEx.test(val)) {
     return val;
   }
-  val = val.toString().toLowerCase();
+  val = asciiLowercase(val.toString());
   if (validKeywords.includes(val) || GLOBAL_VALUE.includes(val)) {
     return val;
   }
@@ -404,8 +410,11 @@ exports.parseColor = function parseColor(val) {
   if (varRegEx.test(val)) {
     return val;
   }
-  if (/^[a-z]+$/i.test(val) && SYS_COLOR.includes(val.toLowerCase())) {
-    return val;
+  if (/^[a-z]+$/i.test(val)) {
+    const v = asciiLowercase(val);
+    if (SYS_COLOR.includes(v)) {
+      return v;
+    }
   }
   const res = resolveColor(val, {
     format: "specifiedValue"
@@ -452,6 +461,32 @@ exports.parseImage = function parseImage(val) {
   }
 };
 
+exports.parseFunction = function parseFunction(val) {
+  if (val === "") {
+    return {
+      name: null,
+      value: ""
+    };
+  }
+  if (functionRegEx.test(val) && val.endsWith(")")) {
+    if (varRegEx.test(val) || varContainedRegEx.test(val)) {
+      return {
+        name: "var",
+        value: val
+      };
+    }
+    const [, name] = functionRegEx.exec(val);
+    const value = val
+      .replace(new RegExp(`^${name}\\(`), "")
+      .replace(/\)$/, "")
+      .trim();
+    return {
+      name,
+      value
+    };
+  }
+};
+
 exports.parseShorthand = function parseShorthand(val, shorthandFor, preserve = false) {
   const obj = {};
   if (val === "" || exports.hasVarFunc(val)) {
@@ -491,7 +526,7 @@ exports.parseShorthand = function parseShorthand(val, shorthandFor, preserve = f
 
 // Returns `false` for global values, e.g. "inherit".
 exports.isValidColor = function isValidColor(val) {
-  if (SYS_COLOR.includes(val.toLowerCase())) {
+  if (SYS_COLOR.includes(asciiLowercase(val))) {
     return true;
   }
   return isColor(val);

package/lib/properties/background.js

@@ -4,6 +4,7 @@
 // * also fix longhands
 
 const parsers = require("../parsers");
+const strings = require("../utils/strings");
 const backgroundImage = require("./backgroundImage");
 const backgroundPosition = require("./backgroundPosition");
 const backgroundRepeat = require("./backgroundRepeat");
@@ -21,7 +22,12 @@ const shorthandFor = new Map([
 module.exports.definition = {
   set(v) {
     v = parsers.prepareValue(v, this._global);
-    if (v.toLowerCase() === "none" || parsers.hasVarFunc(v)) {
+    if (/^none$/i.test(v)) {
+      for (const [key] of shorthandFor) {
+        this._setProperty(key, "");
+      }
+      this._setProperty("background", strings.asciiLowercase(v));
+    } else if (parsers.hasVarFunc(v)) {
       for (const [key] of shorthandFor) {
         this._setProperty(key, "");
       }

package/lib/properties/backgroundAttachment.js

@@ -19,7 +19,7 @@ module.exports.definition = {
     v = parsers.prepareValue(v, this._global);
     if (parsers.hasVarFunc(v)) {
       this._setProperty("background", "");
-      this._setProperty("backgound-attachemnt", v);
+      this._setProperty("background-attachment", v);
     } else {
       this._setProperty("background-attachment", module.exports.parse(v));
     }

package/lib/properties/backgroundColor.js

@@ -22,7 +22,7 @@ module.exports.definition = {
     v = parsers.prepareValue(v, this._global);
     if (parsers.hasVarFunc(v)) {
       this._setProperty("background", "");
-      this._setProperty("backgound-color", v);
+      this._setProperty("background-color", v);
     } else {
       this._setProperty("background-color", module.exports.parse(v));
     }

package/lib/properties/backgroundImage.js

@@ -18,7 +18,7 @@ module.exports.definition = {
     v = parsers.prepareValue(v, this._global);
     if (parsers.hasVarFunc(v)) {
       this._setProperty("background", "");
-      this._setProperty("backgound-image", v);
+      this._setProperty("background-image", v);
     } else {
       this._setProperty("background-image", module.exports.parse(v));
     }

package/lib/properties/backgroundPosition.js

@@ -39,7 +39,7 @@ module.exports.definition = {
     v = parsers.prepareValue(v, this._global);
     if (parsers.hasVarFunc(v)) {
       this._setProperty("background", "");
-      this._setProperty("backgound-position", v);
+      this._setProperty("background-position", v);
     } else {
       this._setProperty("background-position", module.exports.parse(v));
     }

package/lib/properties/backgroundRepeat.js

@@ -19,7 +19,7 @@ module.exports.definition = {
     v = parsers.prepareValue(v, this._global);
     if (parsers.hasVarFunc(v)) {
       this._setProperty("background", "");
-      this._setProperty("backgound-repeat", v);
+      this._setProperty("background-repeat", v);
     } else {
       this._setProperty("background-repeat", module.exports.parse(v));
     }

package/lib/properties/border.js

@@ -14,7 +14,7 @@ const shorthandFor = new Map([
 module.exports.definition = {
   set(v) {
     v = parsers.prepareValue(v, this._global);
-    if (v.toLowerCase() === "none") {
+    if (/^none$/i.test(v)) {
       v = "";
     }
     if (parsers.hasVarFunc(v)) {

package/lib/properties/borderStyle.js

@@ -28,7 +28,7 @@ module.exports.isValid = function isValid(v) {
 module.exports.definition = {
   set(v) {
     v = parsers.prepareValue(v, this._global);
-    if (v.toLowerCase() === "none") {
+    if (/^none$/i.test(v)) {
       v = "";
     }
     if (parsers.hasVarFunc(v)) {

package/lib/properties/clip.js

@@ -3,6 +3,7 @@
 // @see https://drafts.fxtf.org/css-masking/#clip-property
 
 const parsers = require("../parsers");
+const strings = require("../utils/strings");
 
 module.exports.parse = function parse(v) {
   if (v === "") {
@@ -13,7 +14,7 @@ module.exports.parse = function parse(v) {
     return val;
   }
   // parse legacy <shape>
-  v = v.toLowerCase();
+  v = strings.asciiLowercase(v);
   const matches = v.match(/^rect\(\s*(.*)\s*\)$/);
   if (!matches) {
     return;

package/lib/properties/font.js

@@ -26,38 +26,97 @@ module.exports.parse = function parse(v) {
   const [fontBlock, ...families] = parsers.splitValue(v, {
     delimiter: ","
   });
-  let blockA, blockB;
-  if (fontBlock.includes("/")) {
-    [blockA, blockB] = parsers.splitValue(fontBlock, {
-      delimiter: "/"
-    });
-  } else {
-    blockA = fontBlock.trim();
-  }
-  const obj = parsers.parseShorthand(blockA, shorthandFor, true);
-  if (!obj) {
-    return;
-  }
-  const font = {};
+  const [fontBlockA, fontBlockB] = parsers.splitValue(fontBlock, {
+    delimiter: "/"
+  });
+  const font = {
+    "font-style": "normal",
+    "font-variant": "normal",
+    "font-weight": "normal"
+  };
   const fontFamilies = new Set();
-  for (const [property, value] of Object.entries(obj)) {
-    if (property === "font-family") {
-      if (!blockB) {
-        fontFamilies.add(value);
-      }
+  if (fontBlockB) {
+    const [lineB, ...familiesB] = fontBlockB.trim().split(" ");
+    if (!lineB || !lineHeight.isValid(lineB) || !familiesB.length) {
+      return;
+    }
+    const lineHeightB = lineHeight.parse(lineB);
+    const familyB = familiesB.join(" ");
+    if (fontFamily.isValid(familyB)) {
+      fontFamilies.add(fontFamily.parse(familyB));
     } else {
-      font[property] = value;
+      return;
     }
-  }
-  // blockB, if matched, includes line-height and first font-family
-  if (blockB) {
-    const [lineheight, family] = parsers.splitValue(blockB);
-    if (lineHeight.isValid(lineheight)) {
-      font["line-height"] = lineHeight.parse(lineheight);
+    const parts = parsers.splitValue(fontBlockA.trim());
+    const properties = ["font-style", "font-variant", "font-weight", "font-size"];
+    for (const part of parts) {
+      if (part === "normal") {
+        continue;
+      } else {
+        for (const property of properties) {
+          switch (property) {
+            case "font-style":
+            case "font-variant":
+            case "font-weight":
+            case "font-size": {
+              const value = shorthandFor.get(property);
+              if (value.isValid(part)) {
+                font[property] = value.parse(part);
+              }
+              break;
+            }
+            default:
+          }
+        }
+      }
+    }
+    if (Object.hasOwn(font, "font-size")) {
+      font["line-height"] = lineHeightB;
     } else {
       return;
     }
-    if (fontFamily.isValid(family)) {
+  } else {
+    // FIXME: Switch to toReversed() when we can drop Node.js 18 support.
+    const revParts = [...parsers.splitValue(fontBlockA.trim())].reverse();
+    const revFontFamily = [];
+    const properties = ["font-style", "font-variant", "font-weight", "line-height"];
+    font["font-style"] = "normal";
+    font["font-variant"] = "normal";
+    font["font-weight"] = "normal";
+    font["line-height"] = "normal";
+    let fontSizeA;
+    for (const part of revParts) {
+      if (fontSizeA) {
+        if (part === "normal") {
+          continue;
+        } else {
+          for (const property of properties) {
+            switch (property) {
+              case "font-style":
+              case "font-variant":
+              case "font-weight":
+              case "line-height": {
+                const value = shorthandFor.get(property);
+                if (value.isValid(part)) {
+                  font[property] = value.parse(part);
+                }
+                break;
+              }
+              default:
+            }
+          }
+        }
+      } else if (fontSize.isValid(part)) {
+        fontSizeA = fontSize.parse(part);
+      } else if (fontFamily.isValid(part)) {
+        revFontFamily.push(part);
+      } else {
+        return;
+      }
+    }
+    const family = revFontFamily.reverse().join(" ");
+    if (fontSizeA && fontFamily.isValid(family)) {
+      font["font-size"] = fontSizeA;
       fontFamilies.add(fontFamily.parse(family));
     } else {
       return;
@@ -77,7 +136,7 @@ module.exports.parse = function parse(v) {
 module.exports.definition = {
   set(v) {
     v = parsers.prepareValue(v, this._global);
-    if (parsers.hasVarFunc(v)) {
+    if (v === "" || parsers.hasVarFunc(v)) {
       for (const [key] of shorthandFor) {
         this._setProperty(key, "");
       }
@@ -92,7 +151,7 @@ module.exports.definition = {
         const val = obj[key];
         if (typeof val === "string") {
           this._setProperty(key, val);
-          if (val && !str.has(val)) {
+          if (val && val !== "normal" && !str.has(val)) {
             if (key === "line-height") {
               str.add(`/ ${val}`);
             } else {
@@ -115,7 +174,7 @@ module.exports.definition = {
       if (parsers.hasVarFunc(v)) {
         return "";
       }
-      if (v && !str.has(v)) {
+      if (v && v !== "normal" && !str.has(v)) {
         if (key === "line-height") {
           str.add(`/ ${v}`);
         } else {

package/lib/properties/fontFamily.js

@@ -6,7 +6,20 @@ module.exports.parse = function parse(v) {
   if (v === "") {
     return v;
   }
-  const keywords = ["serif", "sans-serif", "system-ui", "cursive", "fantasy", "monospace"];
+  const keywords = [
+    "serif",
+    "sans-serif",
+    "cursive",
+    "fantasy",
+    "monospace",
+    "system-ui",
+    "math",
+    "ui-serif",
+    "ui-sans-serif",
+    "ui-monospace",
+    "ui-rounded"
+  ];
+  const genericValues = ["fangsong", "kai", "khmer-mul", "nastaliq"];
   const val = parsers.splitValue(v, {
     delimiter: ","
   });
@@ -25,16 +38,27 @@ module.exports.parse = function parse(v) {
       valid = true;
       continue;
     }
-    // This implementation does not strictly follow the specification. The spec
-    // does not require the first letter of the font-family to be capitalized.
-    // Also, unquoted font-family names are not restricted to ASCII only.
+    const obj = parsers.parseFunction(i);
+    if (obj) {
+      const { name, value } = obj;
+      if (name === "generic" && genericValues.includes(value)) {
+        font.push(`${name}(${value})`);
+        valid = true;
+        continue;
+      }
+    }
+    // This implementation does not strictly follow the specification.
+    // The spec does not require the first letter of the font-family to be
+    // capitalized, and unquoted font-family names are not restricted to ASCII.
     // However, in the real world, the first letter of the ASCII font-family
-    // names are always capitalized, and unquoted font-family names do not
-    // contain spaces, e.g. `Times`, and AFAIK, non-ASCII font-family names are
-    // always quoted even without spaces, e.g. `"メイリオ"`.
-    // Therefore, it is unlikely that this implementation will cause problems.
+    // names are capitalized, and unquoted font-family names do not contain
+    // spaces, e.g. `Times`. And non-ASCII font-family names are quoted even
+    // without spaces, e.g. `"メイリオ"`.
     // @see https://drafts.csswg.org/css-fonts/#font-family-prop
-    if (/^\s*(?:[A-Z][A-Za-z\d\s-]+)\s*$/.test(i)) {
+    if (
+      i !== "undefined" &&
+      /^(?:[A-Z][A-Za-z\d-]+(?:\s+[A-Z][A-Za-z\d-]+)*|-?[a-z][a-z-]+)$/.test(i)
+    ) {
       font.push(i.trim());
       valid = true;
       continue;

package/lib/properties/margin.js

@@ -5,7 +5,7 @@ const parsers = require("../parsers");
 const positions = ["top", "right", "bottom", "left"];
 
 module.exports.parse = function parse(v) {
-  const val = parsers.parseMeasurement(v, true);
+  const val = parsers.parseMeasurement(v);
   if (val) {
     return val;
   }

package/lib/properties/marginBottom.js

@@ -3,7 +3,7 @@
 const parsers = require("../parsers");
 
 module.exports.parse = function parse(v) {
-  const val = parsers.parseMeasurement(v, true);
+  const val = parsers.parseMeasurement(v);
   if (val) {
     return val;
   }

package/lib/properties/marginLeft.js

@@ -3,7 +3,7 @@
 const parsers = require("../parsers");
 
 module.exports.parse = function parse(v) {
-  const val = parsers.parseMeasurement(v, true);
+  const val = parsers.parseMeasurement(v);
   if (val) {
     return val;
   }

package/lib/properties/marginRight.js

@@ -3,7 +3,7 @@
 const parsers = require("../parsers");
 
 module.exports.parse = function parse(v) {
-  const val = parsers.parseMeasurement(v, true);
+  const val = parsers.parseMeasurement(v);
   if (val) {
     return val;
   }

package/lib/properties/marginTop.js

@@ -3,7 +3,7 @@
 const parsers = require("../parsers");
 
 module.exports.parse = function parse(v) {
-  const val = parsers.parseMeasurement(v, true);
+  const val = parsers.parseMeasurement(v);
   if (val) {
     return val;
   }

package/lib/utils/camelize.js

@@ -1,5 +1,7 @@
 "use strict";
 
+const { asciiLowercase } = require("./strings");
+
 // Utility to translate from `border-width` to `borderWidth`.
 // NOTE: For values prefixed with webkit, e.g. `-webkit-foo`, we need to provide
 // both `webkitFoo` and `WebkitFoo`. Here we only return `webkitFoo`.
@@ -27,7 +29,7 @@ exports.camelCaseToDashed = function (camelCase) {
   if (camelCase.startsWith("--")) {
     return camelCase;
   }
-  const dashed = camelCase.replace(/(?<=[a-z])[A-Z]/g, "-$&").toLowerCase();
+  const dashed = asciiLowercase(camelCase.replace(/(?<=[a-z])[A-Z]/g, "-$&"));
   if (/^webkit-/.test(dashed)) {
     return `-${dashed}`;
   }

package/lib/utils/strings.js

@@ -0,0 +1,167 @@
+// Forked from https://github.com/jsdom/jsdom/blob/main/lib/jsdom/living/helpers/strings.js
+
+"use strict";
+
+// https://infra.spec.whatwg.org/#ascii-whitespace
+const asciiWhitespaceRe = /^[\t\n\f\r ]$/;
+exports.asciiWhitespaceRe = asciiWhitespaceRe;
+
+// https://infra.spec.whatwg.org/#ascii-lowercase
+exports.asciiLowercase = (s) => {
+  const len = s.length;
+  const out = new Array(len);
+  for (let i = 0; i < len; i++) {
+    const code = s.charCodeAt(i);
+    // If the character is between 'A' (65) and 'Z' (90), convert using bitwise OR with 32
+    out[i] = code >= 65 && code <= 90 ? String.fromCharCode(code | 32) : s[i];
+  }
+  return out.join("");
+};
+
+// https://infra.spec.whatwg.org/#ascii-uppercase
+exports.asciiUppercase = (s) => {
+  const len = s.length;
+  const out = new Array(len);
+  for (let i = 0; i < len; i++) {
+    const code = s.charCodeAt(i);
+    // If the character is between 'a' (97) and 'z' (122), convert using bitwise AND with ~32
+    out[i] = code >= 97 && code <= 122 ? String.fromCharCode(code & ~32) : s[i];
+  }
+  return out.join("");
+};
+
+// https://infra.spec.whatwg.org/#strip-newlines
+exports.stripNewlines = (s) => {
+  return s.replace(/[\n\r]+/g, "");
+};
+
+// https://infra.spec.whatwg.org/#strip-leading-and-trailing-ascii-whitespace
+exports.stripLeadingAndTrailingASCIIWhitespace = (s) => {
+  return s.replace(/^[ \t\n\f\r]+/, "").replace(/[ \t\n\f\r]+$/, "");
+};
+
+// https://infra.spec.whatwg.org/#strip-and-collapse-ascii-whitespace
+exports.stripAndCollapseASCIIWhitespace = (s) => {
+  return s
+    .replace(/[ \t\n\f\r]+/g, " ")
+    .replace(/^[ \t\n\f\r]+/, "")
+    .replace(/[ \t\n\f\r]+$/, "");
+};
+
+// https://html.spec.whatwg.org/multipage/infrastructure.html#valid-simple-colour
+exports.isValidSimpleColor = (s) => {
+  return /^#[a-fA-F\d]{6}$/.test(s);
+};
+
+// https://infra.spec.whatwg.org/#ascii-case-insensitive
+exports.asciiCaseInsensitiveMatch = (a, b) => {
+  if (a.length !== b.length) {
+    return false;
+  }
+
+  for (let i = 0; i < a.length; ++i) {
+    if ((a.charCodeAt(i) | 32) !== (b.charCodeAt(i) | 32)) {
+      return false;
+    }
+  }
+
+  return true;
+};
+
+// https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#rules-for-parsing-integers
+// Error is represented as null.
+const parseInteger = (exports.parseInteger = (input) => {
+  // The implementation here is slightly different from the spec's. We want to use parseInt(), but parseInt() trims
+  // Unicode whitespace in addition to just ASCII ones, so we make sure that the trimmed prefix contains only ASCII
+  // whitespace ourselves.
+  const numWhitespace = input.length - input.trimStart().length;
+  if (/[^\t\n\f\r ]/.test(input.slice(0, numWhitespace))) {
+    return null;
+  }
+  // We don't allow hexadecimal numbers here.
+  // eslint-disable-next-line radix
+  const value = parseInt(input, 10);
+  if (Number.isNaN(value)) {
+    return null;
+  }
+  // parseInt() returns -0 for "-0". Normalize that here.
+  return value === 0 ? 0 : value;
+});
+
+// https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#rules-for-parsing-non-negative-integers
+// Error is represented as null.
+exports.parseNonNegativeInteger = (input) => {
+  const value = parseInteger(input);
+  if (value === null) {
+    return null;
+  }
+  if (value < 0) {
+    return null;
+  }
+  return value;
+};
+
+// https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#valid-floating-point-number
+const floatingPointNumRe = /^-?(?:\d+|\d*\.\d+)(?:[eE][-+]?\d+)?$/;
+exports.isValidFloatingPointNumber = (str) => floatingPointNumRe.test(str);
+
+// https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#rules-for-parsing-floating-point-number-values
+// Error is represented as null.
+exports.parseFloatingPointNumber = (str) => {
+  // The implementation here is slightly different from the spec's. We need to use parseFloat() in order to retain
+  // accuracy, but parseFloat() trims Unicode whitespace in addition to just ASCII ones, so we make sure that the
+  // trimmed prefix contains only ASCII whitespace ourselves.
+  const numWhitespace = str.length - str.trimStart().length;
+  if (/[^\t\n\f\r ]/.test(str.slice(0, numWhitespace))) {
+    return null;
+  }
+  const parsed = parseFloat(str);
+  return isFinite(parsed) ? parsed : null;
+};
+
+// https://infra.spec.whatwg.org/#split-on-ascii-whitespace
+exports.splitOnASCIIWhitespace = (str) => {
+  let position = 0;
+  const tokens = [];
+  while (position < str.length && asciiWhitespaceRe.test(str[position])) {
+    position++;
+  }
+  if (position === str.length) {
+    return tokens;
+  }
+  while (position < str.length) {
+    const start = position;
+    while (position < str.length && !asciiWhitespaceRe.test(str[position])) {
+      position++;
+    }
+    tokens.push(str.slice(start, position));
+    while (position < str.length && asciiWhitespaceRe.test(str[position])) {
+      position++;
+    }
+  }
+  return tokens;
+};
+
+// https://infra.spec.whatwg.org/#split-on-commas
+exports.splitOnCommas = (str) => {
+  let position = 0;
+  const tokens = [];
+  while (position < str.length) {
+    let start = position;
+    while (position < str.length && str[position] !== ",") {
+      position++;
+    }
+    let end = position;
+    while (start < str.length && asciiWhitespaceRe.test(str[start])) {
+      start++;
+    }
+    while (end > start && asciiWhitespaceRe.test(str[end - 1])) {
+      end--;
+    }
+    tokens.push(str.slice(start, end));
+    if (position < str.length) {
+      position++;
+    }
+  }
+  return tokens;
+};

package/package.json

@@ -6,7 +6,7 @@
     "CSSStyleDeclaration",
     "StyleSheet"
   ],
-  "version": "4.4.0",
+  "version": "4.6.0",
   "homepage": "https://github.com/jsdom/cssstyle",
   "maintainers": [
     {