cssstyle 5.0.0 → 5.2.0

package/lib/CSSStyleDeclaration.js

@@ -3,13 +3,19 @@
  * https://github.com/NV/CSSOM
  */
 "use strict";
-const CSSOM = require("rrweb-cssom");
 const allExtraProperties = require("./allExtraProperties");
 const { shorthandProperties } = require("./shorthandProperties");
 const allProperties = require("./generated/allProperties");
 const implementedProperties = require("./generated/implementedProperties");
 const generatedProperties = require("./generated/properties");
-const { hasVarFunc, parseKeyword, parseShorthand, prepareValue, splitValue } = require("./parsers");
+const {
+  hasVarFunc,
+  isValidPropertyValue,
+  parseCSS,
+  parseShorthand,
+  prepareValue,
+  splitValue
+} = require("./parsers");
 const { dashedToCamelCase } = require("./utils/camelize");
 const { getPropertyDescriptor } = require("./utils/propertyDescriptors");
 const { asciiLowercase } = require("./utils/strings");
@@ -157,21 +163,37 @@ class CSSStyleDeclaration {
       return;
     }
     this._setInProgress = true;
-    let dummyRule;
     try {
-      dummyRule = CSSOM.parse(`#bogus{${value}}`).cssRules[0].style;
+      const valueObj = parseCSS(
+        value,
+        {
+          context: "declarationList",
+          parseValue: false
+        },
+        true
+      );
+      if (valueObj?.children) {
+        for (const item of valueObj.children) {
+          const {
+            important,
+            property,
+            value: { value: rawValue }
+          } = item;
+          const isCustomProperty = property.startsWith("--");
+          if (
+            isCustomProperty ||
+            hasVarFunc(rawValue) ||
+            isValidPropertyValue(property, rawValue)
+          ) {
+            this.setProperty(property, rawValue, important ? "important" : "");
+          } else {
+            this.removeProperty(property);
+          }
+        }
+      }
     } catch {
-      // Malformed css, just return.
       return;
     }
