continue: get the output for justification to work

bitovi · Jan 30, 2025 · abe23fa · abe23fa
1 parent f69c61c
commit abe23fa
Show file tree

Hide file tree

Showing 8 changed files with 1,641 additions and 16 deletions.
diff --git a/src/processors/README.md b/src/processors/README.md
@@ -0,0 +1,50 @@
+# Layout Processing Logic
+
+## Figma to CSS Flex Layout Mapping
+
+The layout processors convert Figma's Auto Layout properties to CSS Flexbox properties. Here's how the mapping works:
+
+### Display Property
+- When `layoutMode !== "NONE"` -> `display: flex`
+- When `layoutMode === "NONE"` -> no display property output
+
+### Flex Direction
+- `layoutMode === "HORIZONTAL"` -> `flex-direction: row`
+- `layoutMode === "VERTICAL"` -> `flex-direction: column`
+
+### Justify Content (Primary Axis Alignment)
+Controlled by `primaryAxisAlignItems`:
+- `"MIN"` -> `justify-content: flex-start`
+- `"CENTER"` -> `justify-content: center`
+- `"MAX"` -> `justify-content: flex-end`
+- `"SPACE_BETWEEN"` -> `justify-content: space-between`
+
+### Align Items (Counter Axis Alignment)
+Controlled by `counterAxisAlignItems`:
+- `"MIN"` -> `align-items: flex-start`
+- `"CENTER"` -> `align-items: center`
+- `"MAX"` -> `align-items: flex-end`
+- `"BASELINE"` -> `align-items: baseline`
+
+## Complete Mapping Table
+
+| Figma layoutMode | Figma primaryAxisAlignItems | Figma counterAxisAlignItems | CSS display | CSS flex-direction | CSS justify-content | CSS align-items |
+|-----------------|---------------------------|---------------------------|------------|------------------|-------------------|----------------|
+| "HORIZONTAL"    | "MIN"                     | "MIN"                     | flex       | row             | flex-start        | flex-start     |
+| "HORIZONTAL"    | "CENTER"                  | "MIN"                     | flex       | row             | center            | flex-start     |
+| "HORIZONTAL"    | "MAX"                     | "MIN"                     | flex       | row             | flex-end          | flex-start     |
+| "HORIZONTAL"    | "SPACE_BETWEEN"           | "MIN"                     | flex       | row             | space-between     | flex-start     |
+| "VERTICAL"      | "MIN"                     | "MIN"                     | flex       | column          | flex-start        | flex-start     |
+| "VERTICAL"      | "CENTER"                  | "MIN"                     | flex       | column          | center            | flex-start     |
+| "VERTICAL"      | "MAX"                     | "MIN"                     | flex       | column          | flex-end          | flex-start     |
+| "VERTICAL"      | "SPACE_BETWEEN"           | "MIN"                     | flex       | column          | space-between     | flex-start     |
+[...additional combinations omitted for brevity]
+
+## Implementation Notes
+
+1. Layout properties are only processed for nodes with Auto Layout enabled (`layoutMode !== "NONE"`)
+2. The primary axis alignment maps to justify-content
+3. The counter axis alignment maps to align-items
+4. Gap is handled separately using the itemSpacing property
+
+See `layout.processor.ts` for the implementation. 
diff --git a/src/processors/font.processor.ts b/src/processors/font.processor.ts
@@ -170,5 +170,61 @@ export const fontProcessors: StyleProcessor[] = [
       }
       return null;
     }
-  }
+  },
+  {
+    property: "display",
+    bindingKey: undefined,
+    process: async (_, node?: SceneNode): Promise<ProcessedValue | null> => {
+      if (node?.type === "TEXT" && 'textAlignVertical' in node) {
+        return { value: "flex", rawValue: "flex" };
+      }
+      return null;
+    }
+  },
+  {
+    property: "flex-direction",
+    bindingKey: undefined,
+    process: async (_, node?: SceneNode): Promise<ProcessedValue | null> => {
+      if (node?.type === "TEXT" && 'textAlignVertical' in node) {
+        return { value: "column", rawValue: "column" };
+      }
+      return null;
+    }
+  },
+  {
+    property: "justify-content",
+    bindingKey: undefined,
+    process: async (_, node?: SceneNode): Promise<ProcessedValue | null> => {
+      if (node?.type === "TEXT" && 'textAlignVertical' in node) {
+        const alignMap = {
+          TOP: "flex-start",
+          CENTER: "center",
+          BOTTOM: "flex-end"
+        };
+        const value = alignMap[node.textAlignVertical];
+        return { value, rawValue: value };
+      }
+      return null;
+    }
+  },
+  {
+    property: "width",
+    bindingKey: undefined,
+    process: async (_, node?: SceneNode): Promise<ProcessedValue | null> => {
+      if (node?.type === "TEXT" && 'width' in node) {
+        return { value: `${node.width}px`, rawValue: `${node.width}px` };
+      }
+      return null;
+    }
+  },
+  {
+    property: "height",
+    bindingKey: undefined,
+    process: async (_, node?: SceneNode): Promise<ProcessedValue | null> => {
+      if (node?.type === "TEXT" && 'height' in node) {
+        return { value: `${node.height}px`, rawValue: `${node.height}px` };
+      }
+      return null;
+    }
+  },
 ]; 
