Add flex-wrap, fix HUG

Author: bernaferrari

packages/backend/src/code.ts

@@ -452,7 +452,10 @@ export const run = async (settings: PluginSettings) => {
   const { framework } = settings;
   const selection = figma.currentPage.selection;
 
-  if (selection.length > 1) {
+  if (selection.length === 0) {
+    postEmptyMessage();
+    return;
+  } else if (selection.length > 1) {
     addWarning(
       "Ungrouped elements may have incorrect positioning. If this happens, try wrapping the selection in a Frame or Group.",
     );

packages/backend/src/common/commonChildrenOrder.ts

@@ -18,11 +18,6 @@ export const commonSortChildrenWhenInferredAutoLayout = (
       // NONE is a bug from Figma.
       case "NONE":
       case "VERTICAL":
-        console.log(
-          "ordering",
-          children.map((c) => c.name),
-          children.sort((a, b) => a.y - b.y).map((c) => c.name),
-        );
         return children.sort((a, b) => a.y - b.y);
     }
   }

packages/backend/src/common/nodeWidthHeight.ts

@@ -1,34 +1,35 @@
 import { Size } from "types";
 
 export const nodeSize = (node: SceneNode, optimizeLayout: boolean): Size => {
-  const nodeAuto =
-    (optimizeLayout && "inferredAutoLayout" in node
-      ? node.inferredAutoLayout
-      : null) ?? node;
-
-  // Check for explicit layout sizing properties
-  if (
-    "layoutSizingHorizontal" in nodeAuto &&
-    "layoutSizingVertical" in nodeAuto
-  ) {
+  if ("layoutSizingHorizontal" in node && "layoutSizingVertical" in node) {
     const width =
-      nodeAuto.layoutSizingHorizontal === "FILL"
+      node.layoutSizingHorizontal === "FILL"
         ? "fill"
-        : nodeAuto.layoutSizingHorizontal === "HUG"
+        : node.layoutSizingHorizontal === "HUG"
           ? null
           : node.width;
 
     const height =
-      nodeAuto.layoutSizingVertical === "FILL"
+      node.layoutSizingVertical === "FILL"
         ? "fill"
-        : nodeAuto.layoutSizingVertical === "HUG"
+        : node.layoutSizingVertical === "HUG"
           ? null
           : node.height;
 
     return { width, height };
   }
 
-  if ("layoutMode" in nodeAuto && nodeAuto.layoutMode === "NONE") {
+  const nodeAuto =
+    (optimizeLayout && "inferredAutoLayout" in node
+      ? node.inferredAutoLayout
+      : null) ?? node;
+
+  if (
+    nodeAuto &&
+    typeof nodeAuto === "object" &&
+    "layoutMode" in nodeAuto &&
+    nodeAuto.layoutMode === "NONE"
+  ) {
     return { width: node.width, height: node.height };
   }
 

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

@@ -37,6 +37,27 @@ const getGap = (node: InferredAutoLayoutResult): string | number =>
     ? node.itemSpacing
     : "";
 
+const getFlexWrap = (node: InferredAutoLayoutResult): string =>
+  node.layoutWrap === "WRAP" ? "wrap" : "";
+
+const getAlignContent = (node: InferredAutoLayoutResult): string => {
+  if (node.layoutWrap !== "WRAP") return "";
+  
+  switch (node.counterAxisAlignItems) {
+    case undefined:
+    case "MIN":
+      return "flex-start";
+    case "CENTER":
+      return "center";
+    case "MAX":
+      return "flex-end";
+    case "BASELINE":
+      return "baseline";
+    default:
+      return "normal";
+  }
+};
+
 const getFlex = (
   node: SceneNode,
   autoLayout: InferredAutoLayoutResult,
@@ -59,6 +80,8 @@ export const htmlAutoLayoutProps = (
       "align-items": getAlignItems(autoLayout),
       gap: getGap(autoLayout),
       display: getFlex(node, autoLayout),
+      "flex-wrap": getFlexWrap(autoLayout),
+      "align-content": getAlignContent(autoLayout),
     },
     settings.htmlGenerationMode === "jsx",
   );

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

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

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

@@ -36,6 +36,27 @@ const getGap = (node: InferredAutoLayoutResult): string =>
     ? `gap-${pxToLayoutSize(node.itemSpacing)}`
     : "";
 
+const getFlexWrap = (node: InferredAutoLayoutResult): string =>
+  node.layoutWrap === "WRAP" ? "flex-wrap" : "";
+
+const getAlignContent = (node: InferredAutoLayoutResult): string => {
+  if (node.layoutWrap !== "WRAP") return "";
+
+  switch (node.counterAxisAlignItems) {
+    case undefined:
+    case "MIN":
+      return "content-start";
+    case "CENTER":
+      return "content-center";
+    case "MAX":
+      return "content-end";
+    case "BASELINE":
+      return "content-baseline";
+    default:
+      return "content-normal";
+  }
+};
+
 const getFlex = (
   node: SceneNode,
   autoLayout: InferredAutoLayoutResult,
@@ -56,6 +77,8 @@ export const tailwindAutoLayoutProps = (
     getJustifyContent(autoLayout),
     getAlignItems(autoLayout),
     getGap(autoLayout),
+    getFlexWrap(autoLayout),
+    getAlignContent(autoLayout),
   ].filter(Boolean);
 
   return classes.join(" ");

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

@@ -66,7 +66,6 @@ export const tailwindSolidColor = (
   fill: SolidPaint | ColorStop,
   kind: TailwindColorType,
 ): string => {
-  console.log("fill is", fill);
   const { colorName } = getColorInfo(fill);
   const effectiveOpacity = calculateEffectiveOpacity(fill);
 

packages/backend/src/tailwind/conversionTables.ts

@@ -78,8 +78,6 @@ const pxToTailwind = (
   const keys = Object.keys(conversionMap).map((d) => +d);
   const convertedValue = exactValue(value, keys);
 
-  console.log("convertedValue", convertedValue, value, keys);
-
   if (convertedValue) {
     return conversionMap[convertedValue];
   } else if (localTailwindSettings.roundTailwindValues) {
@@ -176,11 +174,6 @@ export function getColorInfo(fill: SolidPaint | ColorStop) {
   let hex: string = "#" + rgbTo6hex(fill.color);
   let meta: string = "";
 
-  console.log(
-    "(fill as any).variableColorName",
-    fill,
-    (fill as any).variableColorName,
-  );
   // variable
   if ((fill as any).variableColorName) {
     // Use pre-computed variable name if available

packages/backend/src/tailwind/tailwindTextBuilder.ts

@@ -58,8 +58,6 @@ export class TailwindTextBuilder extends TailwindDefaultBuilder {
         .filter(Boolean)
         .join(" ");
 
-      console.log("styleClasses", styleClasses, segment);
-
       const charsWithLineBreak = segment.characters.split("\n").join("<br/>");
       return {
         style: styleClasses,

packages/plugin-ui/src/components/CodePanel.tsx

@@ -135,11 +135,6 @@ const CodePanel = (props: CodePanelProps) => {
     };
   }, [preferenceOptions, selectPreferenceOptions, selectedFramework]);
 
-  // Handle custom prefix change
-  const handleCustomPrefixChange = (newValue: string) => {
-    onPreferenceChanged("customTailwindPrefix", newValue);
-  };
-
   return (
     <div className="w-full flex flex-col gap-2 mt-2">
       <div className="flex items-center justify-between w-full">