@effing/canvas 0.22.3 → 0.23.0

package/README.md

@@ -192,24 +192,27 @@ const png = canvas.encodeSync("png");
 
 ### Typography
 
-| Property         | Values / Notes                                                |
-| ---------------- | ------------------------------------------------------------- |
-| `fontFamily`     | Font name (inherited)                                         |
-| `fontSize`       | Number or CSS length (inherited)                              |
-| `fontWeight`     | Numeric weight (inherited)                                    |
-| `fontStyle`      | `normal`, `italic` (inherited)                                |
-| `textAlign`      | `left`, `center`, `right`, `justify` (inherited)              |
-| `textDecoration` | String (inherited)                                            |
-| `textTransform`  | `none`, `uppercase`, `lowercase`, `capitalize` (inherited)    |
-| `lineHeight`     | Number or string (inherited)                                  |
-| `letterSpacing`  | Number or CSS length (inherited)                              |
-| `whiteSpace`     | `normal`, `nowrap`, `pre`, `pre-wrap`, `pre-line` (inherited) |
-| `wordBreak`      | `normal`, `break-all`, `break-word`, `keep-all` (inherited)   |
-| `textOverflow`   | `clip`, `ellipsis` (inherited)                                |
-| `lineClamp`      | Number — max visible lines (adds ellipsis)                    |
-| `textBox`        | Shorthand for `textBoxTrim` and `textBoxEdge`                 |
-| `textBoxTrim`    | `none`, `trim-start`, `trim-end`, `trim-both` (inherited)     |
-| `textBoxEdge`    | e.g. `"cap alphabetic"` (inherited)                           |
+| Property                | Values / Notes                                                |
+| ----------------------- | ------------------------------------------------------------- |
+| `fontFamily`            | Font name (inherited)                                         |
+| `fontSize`              | Number or CSS length (inherited)                              |
+| `fontWeight`            | Numeric weight (inherited)                                    |
+| `fontStyle`             | `normal`, `italic` (inherited)                                |
+| `textAlign`             | `left`, `center`, `right`, `justify` (inherited)              |
+| `textDecoration`        | String (inherited)                                            |
+| `textTransform`         | `none`, `uppercase`, `lowercase`, `capitalize` (inherited)    |
+| `lineHeight`            | Number or string (inherited)                                  |
+| `letterSpacing`         | Number or CSS length (inherited)                              |
+| `whiteSpace`            | `normal`, `nowrap`, `pre`, `pre-wrap`, `pre-line` (inherited) |
+| `wordBreak`             | `normal`, `break-all`, `break-word`, `keep-all` (inherited)   |
+| `textOverflow`          | `clip`, `ellipsis` (inherited)                                |
+| `lineClamp`             | Number — max visible lines (adds ellipsis)                    |
+| `textBox`               | Shorthand for `textBoxTrim` and `textBoxEdge`                 |
+| `textBoxTrim`           | `none`, `trim-start`, `trim-end`, `trim-both` (inherited)     |
+| `textBoxEdge`           | e.g. `"cap alphabetic"` (inherited)                           |
+| `WebkitTextStroke`      | Shorthand, e.g. `"2px red"` (inherited)                       |
+| `WebkitTextStrokeWidth` | CSS length (inherited)                                        |
+| `WebkitTextStrokeColor` | Any CSS color (inherited)                                     |
 
 ### Effects
 

package/dist/index.js

