dedupe styleObjectToCssString function

Author: seefeldb

packages/html/src/render.ts

@@ -327,7 +327,9 @@ const listen = (
  * @param styleObject - The style object with React-style camelCase properties
  * @returns A CSS string suitable for the style attribute
  */
-const styleObjectToCssString = (styleObject: Record<string, any>): string => {
+export const styleObjectToCssString = (
+  styleObject: Record<string, any>,
+): string => {
   return Object.entries(styleObject)
     .map(([key, value]) => {
       // Skip if value is null or undefined

packages/html/src/utils.ts

@@ -4,73 +4,7 @@
 import * as htmlparser2 from "htmlparser2";
 import * as domhandler from "domhandler";
 import * as domserializer from "dom-serializer";
-import { RenderOptions } from "./render.ts";
-
-/**
- * Converts a React-style CSS object to a CSS string.
- * Supports vendor prefixes, pixel value shorthand, and comprehensive CSS properties.
- * @param styleObject - The style object with React-style camelCase properties
- * @returns A CSS string suitable for the style attribute
- */
-const styleObjectToCssString = (styleObject: Record<string, any>): string => {
-  return Object.entries(styleObject)
-    .map(([key, value]) => {
-      // Skip if value is null or undefined
-      if (value == null) return "";
-
-      // Convert camelCase to kebab-case, handling vendor prefixes
-      let cssKey = key;
-
-      // CSS custom properties (--*) are case-sensitive and should not be transformed
-      if (!key.startsWith("--")) {
-        // Handle vendor prefixes (WebkitTransform -> -webkit-transform)
-        if (/^(webkit|moz|ms|o)[A-Z]/.test(key)) {
-          cssKey = "-" + key;
-        }
-
-        // Convert camelCase to kebab-case
-        cssKey = cssKey.replace(/([A-Z])/g, "-$1").toLowerCase();
-      }
-
-      // Convert value to string
-      let cssValue = value;
-
-      // Add 'px' suffix to numeric values for properties that need it
-      // Exceptions: properties that accept unitless numbers
-      const unitlessProperties = new Set([
-        "animation-iteration-count",
-        "column-count",
-        "fill-opacity",
-        "flex",
-        "flex-grow",
-        "flex-shrink",
-        "font-weight",
-        "line-height",
-        "opacity",
-        "order",
-        "orphans",
-        "stroke-opacity",
-        "widows",
-        "z-index",
-        "zoom",
-      ]);
-
-      if (
-        typeof value === "number" &&
-        !cssKey.startsWith("--") && // CSS custom properties should never get px
-        !unitlessProperties.has(cssKey) &&
-        value !== 0
-      ) {
-        cssValue = `${value}px`;
-      } else {
-        cssValue = String(value);
-      }
-
-      return `${cssKey}: ${cssValue}`;
-    })
-    .filter((s) => s !== "")
-    .join("; ");
-};
+import { RenderOptions, styleObjectToCssString } from "./render.ts";
 
 function renderOptionsFromDoc(document: globalThis.Document): RenderOptions {
   return {