Add Tailwind support for flex-wrap

packages/backend/src/common/utils.ts

@@ -0,0 +1,39 @@
+/**
+ * Assert a node exists and has a certain property and value
+ *
+ * @param node
+ * @param prop
+ * @param value
+ */
+export function hasProp<
+  T extends Record<string, any> | null | undefined,
+  K extends T extends Record<string, any> ? keyof T : never
+>(
+  node: T,
+  prop: K,
+  value?: T extends Record<string, any> ? T[keyof T] : never
+): boolean {
+  return node !== null && node !== undefined
+    && (prop in node)
+    && (value === undefined ? true : node[prop] === value);
+}
+
+/**
+ * Get a prop from a node if it exists
+ *
+ * @param node
+ * @param prop
+ */
+export function getProp<
+  T extends Record<string, any> | null | undefined,
+  K extends T extends Record<string, any> ? keyof T : never
+>(
+  node: T,
+  prop: K,
+): T extends Record<string, any> ? T[K] : undefined {
+  if (node !== null && node !== undefined && prop in node) {
+    return node[prop];
+  }
+  // @ts-ignore
+  return undefined;
+}

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

@@ -1,4 +1,6 @@
 import { formatMultipleJSXArray } from "../../common/parseJSX";
+import { hasProp, MapInterface } from "../../common/utils";
+
 
 const getFlexDirection = (node: InferredAutoLayoutResult): string =>
   node.layoutMode === "HORIZONTAL" ? "" : "column";
@@ -29,10 +31,24 @@ const getAlignItems = (node: InferredAutoLayoutResult): string => {
   }
 };
 
