Add background-blend-mode

Author: bernaferrari

packages/backend/src/code.ts

@@ -44,8 +44,12 @@ const memoizedVariableToColorName = async (
   variableId: string,
 ): Promise<string> => {
   if (!variableCache.has(variableId)) {
-    const colorName = await variableToColorName(variableId);
+    const colorName = (await variableToColorName(variableId)).replaceAll(
+      ",",
+      "",
+    );
     variableCache.set(variableId, colorName);
+    return colorName;
   }
   return variableCache.get(variableId)!;
 };
@@ -255,9 +259,18 @@ const processNodePair = async (
           const mutableSegment = Object.assign({}, segment);
 
           if (settings.useColorVariables && segment.fills) {
-            mutableSegment.fills = segment.fills.map((d) => ({ ...d }));
-            await Promise.all(
-              mutableSegment.fills.map((fill) => processColorVariables(fill)),
+            mutableSegment.fills = await Promise.all(
+              segment.fills.map(async (d) => {
+                if (
+                  d.blendMode !== "PASS_THROUGH" &&
+                  d.blendMode !== "NORMAL"
+                ) {
+                  addWarning("BlendMode is not supported in Text colors");
+                }
+                const fill = { ...d };
+                await processColorVariables(fill);
+                return fill;
+              }),
             );
           }
 
@@ -298,8 +311,12 @@ const processNodePair = async (
   if ("width" in figmaNode) {
     jsonNode.width = figmaNode.width;
     jsonNode.height = figmaNode.height;
-    jsonNode.x = figmaNode.x;
-    jsonNode.y = figmaNode.y;
+    // jsonNode.x = figmaNode.x;
+    // jsonNode.y = figmaNode.y;
+  }
+
+  if ("rotation" in jsonNode) {
+    jsonNode.rotation = jsonNode.rotation * (180 / Math.PI);
   }
 
   if ("individualStrokeWeights" in jsonNode) {

packages/backend/src/common/convertFontWeight.ts

@@ -3,7 +3,7 @@ import { FontWeightNumber } from "types";
 // Convert generic named weights to numbers, which is the way tailwind understands
 export const convertFontWeight = (weight: string): FontWeightNumber | null => {
   // change extra-light to extralight
-  weight = weight.replace(" ", "").replace("-", "").toLowerCase();
+  weight = weight.replaceAll(" ", "").replaceAll("-", "").toLowerCase();
   switch (weight) {
     case "thin":
       return "100";

packages/backend/src/html/builderImpl/htmlColor.ts

@@ -243,3 +243,52 @@ export const htmlDiamondGradient = (fill: GradientPaint): string => {
     )
     .join(", ");
 };
+
+export const buildBackgroundValues = (
+  paintArray: ReadonlyArray<Paint> | PluginAPI["mixed"],
+  settings: HTMLSettings,
+): string => {
+  if (paintArray === figma.mixed) {
+    return "";
+  }
+
+  // If only one fill, just use plain color/gradient
+  if (paintArray.length === 1) {
+    const paint = paintArray[0];
+    if (paint.type === "SOLID") {
+      return htmlColorFromFills(paintArray, settings);
+    } else if (
+      paint.type === "GRADIENT_LINEAR" ||
+      paint.type === "GRADIENT_RADIAL" ||
+      paint.type === "GRADIENT_ANGULAR" ||
+      paint.type === "GRADIENT_DIAMOND"
+    ) {
+      return htmlGradientFromFills(paint);
+    }
+    return "";
+  }
+
+  // Reverse the array to match CSS layering (first is top-most in CSS)
+  const styles = [...paintArray].reverse().map((paint, index) => {
+    if (paint.type === "SOLID") {
+      // For multiple fills, always convert solid colors to linear gradients
+      // to ensure proper layering in CSS backgrounds
+      const color = htmlColorFromFills([paint], settings);
+      if (index === 0) {
+        return `linear-gradient(0deg, ${color} 0%, ${color} 100%)`;
+      }
+
+      return color;
+    } else if (
+      paint.type === "GRADIENT_LINEAR" ||
+      paint.type === "GRADIENT_RADIAL" ||
+      paint.type === "GRADIENT_ANGULAR" ||
+      paint.type === "GRADIENT_DIAMOND"
+    ) {
+      return htmlGradientFromFills(paint);
+    }
+    return ""; // Handle other paint types safely
+  });
+
+  return styles.filter((value) => value !== "").join(", ");
+};

packages/backend/src/html/builderImpl/htmlSize.ts

@@ -16,7 +16,6 @@ export const htmlSizePartial = (
   }
 
   const size = nodeSize(node);
-  console.log("size", size);
   const nodeParent =
     (node.parent && optimizeLayout && "inferredAutoLayout" in node.parent
       ? node.parent.inferredAutoLayout

packages/backend/src/html/htmlDefaultBuilder.ts

@@ -7,8 +7,8 @@ import {
   htmlBlendMode,
 } from "./builderImpl/htmlBlend";
 import {
+  buildBackgroundValues,
   htmlColorFromFills,
-  htmlGradientFromFills,
 } from "./builderImpl/htmlColor";
 import { htmlPadding } from "./builderImpl/htmlPadding";
 import { htmlSizePartial } from "./builderImpl/htmlSize";
@@ -31,7 +31,6 @@ import { HTMLSettings } from "types";
 import {
   cssCollection,
   generateUniqueClassName,
-  getSvelteClassName,
   stylesToCSS,
 } from "./htmlMain";
 
@@ -122,12 +121,6 @@ export class HtmlDefaultBuilder {
     this.autoLayoutPadding();
     this.position();
     this.blend();
-
-    // Add z-index if we have a custom value from the itemReverseZIndex handling
-    if ((this.node as any).customZIndex !== undefined) {
-      this.addStyles(`z-index: ${(this.node as any).customZIndex}`);
-    }
-
     return this;
   }
 
@@ -229,8 +222,11 @@ export class HtmlDefaultBuilder {
 
   position(): this {
     const { node, optimizeLayout, isJSX } = this;
-    if (commonIsAbsolutePosition(node, optimizeLayout)) {
+    const isAbsolutePosition = commonIsAbsolutePosition(node, optimizeLayout);
+    console.log("isAbsolutePosition", isAbsolutePosition, "for node", node);
+    if (isAbsolutePosition) {
       const { x, y } = getCommonPositionValue(node);
+      console.log("x, y, are", x, y);
 
       this.addStyles(
         formatWithJSX("left", isJSX, x),
@@ -267,44 +263,39 @@ export class HtmlDefaultBuilder {
       return this;
     }
 
-    const backgroundValues = this.buildBackgroundValues(paintArray);
+    const backgroundValues = buildBackgroundValues(paintArray, this.settings);
     if (backgroundValues) {
       this.addStyles(formatWithJSX("background", this.isJSX, backgroundValues));
+
+      // Add blend mode property if multiple fills exist with different blend modes
+      if (paintArray !== figma.mixed) {
+        const blendModes = this.buildBackgroundBlendModes(paintArray);
+        if (blendModes) {
+          this.addStyles(
+            formatWithJSX("background-blend-mode", this.isJSX, blendModes),
+          );
+        }
+      }
     }
 
     return this;
   }
 
-  buildBackgroundValues(
-    paintArray: ReadonlyArray<Paint> | PluginAPI["mixed"],
-  ): string {
-    if (paintArray === figma.mixed) {
+  buildBackgroundBlendModes(paintArray: ReadonlyArray<Paint>): string {
+    if (paintArray.length === 0) {
       return "";
     }
 
-    // If one fill and it's a solid, return the solid RGB color
-    if (paintArray.length === 1 && paintArray[0].type === "SOLID") {
-      return htmlColorFromFills(paintArray, this.settings);
-    }
-
-    // If multiple fills, deal with gradients and convert solid colors to a "dumb" linear-gradient
-    const styles = paintArray.map((paint) => {
-      if (paint.type === "SOLID") {
-        const color = htmlColorFromFills([paint], this.settings);
-        return `linear-gradient(0deg, ${color} 0%, ${color} 100%)`;
-      } else if (
-        paint.type === "GRADIENT_LINEAR" ||
-        paint.type === "GRADIENT_RADIAL" ||
-        paint.type === "GRADIENT_ANGULAR" ||
-        paint.type === "GRADIENT_DIAMOND"
-      ) {
-        return htmlGradientFromFills(paint);
+    // Reverse the array to match the background order
+    const blendModes = [...paintArray].reverse().map((paint) => {
+      if (paint.blendMode === "PASS_THROUGH") {
+        return "normal";
       }
 
-      return ""; // Handle other paint types safely
+      return paint.blendMode?.toLowerCase();
     });
 
-    return styles.filter((value) => value !== "").join(", ");
+    return blendModes.join(", ");
   }
 
   shadow(): this {
@@ -374,7 +365,7 @@ export class HtmlDefaultBuilder {
           formatWithJSX(
             "filter",
             this.isJSX,
-            `blur(${numberToFixedString(blur.radius)}px)`,
+            `blur(${numberToFixedString(blur.radius / 2)}px)`,
           ),
         );
       }
@@ -387,7 +378,7 @@ export class HtmlDefaultBuilder {
           formatWithJSX(
             "backdrop-filter",
             this.isJSX,
-            `blur(${numberToFixedString(backgroundBlur.radius)}px)`,
+            `blur(${numberToFixedString(backgroundBlur.radius / 2)}px)`,
           ),
         );
       }

packages/backend/src/tailwind/builderImpl/tailwindBlend.ts

@@ -55,6 +55,30 @@ export const tailwindBlendMode = (node: MinimalBlendMixin): string => {
   return "";
 };
 
+/**
+ * Convert a Figma background blend mode to a Tailwind bg-blend-* class
+ *
+ * @param paintArray The array of paint fills that may have blend modes
+ * @returns Tailwind background blend mode class if applicable
+ */
+export const tailwindBackgroundBlendMode = (
+  paintArray: ReadonlyArray<Paint>,
+): string => {
+  if (paintArray.length === 0) {
+    return "";
+  }
+
+  // Get the top fill's blend mode (in Figma, the last item is the top one)
+  const topFill = paintArray[paintArray.length - 1];
+  if (topFill.blendMode === "NORMAL" || topFill.blendMode === "PASS_THROUGH") {
+    return "";
+  }
+
+  const blendMode =
+    topFill.blendMode?.toLowerCase()?.replaceAll("_", "-") || "normal";
+  return `bg-blend-${blendMode}`;
+};
+
 /**
  * https://tailwindcss.com/docs/visibility/
  * example: invisible

packages/backend/src/tailwind/tailwindDefaultBuilder.ts

@@ -8,6 +8,7 @@ import {
   tailwindRotation,
   tailwindOpacity,
   tailwindBlendMode,
+  tailwindBackgroundBlendMode,
 } from "./builderImpl/tailwindBlend";
 import {
   tailwindBorderWidth,
@@ -167,6 +168,14 @@ export class TailwindDefaultBuilder {
       let gradient = "";
       if (kind === "bg") {
         gradient = tailwindGradientFromFills(paint);
+
+        // Add background blend mode class if applicable
+        if (paint !== figma.mixed) {
+          const blendModeClass = tailwindBackgroundBlendMode(paint);
+          if (blendModeClass) {
+            this.addAttributes(blendModeClass);
+          }
+        }
       }
       if (gradient) {
         this.addAttributes(gradient);
@@ -234,9 +243,11 @@ export class TailwindDefaultBuilder {
   blur() {
     const { node } = this;
     if ("effects" in node && node.effects.length > 0) {
-      const blur = node.effects.find((e) => e.type === "LAYER_BLUR");
+      const blur = node.effects.find(
+        (e) => e.type === "LAYER_BLUR" && e.visible,
+      );
       if (blur) {
-        const blurValue = pxToBlur(blur.radius);
+        const blurValue = pxToBlur(blur.radius / 2);
         if (blurValue) {
           this.addAttributes(
             blurValue === "blur" ? "blur" : `blur-${blurValue}`,
@@ -245,10 +256,10 @@ export class TailwindDefaultBuilder {
       }
 
       const backgroundBlur = node.effects.find(
-        (e) => e.type === "BACKGROUND_BLUR",
+        (e) => e.type === "BACKGROUND_BLUR" && e.visible,
       );
       if (backgroundBlur) {
-        const backgroundBlurValue = pxToBlur(backgroundBlur.radius);
+        const backgroundBlurValue = pxToBlur(backgroundBlur.radius / 2);
         if (backgroundBlurValue) {
           this.addAttributes(
             `backdrop-blur${

packages/backend/src/tailwind/tailwindTextBuilder.ts

@@ -137,8 +137,8 @@ export class TailwindTextBuilder extends TailwindDefaultBuilder {
       }
 
       const value = node.fontName.style
-        .replace("italic", "")
-        .replace(" ", "")
+        .replaceAll("italic", "")
+        .replaceAll(" ", "")
         .toLowerCase();
 
       this.addAttributes(`font-${value}`);