@@ -23,6 +23,229 @@ function renderLottieFrame(ctx, animation, frame) {
 // src/jsx/draw/index.ts
 import { loadImage as loadImage3 } from "@napi-rs/canvas";
 
+// src/jsx/style/compute.ts
+var ROOT_FONT_SIZE = 16;
+var DEFAULT_STYLE = {
+  display: "flex",
+  flexDirection: "row",
+  flexWrap: "nowrap",
+  flexGrow: 0,
+  flexShrink: 0,
+  alignItems: "stretch",
+  justifyContent: "flex-start",
+  position: "relative",
+  fontSize: ROOT_FONT_SIZE,
+  fontWeight: 400,
+  fontStyle: "normal",
+  color: "black",
+  lineHeight: "normal",
+  textAlign: "left",
+  whiteSpace: "normal",
+  wordBreak: "normal",
+  textOverflow: "clip",
+  opacity: 1,
+  overflow: "visible"
+};
+var INHERITABLE_PROPS = [
+  "color",
+  "fontSize",
+  "fontFamily",
+  "fontWeight",
+  "fontStyle",
+  "textAlign",
+  "textTransform",
+  "textDecoration",
+  "lineHeight",
+  "letterSpacing",
+  "whiteSpace",
+  "wordBreak",
+  "textOverflow",
+  "lineClamp",
+  "textBoxTrim",
+  "textBoxEdge",
+  "WebkitTextStrokeWidth",
+  "WebkitTextStrokeColor"
+];
+function resolveStyle(rawStyle, parentStyle) {
+  const style = { ...rawStyle };
+  for (const prop of INHERITABLE_PROPS) {
+    if (style[prop] === void 0 && parentStyle[prop] !== void 0) {
+      style[prop] = parentStyle[prop];
+    }
+  }
+  if (typeof style.fontSize === "string") {
+    const parentFontSize = typeof parentStyle.fontSize === "number" ? parentStyle.fontSize : ROOT_FONT_SIZE;
+    const resolved = resolveUnit(
+      style.fontSize,
+      0,
+      0,
+      parentFontSize,
+      ROOT_FONT_SIZE
+    );
+    style.fontSize = typeof resolved === "number" ? resolved : parentFontSize;
+  }
+  if (typeof style.lineHeight === "string") {
+    const str = style.lineHeight;
+    if (str.endsWith("%")) {
+      style.lineHeight = parseFloat(str) / 100;
+    } else {
+      const parsed = parseFloat(str);
+      if (!isNaN(parsed)) {
+        style.lineHeight = parsed;
+      }
+    }
+  }
+  if (typeof style.letterSpacing === "string") {
+    const currentFontSize = typeof style.fontSize === "number" ? style.fontSize : typeof parentStyle.fontSize === "number" ? parentStyle.fontSize : ROOT_FONT_SIZE;
+    const resolved = resolveUnit(
+      style.letterSpacing,
+      0,
+      0,
+      currentFontSize,
+      ROOT_FONT_SIZE
+    );
+    if (typeof resolved === "number") {
+      style.letterSpacing = resolved;
+    }
+  }
+  return style;
+}
+var DIMENSION_PROPS = [
+  "width",
+  "height",
+  "minWidth",
+  "minHeight",
+  "maxWidth",
+  "maxHeight",
+  "top",
+  "right",
+  "bottom",
+  "left",
+  "marginTop",
+  "marginRight",
+  "marginBottom",
+  "marginLeft",
+  "paddingTop",
+  "paddingRight",
+  "paddingBottom",
+  "paddingLeft",
+  "rowGap",
+  "columnGap",
+  "flexBasis",
+  "borderTopWidth",
+  "borderRightWidth",
+  "borderBottomWidth",
+  "borderLeftWidth",
+  "borderTopLeftRadius",
+  "borderTopRightRadius",
+  "borderBottomRightRadius",
+  "borderBottomLeftRadius",
+  "WebkitTextStrokeWidth"
+];
+function resolveUnit(value, viewportWidth, viewportHeight, fontSize, rootFontSize) {
+  if (value.endsWith("%") || value === "auto") return value;
+  if (value.endsWith("vmin")) {
+    const n = parseFloat(value);
+    return isNaN(n) ? value : n / 100 * Math.min(viewportWidth, viewportHeight);
+  }
+  if (value.endsWith("vmax")) {
+    const n = parseFloat(value);
+    return isNaN(n) ? value : n / 100 * Math.max(viewportWidth, viewportHeight);
+  }
+  if (value.endsWith("vw")) {
+    const n = parseFloat(value);
+    return isNaN(n) ? value : n / 100 * viewportWidth;
+  }
+  if (value.endsWith("vh")) {
+    const n = parseFloat(value);
+    return isNaN(n) ? value : n / 100 * viewportHeight;
+  }
+  if (value.endsWith("rem")) {
+    const n = parseFloat(value);
+    return isNaN(n) ? value : n * rootFontSize;
+  }
+  if (value.endsWith("em")) {
+    const n = parseFloat(value);
+    return isNaN(n) ? value : n * fontSize;
+  }
+  if (value.endsWith("px")) {
+    const n = parseFloat(value);
+    return isNaN(n) ? value : n;
+  }
+  if (value.endsWith("pt")) {
+    const n = parseFloat(value);
+    return isNaN(n) ? value : n * (96 / 72);
+  }
+  if (value.endsWith("pc")) {
+    const n = parseFloat(value);
+    return isNaN(n) ? value : n * 16;
+  }
+  if (value.endsWith("in")) {
+    const n = parseFloat(value);
+    return isNaN(n) ? value : n * 96;
+  }
+  if (value.endsWith("cm")) {
+    const n = parseFloat(value);
+    return isNaN(n) ? value : n * (96 / 2.54);
+  }
+  if (value.endsWith("mm")) {
+    const n = parseFloat(value);
+    return isNaN(n) ? value : n * (96 / 25.4);
+  }
+  return value;
+}
+function resolveUnits(style, viewportWidth, viewportHeight, rootFontSize = ROOT_FONT_SIZE) {
+  const fontSize = typeof style.fontSize === "number" ? style.fontSize : rootFontSize;
+  for (const prop of DIMENSION_PROPS) {
+    const value = style[prop];
+    if (typeof value !== "string") continue;
+    const resolved = resolveUnit(
+      value,
+      viewportWidth,
+      viewportHeight,
+      fontSize,
+      rootFontSize
+    );
+    if (resolved !== value) {
+      style[prop] = resolved;
+    }
+  }
+  if (style.transform) {
+    style.transform = resolveTransformUnits(
+      style.transform,
+      viewportWidth,
+      viewportHeight,
+      fontSize,
+      rootFontSize
+    );
+  }
+  if (style.transformOrigin) {
+    style.transformOrigin = resolveTransformUnits(
+      style.transformOrigin,
+      viewportWidth,
+      viewportHeight,
+      fontSize,
+      rootFontSize
+    );
+  }
+  return style;
+}
+function resolveTransformUnits(transform, viewportWidth, viewportHeight, fontSize, rootFontSize) {
+  return transform.replace(
+    /(-?\d*\.?\d+)(vw|vh|vmin|vmax|em|rem|px|pt|pc|in|cm|mm)\b/g,
+    (match) => {
+      const resolved = resolveUnit(
+        match,
+        viewportWidth,
+        viewportHeight,
+        fontSize,
+        rootFontSize
+      );
+      return typeof resolved === "number" ? String(resolved) : match;
+    }
+  );
+}
+
 // src/jsx/font.ts
 import { GlobalFonts } from "@napi-rs/canvas";
 
@@ -312,6 +535,17 @@ function layoutText(text, style, maxWidth, ctx, emojiEnabled) {
   const wordBreak = style.wordBreak ?? "normal";
   const textOverflow = style.textOverflow ?? "clip";
   const textDecoration = style.textDecoration;
+  let textStrokeWidth;
+  const rawStrokeWidth = style.WebkitTextStrokeWidth;
+  if (rawStrokeWidth !== void 0) {
+    if (typeof rawStrokeWidth === "number") {
+      textStrokeWidth = rawStrokeWidth;
+    } else {
+      const resolved = resolveUnit(String(rawStrokeWidth), 0, 0, fontSize, 16);
+      textStrokeWidth = typeof resolved === "number" ? resolved : void 0;
+    }
+  }
+  const textStrokeColor = style.WebkitTextStrokeColor;
   const measure = emojiEnabled ? (word, ls) => emojiAwareMeasureWord(
     word,
     fontSize,
@@ -432,7 +666,9 @@ function layoutText(text, style, maxWidth, ctx, emojiEnabled) {
       ascent: metrics.ascent,
       textDecoration,
       letterSpacing,
-      lineIndex: i
+      lineIndex: i,
+      textStrokeWidth,
+      textStrokeColor
     });
     totalHeight += lineHeightPx;
     maxLineWidth = Math.max(maxLineWidth, lineWidth);
@@ -2168,14 +2404,42 @@ async function drawText(ctx, segments, offsetX, offsetY, textShadow, emojiStyle)
     ctx.fillStyle = seg.color;
     const x = offsetX + seg.x;
     const y = offsetY + seg.y;
+    const hasStroke = seg.textStrokeWidth !== void 0 && seg.textStrokeWidth > 0;
     if (emojiStyle) {
-      await drawSegmentWithEmoji(ctx, seg, x, y, textShadow, emojiStyle);
+      await drawSegmentWithEmoji(
+        ctx,
+        seg,
+        x,
+        y,
+        textShadow,
+        emojiStyle,
+        hasStroke
+      );
     } else if (seg.letterSpacing && seg.letterSpacing !== 0) {
+      if (hasStroke) {
+        drawStrokeWithLetterSpacing(
+          ctx,
+          seg.text,
+          x,
+          y,
+          seg.letterSpacing,
+          seg.textStrokeWidth,
+          seg.textStrokeColor ?? seg.color
+        );
+      }
       drawTextWithLetterSpacing(ctx, seg.text, x, y, seg.letterSpacing);
     } else {
       if (textShadow) {
         drawTextShadow(ctx, seg.text, x, y, textShadow);
       }
+      if (hasStroke) {
+        ctx.save();
+        ctx.lineWidth = seg.textStrokeWidth;
+        ctx.strokeStyle = seg.textStrokeColor ?? seg.color;
+        ctx.lineJoin = "round";
+        ctx.strokeText(seg.text, x, y);
+        ctx.restore();
+      }
       ctx.fillText(seg.text, x, y);
     }
     if (seg.textDecoration) {
@@ -2183,7 +2447,7 @@ async function drawText(ctx, segments, offsetX, offsetY, textShadow, emojiStyle)
     }
   }
 }
