nuxt-og-image 6.7.1 → 6.7.2

package/dist/module.json

@@ -4,7 +4,7 @@
     "nuxt": ">=3.16.0"
   },
   "configKey": "ogImage",
-  "version": "6.7.1",
+  "version": "6.7.2",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/server/og-image/takumi/nodes.d.ts

@@ -1,3 +1,4 @@
 import type { Node } from '@takumi-rs/helpers';
-import type { OgImageRenderEventContext } from '../../../types.js';
+import type { OgImageRenderEventContext, VNode } from '../../../types.js';
 export declare function createTakumiNodes(ctx: OgImageRenderEventContext): Promise<Node>;
+export declare function vnodeToTakumiNode(vnode: VNode, inheritedFontSize: number, inheritedColor?: string): Promise<Node>;

package/dist/runtime/server/og-image/takumi/nodes.js

@@ -43,8 +43,13 @@ function extractFontSize(props, style) {
   }
   return void 0;
 }
-async function vnodeToTakumiNode(vnode, inheritedFontSize) {
+function extractColor(style) {
+  const color = style?.color;
+  return typeof color === "string" && color ? color : void 0;
+}
+export async function vnodeToTakumiNode(vnode, inheritedFontSize, inheritedColor) {
   const { style, children, class: cls, tw, src, ...rest } = vnode.props;
+  const nodeColor = extractColor(style) ?? inheritedColor;
   const baseMetadata = {
     tw: tw || cls || void 0,
     style
@@ -56,7 +61,7 @@ async function vnodeToTakumiNode(vnode, inheritedFontSize) {
     return {
       ...baseMetadata,
       type: "image",
-      src: vnodeToHtmlString(vnode),
+      src: vnodeToHtmlString(vnode, nodeColor),
       // When em/rem + explicit parent font size → resolve to px.
       // When em/rem + default font size → leave undefined (takumi handles natively).
       // Otherwise → use standard resolution chain (numeric attrs → style → viewBox).
@@ -99,7 +104,7 @@ async function vnodeToTakumiNode(vnode, inheritedFontSize) {
     const takumiChildren = [];
     for (const child of children) {
       if (child && typeof child === "object")
-        takumiChildren.push(await vnodeToTakumiNode(child, childFontSize));
+        takumiChildren.push(await vnodeToTakumiNode(child, childFontSize, nodeColor));
       else if (typeof child === "string" && child.trim())
         takumiChildren.push({ type: "text", text: child.trim() });
     }
@@ -114,9 +119,13 @@ async function vnodeToTakumiNode(vnode, inheritedFontSize) {
     type: "container"
   };
 }
-function vnodeToHtmlString(vnode) {
+function resolveCurrentColor(value, color) {
+  return color && typeof value === "string" && value.toLowerCase() === "currentcolor" ? color : value;
+}
+function vnodeToHtmlString(vnode, inheritedColor) {
   const { style, children, ...attrs } = vnode.props;
   const attrParts = [];
+  const nodeColor = extractColor(style) ?? inheritedColor;
   const kebabCase = (str) => str.replace(RE_UPPERCASE, (m) => `-${m.toLowerCase()}`);
   if (vnode.type === "svg") {
     if (!attrs.xmlns)
@@ -138,7 +147,7 @@ function vnodeToHtmlString(vnode) {
     return val;
   };
   if (style && typeof style === "object") {
-    const styleStr = Object.entries(style).filter(([_, v]) => v !== void 0 && v !== null && v !== "").map(([k, v]) => `${kebabCase(k)}:${resolveValue(v)}`).join(";");
+    const styleStr = Object.entries(style).filter(([_, v]) => v !== void 0 && v !== null && v !== "").map(([k, v]) => `${kebabCase(k)}:${resolveValue(resolveCurrentColor(v, nodeColor))}`).join(";");
     if (styleStr)
       attrParts.push(`style="${styleStr.replace(RE_DQUOTE, """)}"`);
   } else if (typeof style === "string") {
@@ -148,14 +157,14 @@ function vnodeToHtmlString(vnode) {
     if (key === "tw" || key === "class" || val == null)
       continue;
     const finalKey = SVG_CAMEL_ATTR_VALUES.has(key) ? key : kebabCase(key);
-    attrParts.push(`${finalKey}="${String(resolveValue(val)).replace(RE_DQUOTE, """)}"`);
+    attrParts.push(`${finalKey}="${String(resolveValue(resolveCurrentColor(val, nodeColor))).replace(RE_DQUOTE, """)}"`);
   }
   const open = attrParts.length ? `<${vnode.type} ${attrParts.join(" ")}>` : `<${vnode.type}>`;
   const inner = Array.isArray(children) ? children.map((c) => {
     if (typeof c === "string")
       return c.replace(RE_AMP, "&amp;").replace(RE_LT, "&lt;").replace(RE_GT, "&gt;");
     if (c && typeof c === "object")
-      return vnodeToHtmlString(c);
+      return vnodeToHtmlString(c, nodeColor);
     return "";
   }).join("") : typeof children === "string" ? children.replace(RE_AMP, "&amp;").replace(RE_LT, "&lt;").replace(RE_GT, "&gt;") : "";
   return `${open}${inner}</${vnode.type}>`;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxt-og-image",
   "type": "module",
-  "version": "6.7.1",
+  "version": "6.7.2",
   "description": "Enlightened OG Image generation for Nuxt.",
   "author": {
     "website": "https://harlanzw.com",
@@ -118,7 +118,7 @@
     "magicast": "^0.5.3",
     "mocked-exports": "^0.1.1",
     "nuxt-site-config": "^4.1.1",
-    "nuxtseo-shared": "^5.3.1",
+    "nuxtseo-shared": "^5.3.2",
     "nypm": "^0.6.8",
     "ofetch": "^1.5.1",
     "ohash": "^2.0.11",
@@ -187,7 +187,7 @@
     "lightningcss": "^1.32.0",
     "nitropack": "^2.13.4",
     "nuxt": "^4.4.8",
-    "nuxtseo-layer-devtools": "^5.3.1",
+    "nuxtseo-layer-devtools": "^5.3.2",
     "playwright": "^1.61.1",
     "playwright-core": "^1.61.1",
     "sass": "^1.101.0",