@jsenv/dom 0.7.2 → 0.7.4

package/dist/jsenv_dom.js

@@ -463,6 +463,66 @@ const unitlessProperties = [
   "scaleZ",
 ];
 
+// Well-known CSS units and keywords that indicate a value already has proper formatting
+const cssSizeUnitSet = new Set([
+  "px",
+  "em",
+  "rem",
+  "ex",
+  "ch",
+  "vw",
+  "vh",
+  "vmin",
+  "vmax",
+  "cm",
+  "mm",
+  "in",
+  "pt",
+  "pc",
+]);
+const cssUnitSet = new Set([
+  ...cssSizeUnitSet,
+  "%",
+  // Angle units
+  "deg",
+  "rad",
+  "grad",
+  "turn",
+  // Time units
+  "s",
+  "ms",
+  // Frequency units
+  "Hz",
+  "kHz",
+]);
+const cssKeywordSet = new Set([
+  // Keywords that shouldn't get units
+  "auto",
+  "none",
+  "inherit",
+  "initial",
+  "unset",
+  "revert",
+]);
+
+// Check if value already has a unit or is a keyword
+const hasUnit = (value) => {
+  for (const cssUnit of cssUnitSet) {
+    if (value.endsWith(cssUnit)) {
+      return true;
+    }
+  }
+  return false;
+};
+const isKeyword = (value) => {
+  return cssKeywordSet.has(value);
+};
+
+// url(
+// linear-gradient(
+// radial-gradient(
+// ...
+const STARTS_WITH_CSS_IMAGE_FUNCTION_REGEX = /^[a-z-]+\(/;
 // Normalize a single style value
 const normalizeStyle = (value, propertyName, context = "js") => {
   if (propertyName === "transform") {
@@ -516,6 +576,19 @@ const normalizeStyle = (value, propertyName, context = "js") => {
     return undefined;
   }
 
+  if (propertyName === "backgroundImage") {
+    if (context === "css") {
+      if (
+        typeof value === "string" &&
+        !isKeyword(value) &&
+        !STARTS_WITH_CSS_IMAGE_FUNCTION_REGEX.test(value)
+      ) {
+        return `url(${value})`;
+      }
+    }
+    return value;
+  }
+
   if (pxProperties.includes(propertyName)) {
     return normalizeNumber(value, {
       propertyName,
@@ -544,7 +617,7 @@ const normalizeNumber = (value, { unit, propertyName, preferedType }) => {
   if (typeof value === "string") {
     // Keep strings as-is (including %, em, rem, auto, none, etc.)
     if (preferedType === "string") {
-      if (unit && !value.endsWith(unit)) {
+      if (unit && !hasUnit(value) && !isKeyword(value)) {
         return `${value}${unit}`;
       }
       return value;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/dom",
-  "version": "0.7.2",
+  "version": "0.7.4",
   "description": "DOM utilities for writing frontend code",
   "repository": {
     "type": "git",