Add code formatting for HTML and Tailwind!

Fix border-radius missing in HTML.

Fix missing border-radius in Vector.

Add rose color to Vectors (which are unsupported).

Fix Text when parent is set to fill (all frameworks).

Fix color attribute in HTML's Text being misnamed.

Fix textHeight in HTML.

Fix justify layout in HTML.

Change: when single item layout is set to justify, center it.

Close bernaferrari#24.

__tests__/altNodes/altConversions.test.ts

@@ -1,3 +1,4 @@
+import { htmlMain } from "./../../src/html/htmlMain";
 import { AltFrameNode } from "./../../src/altNodes/altMixins";
 import { tailwindMain } from "../../src/tailwind/tailwindMain";
 import { createFigma } from "figma-api-stub";
@@ -22,9 +23,26 @@ describe("AltConversions", () => {
   it("Frame", () => {
     const frame = figma.createFrame();
     frame.resize(20, 20);
+    frame.x = 0;
+    frame.y = 0;
+    frame.layoutMode = "HORIZONTAL";
+    frame.counterAxisAlignItems = "CENTER";
+    frame.primaryAxisAlignItems = "SPACE_BETWEEN";
+    frame.counterAxisSizingMode = "FIXED";
+    frame.primaryAxisSizingMode = "FIXED";
 
-    expect(tailwindMain(convertIntoAltNodes([frame]))).toEqual(
-      '<div class="w-5 h-5"></div>'
+    const rectangle = figma.createRectangle();
+    rectangle.resize(20, 20);
+    rectangle.x = 0;
+    rectangle.y = 0;
+    rectangle.layoutGrow = 0;
+    rectangle.layoutAlign = "INHERIT";
+    frame.appendChild(rectangle);
+
+    expect(htmlMain(convertIntoAltNodes([frame]))).toEqual(
+      `<div style="width: 20px; height: 20px;">
+    <div style="width: 20px; height: 20px;"></div>
+</div>`
     );
   });
 
@@ -155,6 +173,8 @@ describe("AltConversions", () => {
 
     expect(
       tailwindMain(convertIntoAltNodes([node], new AltFrameNode()))
-    ).toEqual(`<div class="opacity-50 w-5 h-5"></div>`);
+    ).toEqual(
+      `<div class="w-5 h-5 bg-pink-900 bg-opacity-50 rounded-lg"></div>`
+    );
   });
 });

__tests__/altNodes/convertGroupToFrame.test.ts

@@ -26,7 +26,8 @@ describe("Convert Group to Frame", () => {
     const converted = convertGroupToFrame(group);
     expect(tailwindMain([convertNodesOnRectangle(converted)]))
       .toEqual(`<div class="relative w-5 h-5">
-<div class="w-full h-full"></div></div>`);
+    <div class="w-full h-full"></div>
+</div>`);
   });
 
   it("Correctly position the children", () => {

__tests__/altNodes/convertNodesOnRectangle.test.ts

@@ -42,7 +42,8 @@ describe("convert node if child is big rect", () => {
 
     expect(tailwindMain([converted])).toEqual(
       `<div class="w-24 h-24">
-<div class="w-full h-full bg-black"></div></div>`
+    <div class="w-full h-full bg-black"></div>
+</div>`
     );
   });
 
@@ -97,8 +98,10 @@ describe("convert node if child is big rect", () => {
 
     expect(tailwindMain([invisibleConverted])).toEqual(
       `<div class="w-24 h-24">
-<div class="inline-flex items-start justify-start pr-12 pb-12 w-full h-full">
-<div class="flex-1 h-full bg-white"></div></div></div>`
+    <div class="inline-flex items-start justify-start pr-12 pb-12 w-full h-full">
+        <div class="flex-1 h-full bg-white"></div>
+    </div>
+</div>`
     );
   });
 
@@ -153,8 +156,10 @@ describe("convert node if child is big rect", () => {
 
     expect(tailwindMain([converted])).toEqual(
       `<div class="w-5 h-5">
-<div class="inline-flex items-center justify-center p-1 w-full h-full bg-black">
-<div class="flex-1 h-full bg-white"></div></div></div>`
+    <div class="inline-flex items-center justify-center p-1 w-full h-full bg-black">
+        <div class="flex-1 h-full bg-white"></div>
+    </div>
+</div>`
     );
   });
 