-    for (let i = 0; i < dummyRule.length; i++) {
-      const property = dummyRule[i];
-      this.setProperty(
-        property,
-        dummyRule.getPropertyValue(property),
-        dummyRule.getPropertyPriority(property)
-      );
-    }
     this._setInProgress = false;
     if (typeof this._onChange === "function") {
       this._onChange(this.cssText);
@@ -505,22 +527,18 @@ Object.defineProperties(CSSStyleDeclaration.prototype, {
       if (part) {
         part = `-${part}`;
       }
+      const shorthandProp = `${prefix}${part}`;
       let parts = [];
       if (val === "") {
         parts.push(val);
-      } else {
-        const key = parseKeyword(val);
-        if (key) {
-          parts.push(key);
-        } else {
-          parts.push(...splitValue(val));
-        }
+      } else if (isValidPropertyValue(shorthandProp, val)) {
+        parts.push(...splitValue(val));
       }
       if (!parts.length || parts.length > positions.length || !parts.every(isValid)) {
         return;
       }
       parts = parts.map((p) => parser(p));
-      this._setProperty(`${prefix}${part}`, parts.join(" "));
+      this._setProperty(shorthandProp, parts.join(" "));
       switch (positions.length) {
         case 4:
           if (parts.length === 1) {

package/lib/generated/implementedProperties.js

@@ -1,5 +1,5 @@
 "use strict";
-// autogenerated - 2025-07-14
+// autogenerated - 2025-07-28
 // https://www.w3.org/Style/CSS/all-properties.en.html
 
 module.exports = new Set([
@@ -47,6 +47,7 @@ module.exports = new Set([
   "clear",
   "clip",
   "color",
+  "display",
   "flex",
   "flex-basis",
   "flex-grow",

package/lib/generated/properties.js

@@ -1,9 +1,9 @@
 "use strict";
-// autogenerated - 2025-07-14
+// autogenerated - 2025-07-28
 // 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 external_dependency_strings_1 = require("../utils\\strings.js");
 var backgroundImage_export_parse, backgroundImage_export_isValid, backgroundImage_export_definition;
 backgroundImage_export_parse = function parse(v) {
   if (v === "") {
@@ -1792,6 +1792,213 @@ color_export_definition = {
   enumerable: true,
   configurable: true
 };
+var display_export_parse, display_export_isValid, display_export_definition;
+/* keywords */
+const display_local_var_displayOutside = ["block", "inline", "run-in"];
+const display_local_var_displayFlow = ["flow", "flow-root"];
+const display_local_var_displayInside = ["table", "flex", "grid", "ruby", ...display_local_var_displayFlow];
+const display_local_var_displayListItem = ["list-item"];
+const display_local_var_displayInternal = ["table-row-group", "table-header-group", "table-footer-group", "table-row", "table-cell", "table-column-group", "table-column", "table-caption", "ruby-base", "ruby-text", "ruby-base-container", "ruby-text-container"];
+const display_local_var_displayBox = ["contents", "none"];
+const display_local_var_displayLegacy = ["inline-block", "inline-table", "inline-flex", "inline-grid"];
+const display_local_var_keywords = [...display_local_var_displayOutside, ...display_local_var_displayInside, ...display_local_var_displayListItem, ...display_local_var_displayInternal, ...display_local_var_displayBox, ...display_local_var_displayLegacy];
+display_export_parse = function parse(v) {
+  if (v === "") {
+    return v;
+  }
+  const values = external_dependency_parsers_0.splitValue(v);
+  switch (values.length) {
+    case 1:
+      {
+        let [v1] = values;
+        v1 = external_dependency_parsers_0.parseKeyword(v1, display_local_var_keywords);
+        if (v1) {
+          if (v1 === "flow") {
+            return "block";
+          }
+          return v1;
+        }
+        break;
+      }
+    case 2:
+      {
+        let [v1, v2] = values;
+        v1 = external_dependency_parsers_0.parseKeyword(v1, display_local_var_keywords);
+        v2 = external_dependency_parsers_0.parseKeyword(v2, display_local_var_keywords);
+        if (!v1 || !v2) {
+          return;
+        }
+        let outerValue = "";
+        let innerValue = "";
+        if (v1 === "list-item") {
+          outerValue = v2;
+          innerValue = v1;
+        } else if (v2 === "list-item") {
+          outerValue = v1;
+          innerValue = v2;
+        } else if (display_local_var_displayOutside.includes(v1)) {
+          outerValue = v1;
+          innerValue = v2;
+        } else if (display_local_var_displayOutside.includes(v2)) {
+          outerValue = v2;
+          innerValue = v1;
+        }
+        if (innerValue === "list-item") {
+          switch (outerValue) {
+            case "block":
+            case "flow":
+              {
+                return innerValue;
+              }
+            case "flow-root":
+            case "inline":
+            case "run-in":
+              {
+                return `${outerValue} ${innerValue}`;
+              }
+            default:
+          }
+        } else if (outerValue === "block") {
+          switch (innerValue) {
+            case "flow":
+              {
+                return outerValue;
+              }
+            case "flow-root":
+            case "flex":
+            case "grid":
+            case "table":
+              {
+                return innerValue;
+              }
+            case "ruby":
+              {
+                return `${outerValue} ${innerValue}`;
+              }
+            default:
+          }
+        } else if (outerValue === "inline") {
+          switch (innerValue) {
+            case "flow":
+              {
+                return outerValue;
+              }
+            case "flow-root":
+              {
+                return `${outerValue}-block`;
+              }
+            case "flex":
+            case "grid":
+            case "table":
+              {
+                return `${outerValue}-${innerValue}`;
+              }
+            case "ruby":
+              {
+                return innerValue;
+              }
+            default:
+          }
+        } else if (outerValue === "run-in") {
+          switch (innerValue) {
+            case "flow":
+              {
+                return outerValue;
+              }
+            case "flow-root":
+            case "flex":
+            case "grid":
+            case "table":
+            case "ruby":
+              {
+                return `${outerValue} ${innerValue}`;
+              }
+            default:
+          }
+        }
+        break;
+      }
+    case 3:
+      {
+        let [v1, v2, v3] = values;
+        v1 = external_dependency_parsers_0.parseKeyword(v1, display_local_var_keywords);
+        v2 = external_dependency_parsers_0.parseKeyword(v2, display_local_var_keywords);
+        v3 = external_dependency_parsers_0.parseKeyword(v3, display_local_var_keywords);
+        if (!v1 || !v2 || !v3) {
+          return;
+        }
+        let outerValue = "";
+        let flowValue = "";
+        let listItemValue = "";
+        if (v1 === "list-item") {
+          listItemValue = v1;
+          if (display_local_var_displayFlow.includes(v2)) {
+            flowValue = v2;
+            outerValue = v3;
+          } else if (display_local_var_displayFlow.includes(v3)) {
+            flowValue = v3;
+            outerValue = v2;
+          }
+        } else if (v2 === "list-item") {
+          listItemValue = v2;
+          if (display_local_var_displayFlow.includes(v1)) {
+            flowValue = v1;
+            outerValue = v3;
+          } else if (display_local_var_displayFlow.includes(v3)) {
+            flowValue = v3;
+            outerValue = v1;
+          }
+        } else if (v3 === "list-item") {
+          listItemValue = v3;
+          if (display_local_var_displayFlow.includes(v1)) {
+            flowValue = v1;
+            outerValue = v2;
+          } else if (display_local_var_displayFlow.includes(v2)) {
+            flowValue = v2;
+            outerValue = v1;
+          }
+        }
+        if (outerValue && flowValue && listItemValue) {
+          switch (outerValue) {
+            case "block":
+              {
+                if (flowValue === "flow") {
+                  return listItemValue;
+                }
+                return `${flowValue} ${listItemValue}`;
+              }
+            case "inline":
+            case "run-in":
+              {
+                if (flowValue === "flow") {
+                  return `${outerValue} ${listItemValue}`;
+                }
+                return `${outerValue} ${flowValue} ${listItemValue}`;
+              }
+          }
+        }
+        break;
+      }
+    default:
+  }
+};
+display_export_isValid = function isValid(v) {
+  if (v === "") {
+    return true;
+  }
+  return typeof display_export_parse(v) === "string";
+};
+display_export_definition = {
+  set(v) {
+    v = external_dependency_parsers_0.prepareValue(v, this._global);
+    this._setProperty("display", display_export_parse(v));
+  },
+  get() {
+    return this.getPropertyValue("display");
+  },
+  enumerable: true,
+  configurable: true
+};
 var flexGrow_export_parse, flexGrow_export_isValid, flexGrow_export_definition;
 flexGrow_export_parse = function parse(v) {
   return external_dependency_parsers_0.parseNumber(v, true);
@@ -3306,6 +3513,7 @@ module.exports = {
   clear: clear_export_definition,
   clip: clip_export_definition,
   color: color_export_definition,
+  display: display_export_definition,
   flexGrow: flexGrow_export_definition,
   "flex-grow": flexGrow_export_definition,
   flexShrink: flexShrink_export_definition,

package/lib/parsers.js

@@ -4,11 +4,14 @@
  */
 "use strict";
 
-const { resolve: resolveColor, utils } = require("@asamuzakjp/css-color");
+const {
+  resolve: resolveColor,
+  utils: { cssCalc, isColor, resolveGradient, splitValue }
+} = require("@asamuzakjp/css-color");
+const { next: syntaxes } = require("@csstools/css-syntax-patches-for-csstree");
+const csstree = require("css-tree");
 const { asciiLowercase } = require("./utils/strings");
 
-const { cssCalc, isColor, isGradient, splitValue } = utils;
-
 // CSS global values
 // @see https://drafts.csswg.org/css-cascade-5/#defaulting-keywords
 const GLOBAL_VALUE = Object.freeze(["initial", "inherit", "unset", "revert", "revert-layer"]);
@@ -111,6 +114,9 @@ const getNumericType = function getNumericType(val) {
   return NUM_TYPE.UNDEFINED;
 };
 
+// Patch css-tree
+const cssTree = csstree.fork(syntaxes);
+
 // Prepare stringified value.
 exports.prepareValue = function prepareValue(value, globalObject = globalThis) {
   // `null` is converted to an empty string.
@@ -398,7 +404,7 @@ exports.parseKeyword = function parseKeyword(val, validKeywords = []) {
   if (varRegEx.test(val)) {
     return val;
   }
-  val = asciiLowercase(val.toString());
+  val = asciiLowercase(val);
   if (validKeywords.includes(val) || GLOBAL_VALUE.includes(val)) {
     return val;
   }
@@ -430,15 +436,17 @@ exports.parseImage = function parseImage(val) {
   if (val === "") {
     return "";
   }
-  if (gradientRegEx.test(val) && varRegEx.test(val)) {
+  if (gradientRegEx.test(val) && exports.hasVarFunc(val)) {
     return val;
   }
   if (keywordRegEx.test(val)) {
     return exports.parseKeyword(val, ["none"]);
   }
-  // FIXME: need to resolve color values within gradients
-  if (isGradient(val)) {
-    return val;
+  const res = resolveGradient(val, {
+    format: "specifiedValue"
+  });
+  if (res) {
+    return res;
   }
   return exports.parseUrl(val);
 };
@@ -506,6 +514,31 @@ exports.parseShorthand = function parseShorthand(val, shorthandFor, preserve = f
   return obj;
 };
 
+exports.parseCSS = function parseCSS(val, opt, toObject = false) {
+  const ast = cssTree.parse(val, opt);
+  if (toObject) {
+    return cssTree.toPlainObject(ast);
+  }
+  return ast;
+};
+
+// Returns `false` for custom property and/or var().
+exports.isValidPropertyValue = function isValidPropertyValue(prop, val) {
+  // cssTree.lexer does not support deprecated system colors
+  // @see https://github.com/w3c/webref/issues/1519#issuecomment-3120290261
+  if (SYS_COLOR.includes(asciiLowercase(val))) {
+    if (/^(?:-webkit-)?(?:[a-z][a-z\d]*-)*color$/i.test(prop)) {
+      return true;
+    }
+    return false;
+  }
+  const ast = exports.parseCSS(val, {
+    context: "value"
+  });
+  const { error, matched } = cssTree.lexer.matchProperty(prop, ast);
+  return error === null && matched !== null;
+};
+
 // Returns `false` for global values, e.g. "inherit".
 exports.isValidColor = function isValidColor(val) {
   if (SYS_COLOR.includes(asciiLowercase(val))) {

package/lib/properties/display.js

@@ -0,0 +1,217 @@
+"use strict";
+
+const parsers = require("../parsers");
+
+/* keywords */
+const displayOutside = ["block", "inline", "run-in"];
+const displayFlow = ["flow", "flow-root"];
+const displayInside = ["table", "flex", "grid", "ruby", ...displayFlow];
+const displayListItem = ["list-item"];
+const displayInternal = [
+  "table-row-group",
+  "table-header-group",
+  "table-footer-group",
+  "table-row",
+  "table-cell",
+  "table-column-group",
+  "table-column",
+  "table-caption",
+  "ruby-base",
+  "ruby-text",
+  "ruby-base-container",
+  "ruby-text-container"
+];
+const displayBox = ["contents", "none"];
+const displayLegacy = ["inline-block", "inline-table", "inline-flex", "inline-grid"];
+const keywords = [
+  ...displayOutside,
+  ...displayInside,
+  ...displayListItem,
+  ...displayInternal,
+  ...displayBox,
+  ...displayLegacy
+];
+
+module.exports.parse = function parse(v) {
+  if (v === "") {
+    return v;
+  }
+  const values = parsers.splitValue(v);
+  switch (values.length) {
+    case 1: {
+      let [v1] = values;
+      v1 = parsers.parseKeyword(v1, keywords);
+      if (v1) {
+        if (v1 === "flow") {
+          return "block";
+        }
+        return v1;
+      }
+      break;
+    }
+    case 2: {
+      let [v1, v2] = values;
+      v1 = parsers.parseKeyword(v1, keywords);
+      v2 = parsers.parseKeyword(v2, keywords);
+      if (!v1 || !v2) {
+        return;
+      }
+      let outerValue = "";
+      let innerValue = "";
+      if (v1 === "list-item") {
+        outerValue = v2;
+        innerValue = v1;
+      } else if (v2 === "list-item") {
+        outerValue = v1;
+        innerValue = v2;
+      } else if (displayOutside.includes(v1)) {
+        outerValue = v1;
+        innerValue = v2;
+      } else if (displayOutside.includes(v2)) {
+        outerValue = v2;
+        innerValue = v1;
+      }
+      if (innerValue === "list-item") {
+        switch (outerValue) {
+          case "block":
+          case "flow": {
+            return innerValue;
+          }
+          case "flow-root":
+          case "inline":
+          case "run-in": {
+            return `${outerValue} ${innerValue}`;
+          }
+          default:
+        }
+      } else if (outerValue === "block") {
+        switch (innerValue) {
+          case "flow": {
+            return outerValue;
+          }
+          case "flow-root":
+          case "flex":
+          case "grid":
+          case "table": {
+            return innerValue;
+          }
+          case "ruby": {
+            return `${outerValue} ${innerValue}`;
+          }
+          default:
+        }
+      } else if (outerValue === "inline") {
+        switch (innerValue) {
+          case "flow": {
+            return outerValue;
+          }
+          case "flow-root": {
+            return `${outerValue}-block`;
+          }
+          case "flex":
+          case "grid":
+          case "table": {
+            return `${outerValue}-${innerValue}`;
+          }
+          case "ruby": {
+            return innerValue;
+          }
+          default:
+        }
+      } else if (outerValue === "run-in") {
+        switch (innerValue) {
+          case "flow": {
+            return outerValue;
+          }
+          case "flow-root":
+          case "flex":
+          case "grid":
+          case "table":
+          case "ruby": {
+            return `${outerValue} ${innerValue}`;
+          }
+          default:
+        }
+      }
+      break;
+    }
+    case 3: {
+      let [v1, v2, v3] = values;
+      v1 = parsers.parseKeyword(v1, keywords);
+      v2 = parsers.parseKeyword(v2, keywords);
+      v3 = parsers.parseKeyword(v3, keywords);
+      if (!v1 || !v2 || !v3) {
+        return;
+      }
+      let outerValue = "";
+      let flowValue = "";
+      let listItemValue = "";
+      if (v1 === "list-item") {
+        listItemValue = v1;
+        if (displayFlow.includes(v2)) {
+          flowValue = v2;
+          outerValue = v3;
+        } else if (displayFlow.includes(v3)) {
+          flowValue = v3;
+          outerValue = v2;
+        }
+      } else if (v2 === "list-item") {
+        listItemValue = v2;
+        if (displayFlow.includes(v1)) {
+          flowValue = v1;
+          outerValue = v3;
+        } else if (displayFlow.includes(v3)) {
+          flowValue = v3;
+          outerValue = v1;
+        }
+      } else if (v3 === "list-item") {
+        listItemValue = v3;
+        if (displayFlow.includes(v1)) {
+          flowValue = v1;
+          outerValue = v2;
+        } else if (displayFlow.includes(v2)) {
+          flowValue = v2;
+          outerValue = v1;
+        }
+      }
+      if (outerValue && flowValue && listItemValue) {
+        switch (outerValue) {
+          case "block": {
+            if (flowValue === "flow") {
+              return listItemValue;
+            }
+            return `${flowValue} ${listItemValue}`;
+          }
+          case "inline":
+          case "run-in": {
+            if (flowValue === "flow") {
+              return `${outerValue} ${listItemValue}`;
+            }
+            return `${outerValue} ${flowValue} ${listItemValue}`;
+          }
+        }
+      }
+      break;
+    }
+    default:
+  }
+};
+
+module.exports.isValid = function isValid(v) {
+  if (v === "") {
+    return true;
+  }
+  return typeof module.exports.parse(v) === "string";
+};
+
+module.exports.definition = {
+  set(v) {
+    v = parsers.prepareValue(v, this._global);
+    this._setProperty("display", module.exports.parse(v));
+  },
+  get() {
+    return this.getPropertyValue("display");
+  },
+  enumerable: true,
+  configurable: true
+};

package/package.json

@@ -6,7 +6,7 @@
     "CSSStyleDeclaration",
     "StyleSheet"
   ],
-  "version": "5.0.0",
+  "version": "5.2.0",
   "homepage": "https://github.com/jsdom/cssstyle",
   "maintainers": [
     {
@@ -37,8 +37,9 @@
   ],
   "main": "./lib/CSSStyleDeclaration.js",
   "dependencies": {
-    "@asamuzakjp/css-color": "^3.2.0",
-    "rrweb-cssom": "^0.8.0"
+    "@asamuzakjp/css-color": "^4.0.3",
+    "@csstools/css-syntax-patches-for-csstree": "^1.0.14",
+    "css-tree": "^3.1.0"
   },
   "devDependencies": {
     "@babel/generator": "^7.26.9",