@effing/canvas 0.31.4 → 0.33.0

package/README.md

@@ -184,14 +184,15 @@ const png = canvas.encodeSync("png");
 
 ### Color & Background
 
-| Property          | Values / Notes                                     |
-| ----------------- | -------------------------------------------------- |
-| `color`           | Any CSS color (inherited)                          |
-| `backgroundColor` | Any CSS color                                      |
-| `opacity`         | Number (0–1)                                       |
-| `background`      | Shorthand → `backgroundColor` or `backgroundImage` |
-| `backgroundImage` | `linear-gradient()`, `radial-gradient()`, `url()`  |
-| `backgroundSize`  | `cover`, `contain`, length, percentage             |
+| Property           | Values / Notes                                                                                         |
+| ------------------ | ------------------------------------------------------------------------------------------------------ |
+| `color`            | Any CSS color (inherited)                                                                              |
+| `backgroundColor`  | Any CSS color                                                                                          |
+| `opacity`          | Number (0–1)                                                                                           |
+| `background`       | Shorthand → decomposed into `backgroundColor`, `backgroundImage`, `backgroundRepeat`, `backgroundSize` |
+| `backgroundImage`  | `linear-gradient()`, `radial-gradient()`, `url()`                                                      |
+| `backgroundSize`   | `cover`, `contain`, length, percentage                                                                 |
+| `backgroundRepeat` | `repeat` (default), `no-repeat`, `repeat-x`, `repeat-y`                                                |
 
 ### Typography
 

package/dist/index.js

@@ -2939,8 +2939,11 @@ async function drawNodeCore(ctx, node, parentX, parentY, offsetX, offsetY, debug
               tileW = image.width;
               tileH = image.height;
             }
-            for (let ty = y; ty < y + height; ty += tileH) {
-              for (let tx = x; tx < x + width; tx += tileW) {
+            const repeat = style.backgroundRepeat ?? "repeat";
+            const stepX = repeat === "repeat" || repeat === "repeat-x" ? tileW : width;
+            const stepY = repeat === "repeat" || repeat === "repeat-y" ? tileH : height;
+            for (let ty = y; ty < y + height; ty += stepY) {
+              for (let tx = x; tx < x + width; tx += stepX) {
                 ctx.drawImage(image, tx, ty, tileW, tileH);
               }
             }
@@ -3243,12 +3246,15 @@ function expandStyle(raw, fontFamilies) {
     delete style.gap;
   }
   if (style.background !== void 0) {
-    const bg = String(style.background);
-    if (bg.includes("gradient(") || bg.includes("url(")) {
-      if (style.backgroundImage === void 0) style.backgroundImage = bg;
-    } else {
-      if (style.backgroundColor === void 0) style.backgroundColor = bg;
-    }
+    const parts = parseBackgroundShorthand(String(style.background));
+    if (parts.image !== void 0 && style.backgroundImage === void 0)
+      style.backgroundImage = parts.image;
+    if (parts.repeat !== void 0 && style.backgroundRepeat === void 0)
+      style.backgroundRepeat = parts.repeat;
+    if (parts.size !== void 0 && style.backgroundSize === void 0)
+      style.backgroundSize = parts.size;
+    if (parts.color !== void 0 && style.backgroundColor === void 0)
+      style.backgroundColor = parts.color;
     delete style.background;
   }
   if (style.overflow !== void 0) {
@@ -3294,6 +3300,105 @@ function expandStyle(raw, fontFamilies) {
   }
   return style;
 }
+var BG_REPEAT_KEYWORDS = /* @__PURE__ */ new Set([
+  "repeat",
+  "no-repeat",
+  "repeat-x",
+  "repeat-y",
+  "space",
+  "round"
+]);
+var BG_POSITION_KEYWORDS = /* @__PURE__ */ new Set([
+  "left",
+  "right",
+  "top",
+  "bottom",
+  "center"
+]);
+var BG_ATTACHMENT_KEYWORDS = /* @__PURE__ */ new Set(["scroll", "fixed", "local"]);
+var BG_BOX_KEYWORDS = /* @__PURE__ */ new Set(["border-box", "padding-box", "content-box"]);
+var BG_IMAGE_FN = /^(?:url|image-set|(?:repeating-)?(?:linear|radial|conic)-gradient)\(/;
+function tokenizeBackground(value) {
+  const tokens = [];
+  let buf = "";
+  for (let i = 0; i < value.length; i++) {
+    const c = value[i];
+    if (c === "(") {
+      let depth = 1;
+      buf += c;
+      i++;
+      while (i < value.length && depth > 0) {
+        const ch = value[i];
+        if (ch === "(") depth++;
+        else if (ch === ")") depth--;
+        buf += ch;
+        i++;
+      }
+      i--;
+    } else if (/\s/.test(c)) {
+      if (buf) {
+        tokens.push(buf);
+        buf = "";
+      }
+    } else if (c === "/") {
+      if (buf) {
+        tokens.push(buf);
+        buf = "";
+      }
+      tokens.push("/");
+    } else {
+      buf += c;
+    }
+  }
+  if (buf) tokens.push(buf);
+  return tokens;
+}
+function parseLayer(value) {
+  const out = {};
+  const sizeTokens = [];
+  let afterSlash = false;
+  for (const tok of tokenizeBackground(value)) {
+    if (tok === "/") {
+      afterSlash = true;
+      continue;
+    }
+    if (afterSlash) {
+      sizeTokens.push(tok);
+      continue;
+    }
+    if (BG_IMAGE_FN.test(tok)) {
+      out.image = tok;
+      continue;
+    }
+    if (tok === "none") continue;
+    if (BG_REPEAT_KEYWORDS.has(tok)) {
+      out.repeat = tok;
+      continue;
+    }
+    if (BG_POSITION_KEYWORDS.has(tok) || BG_ATTACHMENT_KEYWORDS.has(tok) || BG_BOX_KEYWORDS.has(tok) || /^-?\d/.test(tok)) {
+      continue;
+    }
+    out.color = tok;
+  }
+  if (sizeTokens.length > 0) out.size = sizeTokens.join(" ");
+  return out;
+}
+function parseBackgroundShorthand(value) {
+  const layers = splitGradientArgs(value).map((l) => l.trim());
+  if (layers.length <= 1) return parseLayer(layers[0] ?? "");
+  const parsed = layers.map(parseLayer);
+  const out = {};
+  const images = parsed.map((p) => p.image ?? "none");
+  if (images.some((i) => i !== "none")) out.image = images.join(", ");
+  for (const p of parsed) {
+    if (p.repeat !== void 0 && out.repeat === void 0)
+      out.repeat = p.repeat;
+    if (p.size !== void 0 && out.size === void 0) out.size = p.size;
+  }
+  const finalColor = parsed[parsed.length - 1]?.color;
+  if (finalColor !== void 0) out.color = finalColor;
+  return out;
+}
 
 // src/jsx/yoga.ts
 import Yoga, {