-async function drawSegmentWithEmoji(ctx, seg, x, y, textShadow, emojiStyle) {
+async function drawSegmentWithEmoji(ctx, seg, x, y, textShadow, emojiStyle, hasStroke) {
   const letterSpacing = seg.letterSpacing ?? 0;
   const runs = splitTextIntoRuns(
     seg.text,
@@ -2199,6 +2463,26 @@ async function drawSegmentWithEmoji(ctx, seg, x, y, textShadow, emojiStyle) {
       if (textShadow) {
         drawTextShadow(ctx, run.text, x + run.x, y, textShadow);
       }
+      if (hasStroke) {
+        if (letterSpacing !== 0) {
+          drawStrokeWithLetterSpacing(
+            ctx,
+            run.text,
+            x + run.x,
+            y,
+            letterSpacing,
+            seg.textStrokeWidth,
+            seg.textStrokeColor ?? seg.color
+          );
+        } else {
+          ctx.save();
+          ctx.lineWidth = seg.textStrokeWidth;
+          ctx.strokeStyle = seg.textStrokeColor ?? seg.color;
+          ctx.lineJoin = "round";
+          ctx.strokeText(run.text, x + run.x, y);
+          ctx.restore();
+        }
+      }
       if (letterSpacing !== 0) {
         drawTextWithLetterSpacing(ctx, run.text, x + run.x, y, letterSpacing);
       } else {
@@ -2224,6 +2508,19 @@ function drawTextWithLetterSpacing(ctx, text, x, y, letterSpacing) {
     currentX += metrics.width + letterSpacing;
   }
 }
+function drawStrokeWithLetterSpacing(ctx, text, x, y, letterSpacing, strokeWidth, strokeColor) {
+  ctx.save();
+  ctx.lineWidth = strokeWidth;
+  ctx.strokeStyle = strokeColor;
+  ctx.lineJoin = "round";
+  let currentX = x;
+  for (const char of text) {
+    ctx.strokeText(char, currentX, y);
+    const metrics = ctx.measureText(char);
+    currentX += metrics.width + letterSpacing;
+  }
+  ctx.restore();
+}
 function drawTextShadow(ctx, text, x, y, shadow) {
   const parts = shadow.match(
     /(-?\d+(?:\.\d+)?)\s*px?\s+(-?\d+(?:\.\d+)?)\s*px?\s+(-?\d+(?:\.\d+)?)\s*px?\s+(.*)/
@@ -2783,6 +3080,20 @@ function expandStyle(raw, fontFamilies) {
     }
     delete style.textBox;
   }
+  if (style.WebkitTextStroke !== void 0) {
+    const val = String(style.WebkitTextStroke).trim();
+    const match = val.match(/^(\S+)\s+(.+)$/);
+    if (match) {
+      if (style.WebkitTextStrokeWidth === void 0)
+        style.WebkitTextStrokeWidth = parseValue(match[1]);
+      if (style.WebkitTextStrokeColor === void 0)
+        style.WebkitTextStrokeColor = match[2];
+    } else {
+      if (style.WebkitTextStrokeWidth === void 0)
+        style.WebkitTextStrokeWidth = parseValue(val);
+    }
+    delete style.WebkitTextStroke;
+  }
   if (typeof style.fontFamily === "string") {
     const families = style.fontFamily.split(",").map((s) => s.trim().replace(/^['"]|['"]$/g, "")).filter(Boolean);
     if (fontFamilies) {
@@ -2796,226 +3107,6 @@ function expandStyle(raw, fontFamilies) {
   return style;
 }
 
-// src/jsx/style/compute.ts
-var ROOT_FONT_SIZE = 16;
-var DEFAULT_STYLE = {
-  display: "flex",
-  flexDirection: "row",
-  flexWrap: "nowrap",
-  flexGrow: 0,
-  flexShrink: 0,
-  alignItems: "stretch",
-  justifyContent: "flex-start",
-  position: "relative",
-  fontSize: ROOT_FONT_SIZE,
-  fontWeight: 400,
-  fontStyle: "normal",
-  color: "black",
-  lineHeight: "normal",
-  textAlign: "left",
-  whiteSpace: "normal",
-  wordBreak: "normal",
-  textOverflow: "clip",
-  opacity: 1,
-  overflow: "visible"
-};
-var INHERITABLE_PROPS = [
-  "color",
-  "fontSize",
-  "fontFamily",
-  "fontWeight",
-  "fontStyle",
-  "textAlign",
-  "textTransform",
-  "textDecoration",
-  "lineHeight",
-  "letterSpacing",
-  "whiteSpace",
-  "wordBreak",
-  "textOverflow",
-  "lineClamp",
-  "textBoxTrim",
-  "textBoxEdge"
-];
-function resolveStyle(rawStyle, parentStyle) {
-  const style = { ...rawStyle };
-  for (const prop of INHERITABLE_PROPS) {
-    if (style[prop] === void 0 && parentStyle[prop] !== void 0) {
-      style[prop] = parentStyle[prop];
-    }
-  }
-  if (typeof style.fontSize === "string") {
-    const parentFontSize = typeof parentStyle.fontSize === "number" ? parentStyle.fontSize : ROOT_FONT_SIZE;
-    const resolved = resolveUnit(
-      style.fontSize,
-      0,
-      0,
-      parentFontSize,
-      ROOT_FONT_SIZE
-    );
-    style.fontSize = typeof resolved === "number" ? resolved : parentFontSize;
-  }
-  if (typeof style.lineHeight === "string") {
-    const str = style.lineHeight;
-    if (str.endsWith("%")) {
-      style.lineHeight = parseFloat(str) / 100;
-    } else {
-      const parsed = parseFloat(str);
-      if (!isNaN(parsed)) {
-        style.lineHeight = parsed;
-      }
-    }
-  }
-  if (typeof style.letterSpacing === "string") {
-    const currentFontSize = typeof style.fontSize === "number" ? style.fontSize : typeof parentStyle.fontSize === "number" ? parentStyle.fontSize : ROOT_FONT_SIZE;
-    const resolved = resolveUnit(
-      style.letterSpacing,
-      0,
-      0,
-      currentFontSize,
-      ROOT_FONT_SIZE
-    );
-    if (typeof resolved === "number") {
-      style.letterSpacing = resolved;
-    }
-  }
-  return style;
-}
-var DIMENSION_PROPS = [
-  "width",
-  "height",
-  "minWidth",
-  "minHeight",
-  "maxWidth",
-  "maxHeight",
-  "top",
-  "right",
-  "bottom",
-  "left",
-  "marginTop",
-  "marginRight",
-  "marginBottom",
-  "marginLeft",
-  "paddingTop",
-  "paddingRight",
-  "paddingBottom",
-  "paddingLeft",
-  "rowGap",
-  "columnGap",
-  "flexBasis",
-  "borderTopWidth",
-  "borderRightWidth",
-  "borderBottomWidth",
-  "borderLeftWidth",
-  "borderTopLeftRadius",
-  "borderTopRightRadius",
-  "borderBottomRightRadius",
-  "borderBottomLeftRadius"
-];
-function resolveUnit(value, viewportWidth, viewportHeight, fontSize, rootFontSize) {
-  if (value.endsWith("%") || value === "auto") return value;
-  if (value.endsWith("vmin")) {
-    const n = parseFloat(value);
-    return isNaN(n) ? value : n / 100 * Math.min(viewportWidth, viewportHeight);
-  }
-  if (value.endsWith("vmax")) {
-    const n = parseFloat(value);
-    return isNaN(n) ? value : n / 100 * Math.max(viewportWidth, viewportHeight);
-  }
-  if (value.endsWith("vw")) {
-    const n = parseFloat(value);
-    return isNaN(n) ? value : n / 100 * viewportWidth;
-  }
-  if (value.endsWith("vh")) {
-    const n = parseFloat(value);
-    return isNaN(n) ? value : n / 100 * viewportHeight;
-  }
-  if (value.endsWith("rem")) {
-    const n = parseFloat(value);
-    return isNaN(n) ? value : n * rootFontSize;
-  }
-  if (value.endsWith("em")) {
-    const n = parseFloat(value);
-    return isNaN(n) ? value : n * fontSize;
-  }
-  if (value.endsWith("px")) {
-    const n = parseFloat(value);
-    return isNaN(n) ? value : n;
-  }
-  if (value.endsWith("pt")) {
-    const n = parseFloat(value);
-    return isNaN(n) ? value : n * (96 / 72);
-  }
-  if (value.endsWith("pc")) {
-    const n = parseFloat(value);
-    return isNaN(n) ? value : n * 16;
-  }
-  if (value.endsWith("in")) {
-    const n = parseFloat(value);
-    return isNaN(n) ? value : n * 96;
-  }
-  if (value.endsWith("cm")) {
-    const n = parseFloat(value);
-    return isNaN(n) ? value : n * (96 / 2.54);
-  }
-  if (value.endsWith("mm")) {
-    const n = parseFloat(value);
-    return isNaN(n) ? value : n * (96 / 25.4);
-  }
-  return value;
-}
-function resolveUnits(style, viewportWidth, viewportHeight, rootFontSize = ROOT_FONT_SIZE) {
-  const fontSize = typeof style.fontSize === "number" ? style.fontSize : rootFontSize;
-  for (const prop of DIMENSION_PROPS) {
-    const value = style[prop];
-    if (typeof value !== "string") continue;
-    const resolved = resolveUnit(
-      value,
-      viewportWidth,
-      viewportHeight,
-      fontSize,
-      rootFontSize
-    );
-    if (resolved !== value) {
-      style[prop] = resolved;
-    }
-  }
-  if (style.transform) {
-    style.transform = resolveTransformUnits(
-      style.transform,
-      viewportWidth,
-      viewportHeight,
-      fontSize,
-      rootFontSize
-    );
-  }
-  if (style.transformOrigin) {
-    style.transformOrigin = resolveTransformUnits(
-      style.transformOrigin,
-      viewportWidth,
-      viewportHeight,
-      fontSize,
-      rootFontSize
-    );
-  }
-  return style;
-}
-function resolveTransformUnits(transform, viewportWidth, viewportHeight, fontSize, rootFontSize) {
-  return transform.replace(
-    /(-?\d*\.?\d+)(vw|vh|vmin|vmax|em|rem|px|pt|pc|in|cm|mm)\b/g,
-    (match) => {
-      const resolved = resolveUnit(
-        match,
-        viewportWidth,
-        viewportHeight,
-        fontSize,
-        rootFontSize
-      );
-      return typeof resolved === "number" ? String(resolved) : match;
-    }
-  );
-}
-
 // src/jsx/yoga.ts
 import Yoga, {
   Align,
@@ -3399,14 +3490,22 @@ async function buildNode(element, parentStyle, yogaNode, viewportWidth, viewport
   const rawChildren = props.children;
   if (rawChildren !== void 0 && rawChildren !== null) {
     const childArray = Array.isArray(rawChildren) ? rawChildren.flat(Infinity) : [rawChildren];
+    const ws = style.whiteSpace;
+    const collapsesWhitespace = ws === void 0 || ws === "normal" || ws === "nowrap" || ws === "pre-line";
+    let prevWasBr = false;
     for (const child of childArray) {
       if (child === null || child === void 0 || typeof child === "boolean")
         continue;
+      let processedChild = child;
+      if (prevWasBr && collapsesWhitespace && typeof child === "string") {
+        processedChild = child.trimStart();
+      }
+      prevWasBr = isBrElement(child);
       const childYogaNode = createYogaNode();
       yogaNode.insertChild(childYogaNode, children.length);
       children.push(
         await buildNode(
-          child,
+          processedChild,
           style,
           childYogaNode,
           viewportWidth,
@@ -3443,6 +3542,11 @@ function extractLayout(node, yogaNode) {
     height: layout.height
   };
 }
+function isBrElement(child) {
+  if (child === null || child === void 0 || typeof child !== "object")
+    return false;
+  return child.type === "br";
+}
 function extractTextContent(children) {
   if (children === void 0 || children === null) return void 0;
   if (typeof children === "string") return children;