cssstyle 5.0.0 → 5.1.0

package/lib/generated/implementedProperties.js

@@ -1,5 +1,5 @@
 "use strict";
-// autogenerated - 2025-07-14
+// autogenerated - 2025-07-22
 // 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,5 +1,5 @@
 "use strict";
-// autogenerated - 2025-07-14
+// autogenerated - 2025-07-22
 // https://www.w3.org/Style/CSS/all-properties.en.html
 
 var external_dependency_parsers_0 = require("../parsers.js");
@@ -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

@@ -7,7 +7,7 @@
 const { resolve: resolveColor, utils } = require("@asamuzakjp/css-color");
 const { asciiLowercase } = require("./utils/strings");
 
-const { cssCalc, isColor, isGradient, splitValue } = utils;
+const { cssCalc, isColor, resolveGradient, splitValue } = utils;
 
 // CSS global values
 // @see https://drafts.csswg.org/css-cascade-5/#defaulting-keywords
@@ -398,7 +398,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 +430,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);
 };

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.1.0",
   "homepage": "https://github.com/jsdom/cssstyle",
   "maintainers": [
     {
@@ -37,7 +37,7 @@
   ],
   "main": "./lib/CSSStyleDeclaration.js",
   "dependencies": {
-    "@asamuzakjp/css-color": "^3.2.0",
+    "@asamuzakjp/css-color": "^4.0.3",
     "rrweb-cssom": "^0.8.0"
   },
   "devDependencies": {