Rewrite ring into outline

Author: bernaferrari

packages/backend/src/html/htmlDefaultBuilder.ts

@@ -163,9 +163,16 @@ export class HtmlDefaultBuilder {
 
     const strokes = ("strokes" in node && node.strokes) || undefined;
     const color = htmlColorFromFills(strokes, settings);
+    if (!color) {
+      return this;
+    }
     const borderStyle =
       "dashPattern" in node && node.dashPattern.length > 0 ? "dotted" : "solid";
 
+    const strokeAlign = "strokeAlign" in node ? node.strokeAlign : "INSIDE";
+    const layoutMode = "layoutMode" in node ? node.layoutMode : "NONE";
+
+    // Function to create border value string
     const consolidateBorders = (border: number): string =>
       [`${numberToFixedString(border)}px`, color, borderStyle]
         .filter((d) => d)
@@ -176,10 +183,40 @@ export class HtmlDefaultBuilder {
         return this;
       }
       const weight = commonBorder.all;
-      this.addStyles(
-        formatWithJSX("border", this.isJSX, consolidateBorders(weight)),
-      );
+
+      if (
+        strokeAlign === "CENTER" ||
+        strokeAlign === "OUTSIDE" ||
+        (strokeAlign === "INSIDE" && layoutMode === "NONE")
+      ) {
+        this.addStyles(
+          formatWithJSX("outline", this.isJSX, consolidateBorders(weight)),
+        );
+        if (strokeAlign === "CENTER") {
+          this.addStyles(
+            formatWithJSX(
+              "outline-offset",
+              this.isJSX,
+              `${numberToFixedString(-weight / 2)}px`,
+            ),
+          );
+        } else if (strokeAlign === "INSIDE") {
+          this.addStyles(
+            formatWithJSX(
+              "outline-offset",
+              this.isJSX,
+              `${numberToFixedString(-weight)}px`,
+            ),
+          );
+        }
+      } else {
+        // Default: use regular border on autolayout + strokeAlign: inside
+        this.addStyles(
+          formatWithJSX("border", this.isJSX, consolidateBorders(weight)),
+        );
+      }
     } else {
+      // For non-uniform borders, always use individual border properties
       if (commonBorder.left !== 0) {
         this.addStyles(
           formatWithJSX(
@@ -280,7 +317,12 @@ export class HtmlDefaultBuilder {
   }
 
   buildBackgroundBlendModes(paintArray: ReadonlyArray<Paint>): string {
-    if (paintArray.length === 0) {
+    if (
+      paintArray.length === 0 ||
+      paintArray.every(
+        (d) => d.blendMode === "NORMAL" || d.blendMode === "PASS_THROUGH",
+      )
+    ) {
       return "";
     }
 

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

@@ -64,7 +64,12 @@ export const tailwindBlendMode = (node: MinimalBlendMixin): string => {
 export const tailwindBackgroundBlendMode = (
   paintArray: ReadonlyArray<Paint>,
 ): string => {
-  if (paintArray.length === 0) {
+  if (
+    paintArray.length === 0 ||
+    paintArray.every(
+      (d) => d.blendMode === "NORMAL" || d.blendMode === "PASS_THROUGH",
+    )
+  ) {
     return "";
   }
 

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

@@ -1,30 +1,31 @@
 import { getCommonRadius } from "../../common/commonRadius";
 import { commonStroke } from "../../common/commonStroke";
 import {
-  nearestValue,
   pxToBorderRadius,
   pxToBorderWidth,
-  pxToRing,
+  pxToOutline,
 } from "../conversionTables";
 import { numberToFixedString } from "../../common/numToAutoFixed";
 import { addWarning } from "../../common/commonConversionWarnings";
 
-const getBorder = (weight: number, kind: string, isRing: boolean = false) => {
-  // Use ring utilities for outside strokes
-  if (isRing) {
-    // Special case: ring (without width) is 3px in Tailwind
-    if (weight === 3) {
-      return "ring";
-    }
+const getBorder = (
+  weight: number,
+  kind: string,
+  useOutline: boolean = false,
+  isBoxShadow: boolean = false,
+): string => {
+  // For box-shadow (inside stroke on non-autolayout), return empty string as we'll handle separately
+  if (isBoxShadow) {
+    return "";
+  }
 
-    const ringWidth = pxToRing(weight);
-    if (ringWidth === null) {
-      return `ring-[${numberToFixedString(weight)}px]`;
-    } else if (ringWidth === "3") {
-      // Ring is 3px
-      return `ring`;
+  // Use outline utilities for outside/center strokes
+  if (useOutline) {
+    const outlineWidth = pxToOutline(weight);
+    if (outlineWidth === null) {
+      return `outline-[${numberToFixedString(weight)}px]`;
     } else {
-      return `ring-${ringWidth}`;
+      return `outline-${outlineWidth}`;
     }
   }
 
@@ -52,41 +53,66 @@ const getBorder = (weight: number, kind: string, isRing: boolean = false) => {
 export const tailwindBorderWidth = (
   node: SceneNode,
 ): {
-  isRing: boolean;
+  isOutline: boolean;
   property: string;
+  shadowProperty?: string; // This can be removed if not used elsewhere
 } => {
   const commonBorder = commonStroke(node);
   if (!commonBorder) {
     return {
-      isRing: false,
+      isOutline: false,
       property: "",
     };
   }
 
-  // Check if stroke is outside
-  const isRing =
-    "strokeAlign" in node &&
-    (node.strokeAlign === "OUTSIDE" || node.strokeAlign === "CENTER");
+  // Check stroke alignment and layout mode
+  const strokeAlign = "strokeAlign" in node ? node.strokeAlign : "INSIDE";
+  const layoutMode = "layoutMode" in node ? node.layoutMode : "NONE";
 
   if ("all" in commonBorder) {
     if (commonBorder.all === 0) {
       return {
-        isRing: false,
+        isOutline: false,
         property: "",
       };
     }
-    return {
-      isRing,
-      property: getBorder(commonBorder.all, "", isRing),
-    };
+
+    const weight = commonBorder.all;
+
+    if (
+      strokeAlign === "CENTER" ||
+      strokeAlign === "OUTSIDE" ||
+      (strokeAlign === "INSIDE" && layoutMode === "NONE")
+    ) {
+      // For CENTER, OUTSIDE, or INSIDE+NONE, use outline
+      const property = getBorder(weight, "", true);
+      let offsetProperty = "";
+
+      if (strokeAlign === "CENTER") {
+        offsetProperty = `outline-offset-[-${numberToFixedString(weight / 2)}px]`;
+      } else if (strokeAlign === "INSIDE") {
+        offsetProperty = `outline-offset-[-${numberToFixedString(weight)}px]`;
+      }
+
+      return {
+        isOutline: true,
+        property: offsetProperty ? `${property} ${offsetProperty}` : property,
+      };
+    } else {
+      // Default case: use normal border (for INSIDE + AUTO_LAYOUT)
+      return {
+        isOutline: false,
+        property: getBorder(weight, "", false),
+      };
+    }
   } else {
+    // For non-uniform borders, we only support border (not outline)
     addWarning(
       'Non-uniform borders are only supported with strokeAlign set to "inside". Will paint inside.',
     );
   }
 
-  // If borders are non-uniform, always use border utilities for better control
-  // regardless of whether the stroke is outside or not
+  // Handle non-uniform borders with individual border properties
   const comp = [];
   if (commonBorder.left !== 0) {
     comp.push(getBorder(commonBorder.left, "-l"));
@@ -102,7 +128,7 @@ export const tailwindBorderWidth = (
   }
 
   return {
-    isRing,
+    isOutline: false,
     property: comp.join(" "),
   };
 };

packages/backend/src/tailwind/conversionTables.ts

@@ -112,8 +112,8 @@ export const pxToBorderWidth = (value: number): string | null => {
   return pxToTailwind(value, config.border);
 };
 
-export const pxToRing = (value: number): string | null => {
-  return pxToTailwind(value, config.ring);
+export const pxToOutline = (value: number): string | null => {
+  return pxToTailwind(value, config.outline);
 };
 
 export const pxToBlur = (value: number): string | null => {

packages/backend/src/tailwind/tailwindConfig.ts

@@ -397,11 +397,10 @@ const border = {
   8: "8",
 };
 
-const ring = {
+const outline = {
   0: "0",
   1: "1",
   2: "2",
-  3: "3",
   4: "4",
   8: "8",
 };
@@ -418,5 +417,5 @@ export const config = {
   fontWeight,
   fontFamily,
   border,
-  ring,
+  outline,
 };

packages/backend/src/tailwind/tailwindDefaultBuilder.ts

@@ -115,9 +115,9 @@ export class TailwindDefaultBuilder {
 
   border(): this {
     if ("strokes" in this.node) {
-      const { isRing, property } = tailwindBorderWidth(this.node);
+      const { isOutline, property } = tailwindBorderWidth(this.node);
       this.addAttributes(property);
-      this.customColor(this.node.strokes, isRing ? "ring" : "border");
+      this.customColor(this.node.strokes, isOutline ? "outline" : "border");
     }
 
     return this;

packages/types/src/types.ts

@@ -189,7 +189,7 @@ export interface TailwindTextConversion {
   contrastBlack: number;
 }
 
-export type TailwindColorType = "text" | "bg" | "border" | "ring";
+export type TailwindColorType = "text" | "bg" | "border" | "outline";
 
 export type SwiftUIModifier = [
   string,