-const getGap = (node: InferredAutoLayoutResult): string | number =>
-  node.itemSpacing > 0 && node.primaryAxisAlignItems !== "SPACE_BETWEEN"
+const getAlignContent = (node: InferredAutoLayoutResult): string => {
+  switch (node.primaryAxisAlignItems) {
+    case "MIN":
+      return "flex-start";
+    case "CENTER":
+      return "center";
+    case "MAX":
+      return "flex-end";
+    default:
+      return "";
+  }
+};
+
+const getGap = (node: InferredAutoLayoutResult): string | number => {
+  return node.itemSpacing > 0 && node.primaryAxisAlignItems !== "SPACE_BETWEEN"
     ? node.itemSpacing
     : "";
+};
 
 const getFlex = (
   node: SceneNode,
@@ -44,18 +60,26 @@ const getFlex = (
     ? "flex"
     : "inline-flex";
 
+const getFlexWrap = (node: SceneNode) =>
+  "layoutWrap" in node && node.layoutWrap === "WRAP"
+    ? "wrap"
+    : "";
+
 export const htmlAutoLayoutProps = (
   node: SceneNode,
   autoLayout: InferredAutoLayoutResult,
   isJsx: boolean
-): string[] =>
-  formatMultipleJSXArray(
-    {
-      "flex-direction": getFlexDirection(autoLayout),
-      "justify-content": getJustifyContent(autoLayout),
-      "align-items": getAlignItems(autoLayout),
-      gap: getGap(autoLayout),
-      display: getFlex(node, autoLayout),
-    },
-    isJsx
-  );
+): string[] => {
+  const wrap = getFlexWrap(node);
+  const align = wrap ? "align-content" : "align-items";
+  const props = {
+    display: getFlex(node, autoLayout),
+    "flex-direction": getFlexDirection(autoLayout),
+    "justify-content": getJustifyContent(autoLayout),
+    [align]: getAlignItems(autoLayout),
+    "flex-wrap": wrap,
+    gap: getGap(autoLayout),
+  }
+  return formatMultipleJSXArray(props, isJsx);
+};
+

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

@@ -1,54 +1,66 @@
 import { nodeSize } from "../../common/nodeWidthHeight";
 import { formatWithJSX } from "../../common/parseJSX";
 import { isPreviewGlobal } from "../htmlMain";
+import { getProp, hasProp } from "../../common/utils";
+
+type Size = {
+  width: string
+  height: string
+  shrink: string
+}
 
 export const htmlSizePartial = (
   node: SceneNode,
   isJsx: boolean,
   optimizeLayout: boolean
-): { width: string; height: string } => {
-  if (isPreviewGlobal && node.parent === undefined) {
+): Size => {
+  // variables
+  const parent = node.parent;
+
+  if (isPreviewGlobal && parent === undefined) {
     return {
       width: formatWithJSX("width", isJsx, "100%"),
       height: formatWithJSX("height", isJsx, "100%"),
+      shrink: "",
     };
   }
 
+  // variables
   const size = nodeSize(node, optimizeLayout);
-  const nodeParent =
-    (node.parent && optimizeLayout && "inferredAutoLayout" in node.parent
-      ? node.parent.inferredAutoLayout
-      : null) ?? node.parent;
+  const layoutMode = getProp(node.parent as AutoLayoutMixin | undefined, 'layoutMode')
+  const isWrap = hasProp(parent, "layoutWrap", "WRAP");
+
+  // variables
+  let width = "";
+  let height = "";
+  let shrink = "";
 
-  let w = "";
+  // width
   if (typeof size.width === "number") {
-    w = formatWithJSX("width", isJsx, size.width);
+    width = formatWithJSX("width", isJsx, size.width);
   } else if (size.width === "fill") {
-    if (
-      nodeParent &&
-      "layoutMode" in nodeParent &&
-      nodeParent.layoutMode === "HORIZONTAL"
-    ) {
-      w = formatWithJSX("flex", isJsx, "1 1 0");
+    if (layoutMode === "HORIZONTAL") {
+      width = formatWithJSX("flex", isJsx, "1 1 0");
     } else {
-      w = formatWithJSX("align-self", isJsx, "stretch");
+      width = formatWithJSX("align-self", isJsx, "stretch");
     }
   }
 
-  let h = "";
+  // height
   if (typeof size.height === "number") {
-    h = formatWithJSX("height", isJsx, size.height);
+    height = formatWithJSX("height", isJsx, size.height);
   } else if (typeof size.height === "string") {
-    if (
-      nodeParent &&
-      "layoutMode" in nodeParent &&
-      nodeParent.layoutMode === "VERTICAL"
-    ) {
-      h = formatWithJSX("flex", isJsx, "1 1 0");
+    if (layoutMode === "VERTICAL") {
+      height = formatWithJSX("flex", isJsx, "1 1 0");
     } else {
-      h = formatWithJSX("align-self", isJsx, "stretch");
+      height = formatWithJSX("align-self", isJsx, "stretch");
     }
   }
 
-  return { width: w, height: h };
+  // shrink
+  if (layoutMode && !isWrap && (typeof size.height === "number" || typeof size.width === "number")) {
+    shrink = 'flex-shrink: 0';
+  }
+
+  return { width, height, shrink };
 };

packages/backend/src/html/htmlDefaultBuilder.ts

@@ -221,7 +221,7 @@ export class HtmlDefaultBuilder {
   }
 
   size(node: SceneNode, optimize: boolean): this {
-    const { width, height } = htmlSizePartial(node, this.isJSX, optimize);
+    const { width, height, shrink } = htmlSizePartial(node, this.isJSX, optimize);
 
     if (node.type === "TEXT") {
       switch (node.textAutoResize) {
@@ -236,7 +236,7 @@ export class HtmlDefaultBuilder {
           break;
       }
     } else {
-      this.addStyles(width, height);
+      this.addStyles(width, height, shrink);
     }
 
     return this;

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

@@ -14,7 +14,11 @@ export const tailwindSizePartial = (
       : null) ?? node.parent;
 
   let w = "";
-  if (typeof size.width === "number") {
+  if (
+    typeof size.width === "number" &&
+    'layoutSizingHorizontal' in node &&
+    node.layoutSizingHorizontal === 'FIXED'
+  ) {
     w = `w-${pxToLayoutSize(size.width)}`;
   } else if (size.width === "fill") {
     if (