@@ -185,8 +190,9 @@ describe("convert node if child is big rect", () => {
 
     expect(tailwindMain([convertNodesOnRectangle(group)]))
       .toEqual(`<div class="relative" style="width: 120px; height: 20px;">
-<div class="w-24 h-24 absolute left-0 top-0"></div>
-<div class="w-5 h-28 absolute left-0 top-0"></div></div>`);
+    <div class="w-24 h-24 absolute left-0 top-0"></div>
+    <div class="w-5 h-28 absolute left-0 top-0"></div>
+</div>`);
   });
   it("group with 2 children", () => {
     const group = new AltGroupNode();
@@ -245,7 +251,8 @@ describe("convert node if child is big rect", () => {
 
     expect(tailwindMain([conv])).toEqual(
       `<div class="inline-flex items-start justify-start pr-3 pb-3 w-5 h-5 bg-black">
-<div class="flex-1 h-full bg-white"></div></div>`
+    <div class="flex-1 h-full bg-white"></div>
+</div>`
     );
   });
 

__tests__/altNodes/convertToAutoLayout.test.ts

@@ -59,8 +59,9 @@ describe("Convert to AutoLayout", () => {
     // output should be HORIZONTAL
     expect(tailwindMain([convertToAutoLayout(frame)])).toEqual(
       `<div class="inline-flex items-start justify-end pr-2.5 pb-8 w-12 h-12">
-<div class="w-1/2 h-full bg-white"></div>
-<div class="w-1/2 h-full bg-black"></div></div>`
+    <div class="w-1/2 h-full bg-white"></div>
+    <div class="w-1/2 h-full bg-black"></div>
+</div>`
     );
 
     // output should be VERTICAL
@@ -71,8 +72,9 @@ describe("Convert to AutoLayout", () => {
 
     expect(tailwindMain([convertToAutoLayout(frame)])).toEqual(
       `<div class="inline-flex flex-col items-start justify-end pr-8 pb-2.5 w-12 h-12">
-<div class="w-full h-1/2 bg-white"></div>
-<div class="w-full h-1/2 bg-black"></div></div>`
+    <div class="w-full h-1/2 bg-white"></div>
+    <div class="w-full h-1/2 bg-black"></div>
+</div>`
     );
 
     // horizontally align while vertical
@@ -85,8 +87,9 @@ describe("Convert to AutoLayout", () => {
 
     expect(tailwindMain([convertToAutoLayout(frame)])).toEqual(
       `<div class="inline-flex flex-col space-y-1 items-end justify-end pb-1 w-12 h-12">
-<div class="w-full h-5 bg-white"></div>
-<div class="w-5 h-5 bg-black"></div></div>`
+    <div class="w-full h-5 bg-white"></div>
+    <div class="w-5 h-5 bg-black"></div>
+</div>`
     );
 
     // vertically align while horizontal
@@ -100,8 +103,9 @@ describe("Convert to AutoLayout", () => {
 
     expect(tailwindMain([convertToAutoLayout(frame)])).toEqual(
       `<div class="inline-flex items-end justify-end pr-2.5 w-12 h-12">
-<div class="w-1/2 h-full bg-white"></div>
-<div class="w-1/2 h-5 bg-black"></div></div>`
+    <div class="w-1/2 h-full bg-white"></div>
+    <div class="w-1/2 h-5 bg-black"></div>
+</div>`
     );
 
     node1.height = 20;
@@ -114,8 +118,9 @@ describe("Convert to AutoLayout", () => {
 
     expect(tailwindMain([convertToAutoLayout(frame)])).toEqual(
       `<div class="relative" style="width: 50px; height: 50px;">
-<div class="w-5 h-5 absolute bg-black" style="left: 10px; top: 10px;"></div>
-<div class="w-5 h-5 absolute left-0 top-0 bg-white"></div></div>`
+    <div class="w-5 h-5 absolute bg-black" style="left: 10px; top: 10px;"></div>
+    <div class="w-5 h-5 absolute left-0 top-0 bg-white"></div>
+</div>`
     );
   });
 
@@ -154,8 +159,9 @@ describe("Convert to AutoLayout", () => {
     // output should be HORIZONTAL
     expect(tailwindMain([convertToAutoLayout(frame)]))
       .toEqual(`<div class="inline-flex items-start justify-end pb-8 w-12 h-12">
-<div class="w-5 h-full"></div>
-<div class="w-5 h-full"></div>
-<div class="w-5 h-full"></div></div>`);
+    <div class="w-5 h-full"></div>
+    <div class="w-5 h-full"></div>
+    <div class="w-5 h-full"></div>
+</div>`);
   });
 });

__tests__/flutter/builderImpl/flutterBlend.test.ts

@@ -14,7 +14,10 @@ describe("Flutter Blend", () => {
 
     node.opacity = 0.5;
     expect(flutterOpacity(node, "test")).toEqual(
-      "Opacity(opacity: 0.50, child: test),"
+      `Opacity(
+    opacity: 0.50,
+    child: test
+),`
     );
 
     node.opacity = 1.0;
@@ -27,7 +30,10 @@ describe("Flutter Blend", () => {
 
     node.visible = false;
     expect(flutterVisibility(node, "test")).toEqual(
-      "Visibility(visible: false, child: test),"
+      `Visibility(
+    visible: false,
+    child: test
+),`
     );
 
     node.visible = true;
@@ -44,22 +50,26 @@ describe("Flutter Blend", () => {
 
     node.rotation = 45;
     expect(flutterRotation(node, "test")).toEqual(
-      "Transform.rotate(angle: -0.79, child: test)"
-    );
-
-    node.rotation = 45;
-    expect(flutterRotation(node, "test")).toEqual(
-      "Transform.rotate(angle: -0.79, child: test)"
+      `Transform.rotate(
+    angle: -0.79,
+    child: test
+),`
     );
 
     node.rotation = -45;
     expect(flutterRotation(node, "test")).toEqual(
-      "Transform.rotate(angle: 0.79, child: test)"
+      `Transform.rotate(
+    angle: 0.79,
+    child: test
+),`
     );
 
     node.rotation = 90;
     expect(flutterRotation(node, "test")).toEqual(
-      "Transform.rotate(angle: -1.57, child: test)"
+      `Transform.rotate(
+    angle: -1.57,
+    child: test
+),`
     );
   });
 });

__tests__/flutter/builderImpl/flutterSize.test.ts

@@ -1,4 +1,7 @@
-import { flutterSize } from "../../../src/flutter/builderImpl/flutterSize";
+import {
+  flutterSize,
+  flutterSizeWH,
+} from "../../../src/flutter/builderImpl/flutterSize";
 import {
   AltRectangleNode,
   AltFrameNode,
@@ -15,15 +18,15 @@ describe("Flutter Size", () => {
 
     node.width = 16;
     node.height = 16;
-    expect(flutterSize(node).size).toEqual("\nwidth: 16,\nheight: 16,");
+    expect(flutterSizeWH(node)).toEqual("\nwidth: 16,\nheight: 16,");
 
     node.width = 100;
     node.height = 200;
-    expect(flutterSize(node).size).toEqual("\nwidth: 100,\nheight: 200,");
+    expect(flutterSizeWH(node)).toEqual("\nwidth: 100,\nheight: 200,");
 
     node.width = 300;
     node.height = 300;
-    expect(flutterSize(node).size).toEqual("\nwidth: 300,\nheight: 300,");
+    expect(flutterSizeWH(node)).toEqual("\nwidth: 300,\nheight: 300,");
   });
 
   it("STRETCH inside AutoLayout", () => {
@@ -45,13 +48,15 @@ describe("Flutter Size", () => {
     node.children = [child];
 
     const fSize1 = flutterSize(child);
-    expect(fSize1.size).toEqual("\nheight: double.infinity,");
+    expect(fSize1.width).toEqual("");
+    expect(fSize1.height).toEqual("\nheight: double.infinity,");
     expect(fSize1.isExpanded).toEqual(true);
 
     node.layoutMode = "VERTICAL";
 
     const fSize2 = flutterSize(child);
-    expect(fSize2.size).toEqual("\nwidth: double.infinity,");
+    expect(fSize2.width).toEqual("\nwidth: double.infinity,");
+    expect(fSize2.height).toEqual("");
     expect(fSize2.isExpanded).toEqual(true);
   });
 
@@ -62,7 +67,7 @@ describe("Flutter Size", () => {
     node.height = 48;
     node.children = [new AltRectangleNode(), new AltRectangleNode()];
 
-    expect(flutterSize(node).size).toEqual("\nwidth: 48,\nheight: 48,");
+    expect(flutterSizeWH(node)).toEqual("\nwidth: 48,\nheight: 48,");
   });
 
   it("counterAxisSizingMode is FIXED", () => {
@@ -73,13 +78,13 @@ describe("Flutter Size", () => {
     node.children = [new AltRectangleNode(), new AltRectangleNode()];
 
     node.layoutMode = "HORIZONTAL";
-    expect(flutterSize(node).size).toEqual("\nheight: 48,");
+    expect(flutterSizeWH(node)).toEqual("\nheight: 48,");
 
     node.layoutMode = "VERTICAL";
-    expect(flutterSize(node).size).toEqual("\nwidth: 48,");
+    expect(flutterSizeWH(node)).toEqual("\nwidth: 48,");
 
     node.layoutMode = "NONE";
-    expect(flutterSize(node).size).toEqual("\nwidth: 48,\nheight: 48,");
+    expect(flutterSizeWH(node)).toEqual("\nwidth: 48,\nheight: 48,");
   });
 
   it("counterAxisSizingMode is AUTO", () => {
@@ -93,7 +98,7 @@ describe("Flutter Size", () => {
     node.height = 48;
     node.children = [new AltRectangleNode(), new AltRectangleNode()];
 
-    expect(flutterSize(node).size).toEqual("");
+    expect(flutterSizeWH(node)).toEqual("");
 
     // responsive
     const parentNode = new AltFrameNode();
@@ -105,8 +110,8 @@ describe("Flutter Size", () => {
     parentNode.height = 48;
     parentNode.children = [node];
     node.parent = parentNode;
-    expect(flutterSize(node).size).toEqual("");
-    expect(flutterSize(parentNode).size).toEqual("\nwidth: 48,\nheight: 48,");
+    expect(flutterSizeWH(node)).toEqual("");
+    expect(flutterSizeWH(parentNode)).toEqual("\nwidth: 48,\nheight: 48,");
   });
 
   it("width changes when there are strokes", () => {
@@ -116,7 +121,7 @@ describe("Flutter Size", () => {
     node.width = 8;
     node.height = 8;
 
-    expect(flutterSize(node).size).toEqual("\nwidth: 8,\nheight: 8,");
+    expect(flutterSizeWH(node)).toEqual("\nwidth: 8,\nheight: 8,");
 
     node.strokeWeight = 4;
     node.strokes = [
@@ -127,10 +132,10 @@ describe("Flutter Size", () => {
     ];
 
     node.strokeAlign = "CENTER";
-    expect(flutterSize(node).size).toEqual("\nwidth: 12,\nheight: 12,");
+    expect(flutterSizeWH(node)).toEqual("\nwidth: 12,\nheight: 12,");
 
     node.strokeAlign = "OUTSIDE";
-    expect(flutterSize(node).size).toEqual("\nwidth: 16,\nheight: 16,");
+    expect(flutterSizeWH(node)).toEqual("\nwidth: 16,\nheight: 16,");
   });
 
   it("adjust parent if children's size + stroke > parent size", () => {
@@ -155,12 +160,14 @@ describe("Flutter Size", () => {
 
     const fSize1 = flutterSize(parentNode);
 
-    expect(fSize1.size).toEqual("\nwidth: 16,\nheight: 16,");
+    expect(fSize1.width).toEqual("\nwidth: 16,");
+    expect(fSize1.height).toEqual("\nheight: 16,");
     expect(fSize1.isExpanded).toEqual(false);
 
     node.strokeAlign = "CENTER";
     const fSize2 = flutterSize(parentNode);
-    expect(fSize2.size).toEqual("\nwidth: 12,\nheight: 12,");
+    expect(fSize2.width).toEqual("\nwidth: 12,");
+    expect(fSize2.height).toEqual("\nheight: 12,");
     expect(fSize2.isExpanded).toEqual(false);
   });
 
@@ -179,7 +186,7 @@ describe("Flutter Size", () => {
 
     parentNode.children = [node];
 
-    expect(flutterSize(parentNode).size).toEqual("\nwidth: 12,\nheight: 12,");
-    expect(flutterSize(node).size).toEqual("\nwidth: 12,\nheight: 12,");
+    expect(flutterSizeWH(parentNode)).toEqual("\nwidth: 12,\nheight: 12,");
+    expect(flutterSizeWH(node)).toEqual("\nwidth: 12,\nheight: 12,");
   });
 });