diff --git a/src/processors/layout.processor.ts b/src/processors/layout.processor.ts
@@ -1,14 +1,15 @@
-import { StyleProcessor, ProcessedValue, VariableToken } from '../types';
+import { StyleProcessor, ProcessedValue } from '../types';
 
 export const layoutProcessors: StyleProcessor[] = [
   {
     property: "display",
     bindingKey: undefined,
     process: async (_, node?: SceneNode): Promise<ProcessedValue | null> => {
-      if (node && 'layoutMode' in node && node.layoutMode !== "NONE") {
-        const value = node.layoutAlign !== "STRETCH" ? "inline-flex" : "flex";
+      if (node && ('layoutMode' in node) && node.layoutMode !== "NONE") {
+        const value = "flex";
         return { value, rawValue: value };
       }
+
       return null;
     }
   },

diff --git a/src/tests/__snapshots__/padding-processors.test.ts.snap b/src/tests/__snapshots__/padding-processors.test.ts.snap
@@ -9,70 +9,70 @@ $border-size-primary: 4px
 
 // Generated SCSS Mixins
 @mixin padding-left-right
- display: inline-flex
+ display: flex
  flex-direction: row
  gap: 8px
  padding: 0px 16px
  background: #ffffff
 
 @mixin padding-top-bottom
- display: inline-flex
+ display: flex
  flex-direction: row
  gap: 8px
  padding: 24px 0px
  background: #ffffff
 
 @mixin padding-top-bottom-left-right
- display: inline-flex
+ display: flex
  flex-direction: row
  gap: 8px
  padding: 16px
  background: #ffffff
 
 @mixin padding-topright-bottomleft
- display: inline-flex
+ display: flex
  flex-direction: row
  gap: 8px
  padding: 16px 16px 24px 24px
  background: #ffffff
 
 @mixin padding-topbottom-leftright
- display: inline-flex
+ display: flex
  flex-direction: row
  gap: 8px
  padding: 24px 16px
  background: #ffffff
 
 @mixin padding-left-right-variable
- display: inline-flex
+ display: flex
  flex-direction: row
  gap: 8px
  padding: $size-null $corner-radius-primary
  background: #ffffff
 
 @mixin padding-top-bottom-variable
- display: inline-flex
+ display: flex
  flex-direction: row
  gap: 8px
  padding: $corner-radius-primary $size-null
  background: #ffffff
 
 @mixin padding-top-bottom-left-right-variable
- display: inline-flex
+ display: flex
  flex-direction: row
  gap: 8px
  padding: $corner-radius-primary
  background: #ffffff
 
 @mixin padding-topright-bottomleft-variable
- display: inline-flex
+ display: flex
  flex-direction: row
  gap: 8px
  padding: $corner-radius-primary $corner-radius-primary $border-size-primary $border-size-primary
  background: #ffffff
 
 @mixin padding-topbottom-leftright-variable
- display: inline-flex
+ display: flex
  flex-direction: row
  gap: 8px
  padding: $border-size-primary $corner-radius-primary

diff --git a/src/tests/__snapshots__/text-processors.test.ts.snap b/src/tests/__snapshots__/text-processors.test.ts.snap
@@ -1,5 +1,77 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Text Processors Text Align Processor should process paragraph alignment correctly: paragraph-alignment 1`] = `
+"// Generated SCSS Variables
+$text-primary: #a3adad
+$size-16: 16px
+
+// Generated SCSS Mixins
+@mixin frame--top
+ padding: 0px
+ background: #ffffff
+
+@mixin autolayout--top
+ display: flex
+ flex-direction: column
+ gap: 10px
+ padding: 0px 30px
+ background: #ffffff
+ justify-content: center
+
+@mixin paragraph-alignment-top
+ color: $text-primary
+ font-family: Inter
+ font-size: $size-16
+ font-weight: 400
+ line-height: normal
+ width: 100px
+ height: 100px
+
+@mixin frame--middle
+ padding: 0px
+ background: #ffffff
+
+@mixin autolayout--middle
+ display: flex
+ flex-direction: column
+ gap: 10px
+ padding: 0px 30px
+ background: #ffffff
+ justify-content: center
+
+@mixin paragraph-alignment-center
+ color: $text-primary
+ font-family: Inter
+ font-size: $size-16
+ font-weight: 400
+ line-height: normal
+ width: 100px
+ height: 100px
+
+@mixin frame--bottom
+ padding: 0px
+ background: #ffffff
+
+@mixin autolayout--bottom
+ display: flex
+ flex-direction: column
+ gap: 10px
+ padding: 0px 30px
+ background: #ffffff
+ justify-content: center
+
+@mixin paragraph-alignment-bottom
+ color: $text-primary
+ font-family: Inter
+ font-size: $size-16
+ font-weight: 400
+ line-height: normal
+ width: 100px
+ height: 100px
+
+"
+`;
+
 exports[`Text Processors Text Align Processor should process text alignment correctly: text-alignment 1`] = `
 "// Generated SCSS Variables
 $text-primary: #bfc5c6
@@ -12,27 +84,35 @@ $size-16: 16px
  font-size: 16px
  font-weight: 400
  line-height: normal
+ width: 100px
+ height: 100px
 
 @mixin paragraph-justification-right
  color: $text-primary
  font-family: Inter
  font-size: 16px
  font-weight: 400
  line-height: normal
+ width: 100px
+ height: 100px
 
 @mixin paragraph-justification-center
  color: $text-primary
  font-family: Inter
  font-size: $size-16
  font-weight: 400
  line-height: normal
+ width: 100px
+ height: 100px
 
 @mixin paragraph-justification-left
  color: $text-primary
  font-family: Inter
  font-size: $size-16
  font-weight: 400
  line-height: normal
+ width: 100px
+ height: 100px
 
 "
 `;