+
+
+
`);
+ });
+
+ it("Group with relative position", () => {
+ // this also should neve happen in reality, because Group must have the same size as the children.
+
+ const node = new AltGroupNode();
+ node.width = 32;
+ node.height = 32;
+ node.x = 0;
+ node.y = 0;
+ node.name = "GROUP";
+ node.isRelative = true;
+
+ const child = new AltRectangleNode();
+ child.width = 4;
+ child.height = 4;
+ child.x = 9;
+ child.y = 9;
+ child.name = "RECT";
+ child.fills = [
+ {
+ type: "SOLID",
+ color: {
+ r: 1,
+ g: 1,
+ b: 1,
+ },
+ },
+ ];
+
+ node.children = [child];
+ child.parent = node;
+ expect(htmlMain([node], "", true, true))
+ .toEqual(`
+
+
`);
+ });
+
+ it("ellipse with no size", () => {
+ const node = new AltEllipseNode();
+
+ // undefined (unitialized, only happen on tests)
+ expect(htmlMain([node])).toEqual(
+ ''
+ );
+ // todo verify if it is working properly.
+ node.x = 0;
+ node.y = 0;
+
+ node.width = 0;
+ node.height = 10;
+ expect(htmlMain([node])).toEqual("");
+
+ node.width = 10;
+ node.height = 0;
+ expect(htmlMain([node])).toEqual("");
+ });
+
+ it("input", () => {
+ const textNode = new AltTextNode();
+ textNode.characters = "username";
+ textNode.fontSize = 26;
+ textNode.x = 0;
+ textNode.y = 0;
+
+ const frameNode = new AltFrameNode();
+ frameNode.layoutMode = "HORIZONTAL";
+ frameNode.width = 100;
+ frameNode.height = 40;
+ frameNode.counterAxisSizingMode = "AUTO";
+ frameNode.primaryAxisSizingMode = "AUTO";
+
+ frameNode.primaryAxisAlignItems = "SPACE_BETWEEN";
+ frameNode.counterAxisAlignItems = "CENTER";
+
+ frameNode.children = [textNode];
+ textNode.parent = frameNode;
+
+ // In real life, justify-between would be converted to justify-center in the altConversion.
+ expect(tailwindMain([frameNode])).toEqual(
+ `
+
`
+ );
+
+ frameNode.name = "this is the InPuT";
+ expect(htmlMain([frameNode])).toEqual(
+ ''
+ );
+ });
+
+ it("JSX", () => {
+ const node = new AltRectangleNode();
+ node.name = "RECT";
+
+ const builder = new TailwindDefaultBuilder(node, true, true);
+
+ expect(builder.build()).toEqual(' className="RECT"');
+
+ builder.reset();
+ expect(builder.attributes).toEqual("");
+ });
+
+ it("JSX with relative position", () => {
+ const node = new AltFrameNode();
+ node.width = 32;
+ node.height = 32;
+ node.x = 0;
+ node.y = 0;
+ node.name = "FRAME";
+ node.layoutMode = "NONE";
+ node.counterAxisSizingMode = "FIXED";
+
+ const child1 = new AltRectangleNode();
+ child1.width = 4;
+ child1.height = 4;
+ child1.x = 9;
+ child1.y = 9;
+ child1.name = "RECT1";
+ child1.fills = [
+ {
+ type: "SOLID",
+ color: {
+ r: 1,
+ g: 1,
+ b: 1,
+ },
+ },
+ ];
+
+ const child2 = new AltRectangleNode();
+ child2.width = 4;
+ child2.height = 4;
+ child2.x = 9;
+ child2.y = 9;
+ child2.name = "RECT2";
+
+ // this works as a test for JSX, but should never happen in reality. In reality Frame would need to have 2 children and be relative.
+ node.children = [child1, child2];
+ child1.parent = node;
+ child2.parent = node;
+
+ expect(htmlMain([convertToAutoLayout(node)], "", true, true))
+ .toEqual(`username
+
+
+
+
`);
+ });
+
+ it("AutoLayout", () => {
+ const node = new AltFrameNode();
+ node.width = 32;
+ node.height = 32;
+ node.x = 0;
+ node.y = 0;
+ node.name = "FRAME";
+ node.layoutMode = "HORIZONTAL";
+ node.itemSpacing = 4;
+ node.primaryAxisAlignItems = "MIN";
+ node.counterAxisAlignItems = "MIN";
+ node.counterAxisSizingMode = "FIXED";
+ node.primaryAxisSizingMode = "FIXED";
+
+ const child1 = new AltRectangleNode();
+ child1.width = 4;
+ child1.height = 4;
+ child1.x = 0;
+ child1.y = 0;
+ child1.name = "RECT1";
+ child1.fills = [
+ {
+ type: "SOLID",
+ color: {
+ r: 1,
+ g: 1,
+ b: 1,
+ },
+ },
+ ];
+
+ const child2 = new AltFrameNode();
+ child2.width = 4;
+ child2.height = 4;
+ child2.x = 8;
+ child2.y = 0;
+ child2.name = "RECT2";
+ child2.counterAxisSizingMode = "FIXED";
+ child2.primaryAxisSizingMode = "FIXED";
+ child2.primaryAxisAlignItems = "CENTER";
+ child2.counterAxisAlignItems = "CENTER";
+ child2.layoutGrow = 0;
+ child2.layoutAlign = "INHERIT";
+ child2.children = [];
+
+ // this works as a test for JSX, but should never happen in reality. In reality Frame would need to have 2 children and be relative.
+ node.children = [child1, child2];
+ child1.parent = node;
+ child2.parent = node;
+
+ expect(htmlMain([node], "", false, true))
+ .toEqual(`
+
+
+
+
`);
+
+ node.primaryAxisAlignItems = "MAX";
+ node.counterAxisAlignItems = "MAX";
+
+ child2.primaryAxisAlignItems = "SPACE_BETWEEN";
+ child2.counterAxisAlignItems = "CENTER";
+
+ expect(htmlMain([node], "", false, true))
+ .toEqual(`
+
+
+
+
`);
+ });
+
+ it("Gradient Background with Gradient Text", () => {
+ const gradientFill: GradientPaint = {
+ type: "GRADIENT_LINEAR",
+ gradientTransform: [
+ [0.8038461208343506, 0.7035384774208069, -0.2932307720184326],
+ [1.3402682542800903, -1.4652644395828247, 0.5407097935676575],
+ ],
+ gradientStops: [
+ {
+ position: 0,
+ color: {
+ r: 0,
+ g: 0,
+ b: 1,
+ a: 1,
+ },
+ },
+ {
+ position: 1,
+ color: {
+ r: 1,
+ g: 0,
+ b: 0,
+ a: 1,
+ },
+ },
+ ],
+ };
+
+ const node = new AltFrameNode();
+ node.width = 32;
+ node.height = 32;
+ node.x = 0;
+ node.y = 0;
+ node.name = "FRAME";
+ node.layoutMode = "HORIZONTAL";
+ node.itemSpacing = 4;
+ node.primaryAxisAlignItems = "MIN";
+ node.counterAxisAlignItems = "MIN";
+ node.counterAxisSizingMode = "FIXED";
+ node.primaryAxisSizingMode = "FIXED";
+ node.fills = [gradientFill];
+ node.effects = [
+ {
+ blendMode: "NORMAL",
+ color: { r: 0, g: 0, b: 0, a: 0.25 },
+ offset: { x: 0, y: 4 },
+ radius: 4,
+ type: "DROP_SHADOW",
+ visible: true,
+ },
+ ];
+ node.cornerRadius = 8;
+
+ const text = new AltTextNode();
+ text.width = 20;
+ text.height = 4;
+ text.x = 0;
+ text.y = 0;
+ text.name = "TEXT";
+ text.fills = [gradientFill];
+ text.characters = "gradient";
+
+ // this works as a test for JSX, but should never happen in reality. In reality Frame would need to have 2 children and be relative.
+ node.children = [text];
+ text.parent = node;
+
+ expect(htmlMain([node], "", false, true))
+ .toEqual(`
+
`);
+ });
+});
diff --git a/__tests__/html/htmlText.test.ts b/__tests__/html/htmlText.test.ts
new file mode 100644
index 00000000..6074efd6
--- /dev/null
+++ b/__tests__/html/htmlText.test.ts
@@ -0,0 +1,196 @@
+import { htmlMain } from "./../../src/html/htmlMain";
+import { AltTextNode } from "../../src/altNodes/altMixins";
+
+describe("HTML Text", () => {
+ // @ts-ignore for some reason, need to override this for figma.mixed to work
+ global.figma = {
+ mixed: undefined,
+ };
+ it("textAutoResize", () => {
+ const node = new AltTextNode();
+ node.characters = "";
+ node.width = 16;
+ node.height = 16;
+
+ node.textAutoResize = "NONE";
+ expect(htmlMain([node])).toEqual(
+ ''
+ );
+
+ node.textAutoResize = "HEIGHT";
+ expect(htmlMain([node])).toEqual('');
+
+ node.textAutoResize = "WIDTH_AND_HEIGHT";
+ expect(htmlMain([node])).toEqual("");
+ });
+
+ it("textAlignHorizontal", () => {
+ const node = new AltTextNode();
+ node.characters = "";
+ node.width = 16;
+ node.height = 16;
+
+ node.textAutoResize = "WIDTH_AND_HEIGHT";
+ node.textAlignHorizontal = "LEFT";
+ expect(htmlMain([node])).toEqual("");
+
+ node.textAutoResize = "NONE";
+ node.textAlignHorizontal = "CENTER";
+ expect(htmlMain([node])).toEqual(
+ ''
+ );
+
+ node.textAutoResize = "NONE";
+ node.textAlignHorizontal = "RIGHT";
+ expect(htmlMain([node])).toEqual(
+ ''
+ );
+
+ node.textAlignHorizontal = "JUSTIFIED";
+ expect(htmlMain([node])).toEqual(
+ ''
+ );
+ });
+ it("fontSize", () => {
+ const node = new AltTextNode();
+ node.characters = "";
+ node.width = 16;
+ node.height = 16;
+ node.fontSize = 16;
+ node.textAutoResize = "WIDTH_AND_HEIGHT";
+
+ expect(htmlMain([node])).toEqual('');
+ });
+
+ it("fontName", () => {
+ const node = new AltTextNode();
+ node.characters = "";
+ node.width = 16;
+ node.height = 16;
+ node.textAutoResize = "WIDTH_AND_HEIGHT";
+
+ node.fontName = {
+ family: "inter",
+ style: "bold",
+ };
+ expect(htmlMain([node])).toEqual('');
+
+ node.fontName = {
+ family: "inter",
+ style: "medium italic",
+ };
+ expect(htmlMain([node])).toEqual(
+ ''
+ );
+
+ node.fontName = {
+ family: "inter",
+ style: "regular",
+ };
+ expect(htmlMain([node])).toEqual("");
+
+ node.fontName = {
+ family: "inter",
+ style: "doesn't exist",
+ };
+ expect(htmlMain([node])).toEqual("");
+ });
+
+ it("letterSpacing", () => {
+ const node = new AltTextNode();
+ node.characters = "";
+ node.width = 16;
+ node.height = 16;
+ node.fontSize = 24;
+ node.textAutoResize = "WIDTH_AND_HEIGHT";
+
+ node.letterSpacing = {
+ value: 110,
+ unit: "PERCENT",
+ };
+ expect(htmlMain([node])).toEqual(
+ ''
+ );
+
+ node.letterSpacing = {
+ value: 10,
+ unit: "PIXELS",
+ };
+ expect(htmlMain([node])).toEqual(
+ ''
+ );
+ });
+
+ it("lineHeight", () => {
+ const node = new AltTextNode();
+ node.characters = "";
+ node.width = 16;
+ node.height = 16;
+ node.textAutoResize = "WIDTH_AND_HEIGHT";
+ node.fontSize = 24;
+
+ node.lineHeight = {
+ value: 110,
+ unit: "PERCENT",
+ };
+ expect(htmlMain([node])).toEqual(
+ ''
+ );
+
+ node.lineHeight = {
+ value: 10,
+ unit: "PIXELS",
+ };
+ expect(htmlMain([node])).toEqual(
+ ''
+ );
+
+ node.lineHeight = {
+ unit: "AUTO",
+ };
+ expect(htmlMain([node])).toEqual(
+ ''
+ );
+ });
+
+ it("textCase", () => {
+ const node = new AltTextNode();
+ node.characters = "";
+
+ node.textCase = "LOWER";
+ expect(htmlMain([node])).toEqual(
+ ''
+ );
+
+ node.textCase = "TITLE";
+ expect(htmlMain([node])).toEqual(
+ ''
+ );
+
+ node.textCase = "UPPER";
+ expect(htmlMain([node])).toEqual(
+ ''
+ );
+
+ node.textCase = "ORIGINAL";
+ expect(htmlMain([node])).toEqual("");
+ });
+
+ it("textDecoration", () => {
+ const node = new AltTextNode();
+ node.characters = "";
+
+ node.textDecoration = "NONE";
+ expect(htmlMain([node])).toEqual("");
+
+ node.textDecoration = "STRIKETHROUGH";
+ expect(htmlMain([node])).toEqual(
+ ''
+ );
+
+ node.textDecoration = "UNDERLINE";
+ expect(htmlMain([node])).toEqual(
+ ''
+ );
+ });
+});
diff --git a/__tests__/htmlBuilder/htmlGradient.test.ts b/__tests__/htmlBuilder/htmlGradient.test.ts
deleted file mode 100644
index c1b6f963..00000000
--- a/__tests__/htmlBuilder/htmlGradient.test.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-import { tailwindMain } from "../../src/tailwind/tailwindMain";
-import { AltRectangleNode } from "../../src/altNodes/altMixins";
-import { htmlGradient } from "../../src/htmlBuilder/htmlGradient";
-
-describe("HTML Gradient", () => {
- // @ts-ignore for some reason, need to override this for figma.mixed to work
- global.figma = {
- mixed: undefined,
- };
-
- const fills: ReadonlyArraygradient
+
-
`);
+ .toEqual(`
+ 
+
`);
expect(tailwindSize(frameNodeToAlt(subnode))).toEqual("w-2 h-2 ");
});
@@ -118,14 +135,19 @@ describe("Tailwind Size", () => {
const subnode = figma.createFrame();
subnode.resize(500, 250);
+ subnode.layoutGrow = 1;
+ subnode.layoutAlign = "INHERIT";
subnode.layoutMode = "HORIZONTAL";
const child = figma.createFrame();
child.resize(16, 16);
+ child.layoutGrow = 0;
+ child.layoutAlign = "INHERIT";
+
subnode.appendChild(child);
node.appendChild(subnode);
- expect(tailwindSize(frameNodeToAlt(node))).toEqual("w-full ");
+ expect(tailwindSize(frameNodeToAlt(node))).toEqual("");
expect(tailwindSize(frameNodeToAlt(subnode))).toEqual("");
expect(tailwindSize(frameNodeToAlt(child))).toEqual("w-4 h-4 ");
});
@@ -145,7 +167,8 @@ describe("Tailwind Size", () => {
const child = new AltFrameNode();
child.width = 16;
- child.height = 16;
+ child.height = 255;
+ child.layoutGrow = 1;
child.layoutMode = "NONE";
node.children = [subnode];
@@ -155,8 +178,12 @@ describe("Tailwind Size", () => {
child.parent = subnode;
expect(tailwindSize(node)).toEqual("w-full ");
- expect(tailwindSize(subnode)).toEqual("w-full ");
- expect(tailwindSize(child)).toEqual("w-4 h-4 ");
+ expect(tailwindSize(subnode)).toEqual("");
+ expect(tailwindSize(child)).toEqual("w-4 flex-1 ");
+
+ // additional test for layoutGrow
+ subnode.layoutMode = "HORIZONTAL";
+ expect(tailwindSize(child)).toEqual("flex-1 h-64 ");
});
it("complex autolayout example", () => {
@@ -164,7 +191,11 @@ describe("Tailwind Size", () => {
node.width = 225;
node.height = 300;
node.counterAxisSizingMode = "FIXED";
+ node.primaryAxisSizingMode = "FIXED";
+ node.counterAxisAlignItems = "CENTER";
+ node.primaryAxisAlignItems = "CENTER";
node.layoutMode = "VERTICAL";
+ node.layoutAlign = "INHERIT";
node.paddingLeft = 10;
node.paddingRight = 10;
node.itemSpacing = 10;
@@ -194,7 +225,8 @@ describe("Tailwind Size", () => {
child1.width = 205;
child1.height = 20;
child1.x = 10;
- child1.layoutAlign = "CENTER";
+ child1.y = 10;
+ child1.layoutAlign = "STRETCH";
child1.fills = fills;
child1.parent = node;
@@ -202,6 +234,7 @@ describe("Tailwind Size", () => {
child2.width = 205;
child2.height = 20;
child2.x = 10;
+ child2.y = 10;
child2.layoutAlign = "STRETCH";
child2.fills = fills;
child2.parent = node;
@@ -210,7 +243,8 @@ describe("Tailwind Size", () => {
child3.width = 100;
child3.height = 20;
child3.x = 10;
- child3.layoutAlign = "MIN";
+ child3.y = 10;
+ child3.layoutAlign = "INHERIT";
child3.fills = fills;
child3.parent = node;
@@ -218,18 +252,20 @@ describe("Tailwind Size", () => {
child4.width = 30;
child4.height = 20;
child4.x = 10;
- child4.layoutAlign = "CENTER";
+ child4.y = 10;
+ child4.layoutAlign = "INHERIT";
child4.fills = fills;
child4.parent = node;
node.children = [child1, child2, child3, child4];
expect(tailwindMain([node]))
- .toEqual(`
-
-
-
-
`);
+ .toEqual(`
+
+
+
+
+
`);
});
});
@@ -384,7 +420,7 @@ describe("Tailwind Size", () => {
// node.appendChild(blueSmallRect);
// expect(tailwindMain(node.id, [frameNodeToAlt(node)], false, false)).toEqual(
- // `\n
+ // `\n'
+ `
`);
});
});
diff --git a/__tests__/tailwind/tailwindText.test.ts b/__tests__/tailwind/tailwindText.test.ts
index da1d8a8d..42d8bc74 100644
--- a/__tests__/tailwind/tailwindText.test.ts
+++ b/__tests__/tailwind/tailwindText.test.ts
@@ -1,10 +1,7 @@
-import { AltFrameNode } from "./../../src/altNodes/altMixins";
-import {
- TailwindTextBuilder,
- convertFontWeight,
-} from "../../src/tailwind/tailwindTextBuilder";
+import { TailwindTextBuilder } from "../../src/tailwind/tailwindTextBuilder";
import { tailwindMain } from "../../src/tailwind/tailwindMain";
import { AltTextNode } from "../../src/altNodes/altMixins";
+import { convertFontWeight } from "../../src/common/convertFontWeight";
describe("Tailwind Text", () => {
// @ts-ignore for some reason, need to override this for figma.mixed to work
@@ -41,9 +38,12 @@ describe("Tailwind Text", () => {
node.textAlignHorizontal = "CENTER";
expect(tailwindMain([node])).toEqual('');
+ node.textAlignHorizontal = "RIGHT";
+ expect(tailwindMain([node])).toEqual('');
+
node.textAlignHorizontal = "JUSTIFIED";
expect(tailwindMain([node])).toEqual(
- ''
+ ''
);
});
it("fontSize", () => {
@@ -164,7 +164,7 @@ describe("Tailwind Text", () => {
it("weight", () => {
expect(convertFontWeight("tHIN")).toEqual("100");
- expect(convertFontWeight("Default")).toEqual("400");
+ expect(convertFontWeight("Default")).toEqual(null);
expect(convertFontWeight("Thin")).toEqual("100");
expect(convertFontWeight("Extra Light")).toEqual("200");
@@ -182,7 +182,7 @@ describe("Tailwind Text", () => {
const node = new AltTextNode();
node.characters = "";
- const builder = new TailwindTextBuilder(false, node, false);
+ const builder = new TailwindTextBuilder(node, false, false);
builder.reset();
expect(builder.build()).toEqual("");
});
diff --git a/assets/convert_tailwind_colors.js b/assets/convert_tailwind_colors.js
new file mode 100644
index 00000000..8de413ae
--- /dev/null
+++ b/assets/convert_tailwind_colors.js
@@ -0,0 +1,388 @@
+// Step 1: Remove transparent, black and white from tailwind_colors.
+
+// transparent: "transparent",
+// black: "#000",
+// white: "#fff",
+const tailwind_colors_all = {
+ rose: {
+ 50: "#fff1f2",
+ 100: "#ffe4e6",
+ 200: "#fecdd3",
+ 300: "#fda4af",
+ 400: "#fb7185",
+ 500: "#f43f5e",
+ 600: "#e11d48",
+ 700: "#be123c",
+ 800: "#9f1239",
+ 900: "#881337",
+ },
+ pink: {
+ 50: "#fdf2f8",
+ 100: "#fce7f3",
+ 200: "#fbcfe8",
+ 300: "#f9a8d4",
+ 400: "#f472b6",
+ 500: "#ec4899",
+ 600: "#db2777",
+ 700: "#be185d",
+ 800: "#9d174d",
+ 900: "#831843",
+ },
+ fuchsia: {
+ 50: "#fdf4ff",
+ 100: "#fae8ff",
+ 200: "#f5d0fe",
+ 300: "#f0abfc",
+ 400: "#e879f9",
+ 500: "#d946ef",
+ 600: "#c026d3",
+ 700: "#a21caf",
+ 800: "#86198f",
+ 900: "#701a75",
+ },
+ purple: {
+ 50: "#faf5ff",
+ 100: "#f3e8ff",
+ 200: "#e9d5ff",
+ 300: "#d8b4fe",
+ 400: "#c084fc",
+ 500: "#a855f7",
+ 600: "#9333ea",
+ 700: "#7e22ce",
+ 800: "#6b21a8",
+ 900: "#581c87",
+ },
+ violet: {
+ 50: "#f5f3ff",
+ 100: "#ede9fe",
+ 200: "#ddd6fe",
+ 300: "#c4b5fd",
+ 400: "#a78bfa",
+ 500: "#8b5cf6",
+ 600: "#7c3aed",
+ 700: "#6d28d9",
+ 800: "#5b21b6",
+ 900: "#4c1d95",
+ },
+ indigo: {
+ 50: "#eef2ff",
+ 100: "#e0e7ff",
+ 200: "#c7d2fe",
+ 300: "#a5b4fc",
+ 400: "#818cf8",
+ 500: "#6366f1",
+ 600: "#4f46e5",
+ 700: "#4338ca",
+ 800: "#3730a3",
+ 900: "#312e81",
+ },
+ blue: {
+ 50: "#eff6ff",
+ 100: "#dbeafe",
+ 200: "#bfdbfe",
+ 300: "#93c5fd",
+ 400: "#60a5fa",
+ 500: "#3b82f6",
+ 600: "#2563eb",
+ 700: "#1d4ed8",
+ 800: "#1e40af",
+ 900: "#1e3a8a",
+ },
+ lightBlue: {
+ 50: "#f0f9ff",
+ 100: "#e0f2fe",
+ 200: "#bae6fd",
+ 300: "#7dd3fc",
+ 400: "#38bdf8",
+ 500: "#0ea5e9",
+ 600: "#0284c7",
+ 700: "#0369a1",
+ 800: "#075985",
+ 900: "#0c4a6e",
+ },
+ cyan: {
+ 50: "#ecfeff",
+ 100: "#cffafe",
+ 200: "#a5f3fc",
+ 300: "#67e8f9",
+ 400: "#22d3ee",
+ 500: "#06b6d4",
+ 600: "#0891b2",
+ 700: "#0e7490",
+ 800: "#155e75",
+ 900: "#164e63",
+ },
+ teal: {
+ 50: "#f0fdfa",
+ 100: "#ccfbf1",
+ 200: "#99f6e4",
+ 300: "#5eead4",
+ 400: "#2dd4bf",
+ 500: "#14b8a6",
+ 600: "#0d9488",
+ 700: "#0f766e",
+ 800: "#115e59",
+ 900: "#134e4a",
+ },
+ emerald: {
+ 50: "#ecfdf5",
+ 100: "#d1fae5",
+ 200: "#a7f3d0",
+ 300: "#6ee7b7",
+ 400: "#34d399",
+ 500: "#10b981",
+ 600: "#059669",
+ 700: "#047857",
+ 800: "#065f46",
+ 900: "#064e3b",
+ },
+ green: {
+ 50: "#f0fdf4",
+ 100: "#dcfce7",
+ 200: "#bbf7d0",
+ 300: "#86efac",
+ 400: "#4ade80",
+ 500: "#22c55e",
+ 600: "#16a34a",
+ 700: "#15803d",
+ 800: "#166534",
+ 900: "#14532d",
+ },
+ lime: {
+ 50: "#f7fee7",
+ 100: "#ecfccb",
+ 200: "#d9f99d",
+ 300: "#bef264",
+ 400: "#a3e635",
+ 500: "#84cc16",
+ 600: "#65a30d",
+ 700: "#4d7c0f",
+ 800: "#3f6212",
+ 900: "#365314",
+ },
+ yellow: {
+ 50: "#fefce8",
+ 100: "#fef9c3",
+ 200: "#fef08a",
+ 300: "#fde047",
+ 400: "#facc15",
+ 500: "#eab308",
+ 600: "#ca8a04",
+ 700: "#a16207",
+ 800: "#854d0e",
+ 900: "#713f12",
+ },
+ amber: {
+ 50: "#fffbeb",
+ 100: "#fef3c7",
+ 200: "#fde68a",
+ 300: "#fcd34d",
+ 400: "#fbbf24",
+ 500: "#f59e0b",
+ 600: "#d97706",
+ 700: "#b45309",
+ 800: "#92400e",
+ 900: "#78350f",
+ },
+ orange: {
+ 50: "#fff7ed",
+ 100: "#ffedd5",
+ 200: "#fed7aa",
+ 300: "#fdba74",
+ 400: "#fb923c",
+ 500: "#f97316",
+ 600: "#ea580c",
+ 700: "#c2410c",
+ 800: "#9a3412",
+ 900: "#7c2d12",
+ },
+ red: {
+ 50: "#fef2f2",
+ 100: "#fee2e2",
+ 200: "#fecaca",
+ 300: "#fca5a5",
+ 400: "#f87171",
+ 500: "#ef4444",
+ 600: "#dc2626",
+ 700: "#b91c1c",
+ 800: "#991b1b",
+ 900: "#7f1d1d",
+ },
+ warmGray: {
+ 50: "#fafaf9",
+ 100: "#f5f5f4",
+ 200: "#e7e5e4",
+ 300: "#d6d3d1",
+ 400: "#a8a29e",
+ 500: "#78716c",
+ 600: "#57534e",
+ 700: "#44403c",
+ 800: "#292524",
+ 900: "#1c1917",
+ },
+ trueGray: {
+ 50: "#fafafa",
+ 100: "#f5f5f5",
+ 200: "#e5e5e5",
+ 300: "#d4d4d4",
+ 400: "#a3a3a3",
+ 500: "#737373",
+ 600: "#525252",
+ 700: "#404040",
+ 800: "#262626",
+ 900: "#171717",
+ },
+ gray: {
+ 50: "#fafafa",
+ 100: "#f4f4f5",
+ 200: "#e4e4e7",
+ 300: "#d4d4d8",
+ 400: "#a1a1aa",
+ 500: "#71717a",
+ 600: "#52525b",
+ 700: "#3f3f46",
+ 800: "#27272a",
+ 900: "#18181b",
+ },
+ coolGray: {
+ 50: "#f9fafb",
+ 100: "#f3f4f6",
+ 200: "#e5e7eb",
+ 300: "#d1d5db",
+ 400: "#9ca3af",
+ 500: "#6b7280",
+ 600: "#4b5563",
+ 700: "#374151",
+ 800: "#1f2937",
+ 900: "#111827",
+ },
+ blueGray: {
+ 50: "#f8fafc",
+ 100: "#f1f5f9",
+ 200: "#e2e8f0",
+ 300: "#cbd5e1",
+ 400: "#94a3b8",
+ 500: "#64748b",
+ 600: "#475569",
+ 700: "#334155",
+ 800: "#1e293b",
+ 900: "#0f172a",
+ },
+};
+
+// default colors available
+const tailwind_colors = {
+ pink: {
+ 50: "#fdf2f8",
+ 100: "#fce7f3",
+ 200: "#fbcfe8",
+ 300: "#f9a8d4",
+ 400: "#f472b6",
+ 500: "#ec4899",
+ 600: "#db2777",
+ 700: "#be185d",
+ 800: "#9d174d",
+ 900: "#831843",
+ },
+ purple: {
+ 50: "#f5f3ff",
+ 100: "#ede9fe",
+ 200: "#ddd6fe",
+ 300: "#c4b5fd",
+ 400: "#a78bfa",
+ 500: "#8b5cf6",
+ 600: "#7c3aed",
+ 700: "#6d28d9",
+ 800: "#5b21b6",
+ 900: "#4c1d95",
+ },
+ indigo: {
+ 50: "#eef2ff",
+ 100: "#e0e7ff",
+ 200: "#c7d2fe",
+ 300: "#a5b4fc",
+ 400: "#818cf8",
+ 500: "#6366f1",
+ 600: "#4f46e5",
+ 700: "#4338ca",
+ 800: "#3730a3",
+ 900: "#312e81",
+ },
+ blue: {
+ 50: "#eff6ff",
+ 100: "#dbeafe",
+ 200: "#bfdbfe",
+ 300: "#93c5fd",
+ 400: "#60a5fa",
+ 500: "#3b82f6",
+ 600: "#2563eb",
+ 700: "#1d4ed8",
+ 800: "#1e40af",
+ 900: "#1e3a8a",
+ },
+ green: {
+ 50: "#ecfdf5",
+ 100: "#d1fae5",
+ 200: "#a7f3d0",
+ 300: "#6ee7b7",
+ 400: "#34d399",
+ 500: "#10b981",
+ 600: "#059669",
+ 700: "#047857",
+ 800: "#065f46",
+ 900: "#064e3b",
+ },
+ yellow: {
+ 50: "#fffbeb",
+ 100: "#fef3c7",
+ 200: "#fde68a",
+ 300: "#fcd34d",
+ 400: "#fbbf24",
+ 500: "#f59e0b",
+ 600: "#d97706",
+ 700: "#b45309",
+ 800: "#92400e",
+ 900: "#78350f",
+ },
+ red: {
+ 50: "#fef2f2",
+ 100: "#fee2e2",
+ 200: "#fecaca",
+ 300: "#fca5a5",
+ 400: "#f87171",
+ 500: "#ef4444",
+ 600: "#dc2626",
+ 700: "#b91c1c",
+ 800: "#991b1b",
+ 900: "#7f1d1d",
+ },
+ gray: {
+ 50: "#f9fafb",
+ 100: "#f3f4f6",
+ 200: "#e5e7eb",
+ 300: "#d1d5db",
+ 400: "#9ca3af",
+ 500: "#6b7280",
+ 600: "#4b5563",
+ 700: "#374151",
+ 800: "#1f2937",
+ 900: "#111827",
+ },
+};
+
+// Step #2: Transform that into an array (Array(2), Array(2), ...);
+// Example: ["fuchsia", {…}] where {…} is {50: "#fdf4ff", ...}
+const colorsArr = Object.entries(tailwind_colors);
+
+// Step #3: Transform into (Array(10), Array(10), ...) while reverting key-value;
+// Example: {#fdf4ff: "fuchsia-50"}
+var obj = Object.create({});
+const subArr = colorsArr.map((d) => {
+ return Object.entries(d[1]).flatMap((e) => {
+ obj[e[1]] = d[0] + "-" + e[0];
+ return obj;
+ });
+});
+
+// obj contains the result.
+JSON.stringify(obj);
diff --git a/manifest.json b/manifest.json
index 0a36d6fa..186edf5c 100644
--- a/manifest.json
+++ b/manifest.json
@@ -3,5 +3,6 @@
"id": "842128343887142055",
"api": "1.0.0",
"main": "public/code.js",
- "ui": "public/index.html"
+ "ui": "public/index.html",
+ "editorType": ["figma"]
}
diff --git a/package.json b/package.json
index 70a6149c..a21c53c1 100644
--- a/package.json
+++ b/package.json
@@ -16,56 +16,57 @@
"author": "Bernardo Ferrari",
"license": "GPL-3.0",
"dependencies": {
- "@figma/plugin-typings": "^1.15.0",
- "clipboard-copy": "^3.1.0",
+ "@figma/plugin-typings": "^1.19.2",
+ "clipboard-copy": "^4.0.1",
"prism-theme-night-owl": "^1.4.0",
- "sirv-cli": "^0.4.4",
+ "sirv-cli": "^1.0.11",
"svelte-prism": "^1.1.3",
- "tailwindcss": "^1.4.6"
+ "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.2"
},
"devDependencies": {
"@fullhuman/postcss-purgecss": "^2.3.0",
- "@rollup/plugin-commonjs": "^11.0.2",
+ "@rollup/plugin-commonjs": "^17.1.0",
"@rollup/plugin-image": "^2.0.4",
- "@rollup/plugin-node-resolve": "^6.1.0",
- "@rollup/plugin-typescript": "^4.1.2",
- "@types/jest": "^25.2.3",
- "@types/node": "^14.0.14",
- "@typescript-eslint/eslint-plugin": "^3.5.0",
- "@typescript-eslint/parser": "^3.5.0",
- "autoprefixer": "^9.8.4",
- "cross-env": "^5.2.1",
+ "@rollup/plugin-node-resolve": "^11.2.0",
+ "@rollup/plugin-typescript": "^8.2.0",
+ "@types/jest": "^26.0.20",
+ "@types/node": "^14.14.32",
+ "@typescript-eslint/eslint-plugin": "^4.17.0",
+ "@typescript-eslint/parser": "^4.17.0",
+ "autoprefixer": "^9.8.6",
+ "cross-env": "^7.0.3",
"css-loader": "^3.6.0",
"cssnano": "^4.1.10",
- "eslint": "^7.3.1",
- "eslint-config-prettier": "^6.11.0",
- "eslint-plugin-jest": "^23.17.1",
- "eslint-plugin-prettier": "^3.1.4",
- "figma-api-stub": "0.0.42",
+ "eslint": "^7.21.0",
+ "eslint-config-prettier": "^8.1.0",
+ "eslint-plugin-jest": "^24.1.9",
+ "eslint-plugin-prettier": "^3.3.1",
+ "figma-api-stub": "0.0.45",
+ "figma-plugin-ds-svelte": "^1.1.6",
"file-loader": "^6.0.0",
- "jest": "^26.1.0",
+ "jest": "^26.6.3",
"mini-css-extract-plugin": "^0.9.0",
"postcss": "^7.0.32",
"postcss-load-config": "^2.1.0",
"postcss-loader": "^3.0.0",
- "prettier": "^2.0.5",
- "rollup": "^1.32.1",
+ "prettier": "^2.2.1",
+ "rollup": "^2.40.0",
"rollup-plugin-html-bundle": "0.0.3",
- "rollup-plugin-livereload": "^1.1.0",
+ "rollup-plugin-livereload": "^2.0.0",
"rollup-plugin-postcss": "^2.5.0",
"rollup-plugin-purgecss": "^1.0.0",
- "rollup-plugin-svelte": "^5.2.3",
+ "rollup-plugin-svelte": "^7.1.0",
"rollup-plugin-svg": "^2.0.0",
- "rollup-plugin-terser": "^5.3.0",
- "style-loader": "^1.2.1",
- "svelte": "^3.23.2",
- "svelte-loader": "^2.13.6",
- "svelte-preprocess": "^3.9.11",
- "ts-jest": "^26.1.1",
- "ts-loader": "^7.0.5",
- "ts-node": "^8.10.2",
- "typescript": "^3.9.5",
- "url-loader": "^4.1.0",
+ "rollup-plugin-terser": "^7.0.2",
+ "style-loader": "^2.0.0",
+ "svelte": "^3.35.0",
+ "svelte-loader": "^3.0.0",
+ "svelte-preprocess": "^4.6.9",
+ "ts-jest": "^26.5.3",
+ "ts-loader": "^8.0.17",
+ "ts-node": "^9.1.1",
+ "typescript": "^4.2.3",
+ "url-loader": "^4.1.1",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.12"
}
diff --git a/postcss.config.js b/postcss.config.js
index 49269cab..e9bbd5b9 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,22 +1,19 @@
const production = !process.env.ROLLUP_WATCH || process.env.PRODUCTION;
-const tailwind = require('tailwindcss');
+const tailwind = require("tailwindcss");
-const autoprefixer = require('autoprefixer');
+const autoprefixer = require("autoprefixer");
-const purgecss = require('@fullhuman/postcss-purgecss')({
- content: ['./src/**/*.svelte', './src/**/*.html'],
- whitelistPatterns: [/svelte-/],
- whitelistPatternsChildren: [/^token/, /^Prism/, /^code/, /^pre/],
- defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
+const purgecss = require("@fullhuman/postcss-purgecss")({
+ content: ["./src/**/*.svelte", "./src/**/*.html"],
+ whitelistPatterns: [/svelte-/],
+ whitelistPatternsChildren: [/^token/, /^Prism/, /^code/, /^pre/],
+ defaultExtractor: (content) => content.match(/[A-Za-z0-9-_:/]+/g) || [],
})
-const cssnano = require('cssnano');
+const cssnano = require("cssnano");
module.exports = {
- plugins: [
- tailwind,
- ...(production ? [autoprefixer, purgecss, cssnano] : [])
- ]
+ plugins: [tailwind, ...(production ? [autoprefixer, purgecss, cssnano] : [])],
}
\ No newline at end of file
diff --git a/rollup.config.js b/rollup.config.js
index 2fef82da..8f93db44 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -1,102 +1,100 @@
-import svelte from 'rollup-plugin-svelte';
-import resolve from '@rollup/plugin-node-resolve';
-import commonjs from '@rollup/plugin-commonjs';
-import livereload from 'rollup-plugin-livereload';
-import { terser } from 'rollup-plugin-terser';
-import svg from 'rollup-plugin-svg';
-import typescript from '@rollup/plugin-typescript';
+import svelte from "rollup-plugin-svelte";
+import resolve from "@rollup/plugin-node-resolve";
+import commonjs from "@rollup/plugin-commonjs";
+import livereload from "rollup-plugin-livereload";
+import { terser } from "rollup-plugin-terser";
+import svg from "rollup-plugin-svg";
+import typescript from "@rollup/plugin-typescript";
/* Post CSS */
-import postcss from 'rollup-plugin-postcss';
-import tailwind from 'tailwindcss';
-import cssnano from 'cssnano';
+import postcss from "rollup-plugin-postcss";
+import tailwind from "tailwindcss";
+import cssnano from "cssnano";
/* Inline to single html */
-import htmlBundle from 'rollup-plugin-html-bundle';
+import htmlBundle from "rollup-plugin-html-bundle";
const production = !process.env.ROLLUP_WATCH || process.env.PRODUCTION;
export default [
- {
- input: 'src/main.js',
- output: {
- file: 'src/build/bundle.js',
- format: 'iife',
- name: 'ui'
- },
- plugins: [
- svelte({
- // enable run-time checks when not in production
- dev: !production,
- emitCss: true
- }),
+ {
+ input: "src/main.js",
+ output: {
+ file: "src/build/bundle.js",
+ format: "iife",
+ name: "ui",
+ },
+ plugins: [
+ svelte({
+ // enable run-time checks when not in production
+ dev: !production,
+ emitCss: true,
+ }),
- // If you have external dependencies installed from
- // npm, you'll most likely need these plugins. In
- // some cases you'll need additional configuration —
- // consult the documentation for details:¡
- // https://github.com/rollup/plugins/tree/master/packages/commonjs
- resolve({
- browser: true,
- dedupe: importee => importee === 'svelte' || importee.startsWith('svelte/'),
- extensions: ['.svelte', '.ts', '.mjs', '.js', '.json', '.node']
- }),
- commonjs(),
- svg(),
- postcss({
- extensions: ['.css'],
- // extract: true,
- plugins: [cssnano(), tailwind()]
- }),
- htmlBundle({
- template: 'src/template.html',
- target: 'public/index.html',
- inline: true
- }),
+ // If you have external dependencies installed from
+ // npm, you'll most likely need these plugins. In
+ // some cases you'll need additional configuration —
+ // consult the documentation for details:¡
+ // https://github.com/rollup/plugins/tree/master/packages/commonjs
+ resolve({
+ browser: true,
+ dedupe: (importee) =>
+ importee === "svelte" || importee.startsWith("svelte/"),
+ extensions: [".svelte", ".ts", ".mjs", ".js", ".json", ".node"],
+ }),
+ commonjs(),
+ svg(),
+ postcss({
+ extensions: [".css"],
+ // extract: true,
+ plugins: [cssnano(), tailwind()],
+ }),
+ htmlBundle({
+ template: "src/template.html",
+ target: "public/index.html",
+ inline: true,
+ }),
- // In dev mode, call `npm run start` once
- // the bundle has been generated
- !production && serve(),
+ // In dev mode, call `npm run start` once
+ // the bundle has been generated
+ !production && serve(),
- // Watch the `dist` directory and refresh the
- // browser on changes when not in production
- !production && livereload('public'),
+ // Watch the `dist` directory and refresh the
+ // browser on changes when not in production
+ !production && livereload("public"),
- // If we're building for production (npm run build
- // instead of npm run dev), minify
- production && terser()
- ],
- watch: {
- clearScreen: false
- }
- },
- {
- input: 'src/code.ts',
- output: {
- file: 'public/code.js',
- format: 'cjs',
- sourcemap: true,
- },
- plugins: [
- typescript(),
- commonjs(),
- production && terser()
- ]
- }];
+ // If we're building for production (npm run build
+ // instead of npm run dev), minify
+ production && terser(),
+ ],
+ watch: {
+ clearScreen: false,
+ },
+ },
+ {
+ input: "src/code.ts",
+ output: {
+ file: "public/code.js",
+ format: "cjs",
+ sourcemap: true,
+ },
+ plugins: [typescript(), commonjs(), production && terser()],
+ },
+];
function serve() {
- let started = false;
+ let started = false;
- return {
- writeBundle() {
- if (!started) {
- started = true;
+ return {
+ writeBundle() {
+ if (!started) {
+ started = true;
- require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
- stdio: ['ignore', 'inherit', 'inherit'],
- shell: true
- });
- }
- }
- };
+ require("child_process").spawn("npm", ["run", "start", "--", "--dev"], {
+ stdio: ["ignore", "inherit", "inherit"],
+ shell: true,
+ });
+ }
+ },
+ };
}
diff --git a/src/altNodes/altConversion.ts b/src/altNodes/altConversion.ts
index 6fac3539..f12f4dad 100644
--- a/src/altNodes/altConversion.ts
+++ b/src/altNodes/altConversion.ts
@@ -96,12 +96,39 @@ export const convertIntoAltNodes = (
convertDefaultShape(altNode, node);
convertCorner(altNode, node);
+ return altNode;
+ } else if (node.type === "LINE") {
+ const altNode = new AltRectangleNode();
+
+ altNode.id = node.id;
+ altNode.name = node.name;
+
+ if (altParent) {
+ altNode.parent = altParent;
+ }
+
+ convertDefaultShape(altNode, node);
+
+ // Lines have a height of zero, but they must have a height, so add 1.
+ altNode.height = 1;
+
+ // Let them be CENTER, since on Lines this property is ignored.
+ altNode.strokeAlign = "CENTER";
+
+ // Remove 1 since it now has a height of 1. It won't be visually perfect, but will be almost.
+ altNode.strokeWeight = altNode.strokeWeight - 1;
+
return altNode;
} else if (
node.type === "FRAME" ||
node.type === "INSTANCE" ||
node.type === "COMPONENT"
) {
+ const iconToRect = iconToRectangle(node, altParent);
+ if (iconToRect != null) {
+ return iconToRect;
+ }
+
return frameNodeToAlt(node, altParent);
} else if (node.type === "GROUP") {
if (node.children.length === 1 && node.visible !== false) {
@@ -110,6 +137,11 @@ export const convertIntoAltNodes = (
return convertIntoAltNodes(node.children, altParent)[0];
}
+ const iconToRect = iconToRectangle(node, altParent);
+ if (iconToRect != null) {
+ return iconToRect;
+ }
+
const altNode = new AltGroupNode();
altNode.id = node.id;
@@ -153,8 +185,24 @@ export const convertIntoAltNodes = (
convertDefaultShape(altNode, node);
// Vector support is still missing. Meanwhile, add placeholder.
- altNode.radius = 16;
- altNode.opacity = 0.5;
+ altNode.cornerRadius = 8;
+
+ if (altNode.fills === figma.mixed || altNode.fills.length === 0) {
+ // Use rose[400] from Tailwind 2 when Vector has no color.
+ altNode.fills = [
+ {
+ type: "SOLID",
+ color: {
+ r: 0.5,
+ g: 0.23,
+ b: 0.27,
+ },
+ visible: true,
+ opacity: 0.5,
+ blendMode: "NORMAL",
+ },
+ ];
+ }
return altNode;
}
@@ -166,23 +214,96 @@ export const convertIntoAltNodes = (
return mapped.filter(notEmpty);
};
+const iconToRectangle = (
+ node: FrameNode | InstanceNode | ComponentNode | GroupNode,
+ altParent: AltFrameNode | AltGroupNode | null
+): AltRectangleNode | null => {
+ if (node.children.every((d) => d.type === "VECTOR")) {
+ const altNode = new AltRectangleNode();
+ altNode.id = node.id;
+ altNode.name = node.name;
+
+ if (altParent) {
+ altNode.parent = altParent;
+ }
+
+ convertBlend(altNode, node);
+
+ // width, x, y
+ convertLayout(altNode, node);
+
+ // Vector support is still missing. Meanwhile, add placeholder.
+ altNode.cornerRadius = 8;
+
+ altNode.strokes = [];
+ altNode.strokeWeight = 0;
+ altNode.strokeMiterLimit = 0;
+ altNode.strokeAlign = "CENTER";
+ altNode.strokeCap = "NONE";
+ altNode.strokeJoin = "BEVEL";
+ altNode.dashPattern = [];
+ altNode.fillStyleId = "";
+ altNode.strokeStyleId = "";
+
+ altNode.fills = [
+ {
+ type: "IMAGE",
+ imageHash: "",
+ scaleMode: "FIT",
+ visible: true,
+ opacity: 0.5,
+ blendMode: "NORMAL",
+ },
+ ];
+
+ return altNode;
+ }
+ return null;
+};
+
const convertLayout = (altNode: AltLayoutMixin, node: LayoutMixin) => {
- altNode.x = node.x;
- altNode.y = node.y;
+ // Get the correct X/Y position when rotation is applied.
+ // This won't guarantee a perfect position, since we would still
+ // need to calculate the offset based on node width/height to compensate,
+ // which we are not currently doing. However, this is a lot better than nothing and will help LineNode.
+ if (node.rotation !== undefined && Math.round(node.rotation) !== 0) {
+ const boundingRect = getBoundingRect(node);
+ altNode.x = boundingRect.x;
+ altNode.y = boundingRect.y;
+ } else {
+ altNode.x = node.x;
+ altNode.y = node.y;
+ }
+
altNode.width = node.width;
altNode.height = node.height;
altNode.rotation = node.rotation;
altNode.layoutAlign = node.layoutAlign;
+ altNode.layoutGrow = node.layoutGrow;
};
const convertFrame = (altNode: AltFrameMixin, node: DefaultFrameMixin) => {
altNode.layoutMode = node.layoutMode;
+ altNode.primaryAxisSizingMode = node.primaryAxisSizingMode;
altNode.counterAxisSizingMode = node.counterAxisSizingMode;
- altNode.paddingLeft = node.horizontalPadding;
- altNode.paddingRight = node.horizontalPadding;
- altNode.paddingTop = node.verticalPadding;
- altNode.paddingBottom = node.verticalPadding;
+ // Fix this: https://stackoverflow.com/questions/57859754/flexbox-space-between-but-center-if-one-element
+ // It affects HTML, Tailwind, Flutter and possibly SwiftUI. So, let's be consistent.
+ if (
+ node.primaryAxisAlignItems === "SPACE_BETWEEN" &&
+ node.children.length === 1
+ ) {
+ altNode.primaryAxisAlignItems = "CENTER";
+ } else {
+ altNode.primaryAxisAlignItems = node.primaryAxisAlignItems;
+ }
+
+ altNode.counterAxisAlignItems = node.counterAxisAlignItems;
+
+ altNode.paddingLeft = node.paddingLeft;
+ altNode.paddingRight = node.paddingRight;
+ altNode.paddingTop = node.paddingTop;
+ altNode.paddingBottom = node.paddingBottom;
altNode.itemSpacing = node.itemSpacing;
altNode.layoutGrids = node.layoutGrids;
@@ -224,7 +345,7 @@ const convertDefaultShape = (
// opacity, visible
convertBlend(altNode, node);
- // fills, storkes
+ // fills, strokes
convertGeometry(altNode, node);
// width, x, y
@@ -261,6 +382,79 @@ const convertIntoAltText = (altNode: AltTextNode, node: TextNode) => {
altNode.lineHeight = node.lineHeight;
};
-function notEmpty
//
//
//
`
@@ -444,7 +480,7 @@ describe("Tailwind Size", () => {
// superNode.appendChild(node);
// expect(tailwindMain(superNode.parent?.id ?? "", [superNode])).toEqual(
- // `\n
+ // `\n
`);
});
it("ellipse with no size", () => {
@@ -119,12 +121,19 @@ describe("Tailwind Main", () => {
frameNode.width = 100;
frameNode.height = 40;
frameNode.counterAxisSizingMode = "AUTO";
+ frameNode.primaryAxisSizingMode = "AUTO";
+
+ frameNode.primaryAxisAlignItems = "SPACE_BETWEEN";
+ frameNode.counterAxisAlignItems = "CENTER";
frameNode.children = [textNode];
textNode.parent = frameNode;
+ // In real life, justify-between would be converted to justify-center in the altConversion.
expect(tailwindMain([frameNode])).toEqual(
- '
//
`
// );
// });
@@ -490,7 +526,7 @@ describe("Tailwind Size", () => {
// const group = figma.group([grayLargeRect, blueSmallRect], node);
// expect(tailwindMain(node.id, [group])).toEqual(
- // `\n
+ // `\n
`);
});
it("Group with relative position", () => {
@@ -89,7 +90,8 @@ describe("Tailwind Main", () => {
child.parent = node;
expect(tailwindMain([node], "", true, true))
.toEqual(`
//
`
// );
// });
diff --git a/__tests__/tailwind/tailwindMain.test.ts b/__tests__/tailwind/tailwindMain.test.ts
index 86edb0ca..9c214703 100644
--- a/__tests__/tailwind/tailwindMain.test.ts
+++ b/__tests__/tailwind/tailwindMain.test.ts
@@ -23,7 +23,7 @@ describe("Tailwind Main", () => {
node.counterAxisSizingMode = "FIXED";
const child1 = new AltRectangleNode();
- child1.width = 257;
+ child1.width = 385;
child1.height = 8;
child1.x = 9;
child1.y = 9;
@@ -41,7 +41,7 @@ describe("Tailwind Main", () => {
const child2 = new AltRectangleNode();
child2.width = 8;
- child2.height = 257;
+ child2.height = 385;
child2.x = 9;
child2.y = 9;
child2.name = "RECT2";
@@ -53,8 +53,9 @@ describe("Tailwind Main", () => {
expect(tailwindMain([convertToAutoLayout(node)]))
.toEqual(`
-
-
`);
+
+
+
-
`);
+
+username
+
`
);
frameNode.name = "this is the InPuT";
@@ -137,7 +146,7 @@ describe("Tailwind Main", () => {
const node = new AltRectangleNode();
node.name = "RECT";
- const builder = new TailwindDefaultBuilder(true, node, true);
+ const builder = new TailwindDefaultBuilder(node, true, true);
expect(builder.build()).toEqual(' className="RECT"');
@@ -186,7 +195,8 @@ describe("Tailwind Main", () => {
expect(tailwindMain([convertToAutoLayout(node)], "", true, true))
.toEqual(`username
+
-
-
`);
+
+
+") + : node.characters; + + return [builderResult, charsWithLineBreak]; +}; + +const htmlText = ( + node: AltTextNode, + isInput: boolean = false, + isJsx: boolean +): string | [string, string] => { + // follow the website order, to make it easier + const [builder, charsWithLineBreak] = htmlBuilder(node, isJsx); + + if (isInput) { + return [builder.style, charsWithLineBreak]; + } else { + return `\n
+
+{/if}
diff --git a/src/ui/GenericSolidColorSection.svelte b/src/ui/GenericSolidColorSection.svelte
new file mode 100644
index 00000000..1e18589d
--- /dev/null
+++ b/src/ui/GenericSolidColorSection.svelte
@@ -0,0 +1,66 @@
+
+
+{#if colorsObservable.length > 0}
+
+
+
+
+
+ {#each gradientsObservable as item}
+
+
+ Gradients
+
+
+
+ {/each}
+
+
+{/if}
diff --git a/src/ui/Main.svelte b/src/ui/Main.svelte
index a2b4edac..a34fa544 100644
--- a/src/ui/Main.svelte
+++ b/src/ui/Main.svelte
@@ -26,7 +26,10 @@
import ScreenTailwind from "./ScreenTailwind.svelte";
import ScreenFlutter from "./ScreenFlutter.svelte";
import ScreenSwiftUI from "./ScreenSwiftUI.svelte";
+ import ScreenHTML from "./ScreenHtml.svelte";
import ScreenAbout from "./ScreenAbout.svelte";
+
+ import { GlobalCSS } from "figma-plugin-ds-svelte";
diff --git a/src/ui/TailwindItemColor.svelte b/src/ui/TailwindItemColor.svelte
index 56e569ea..df441c5d 100644
--- a/src/ui/TailwindItemColor.svelte
+++ b/src/ui/TailwindItemColor.svelte
@@ -1,11 +1,13 @@
+
+
+
+
+ {#each colorsObservable as item}
+ {#if type === 'html' || type === 'swiftui'}
+
+
+ Colors
+
+
+ {/if}
+ {#if type === 'tailwind'}
+
+
+ {/if}
+ {#if type === 'flutter'}
+
+
+ {/if}
+ {/each}
+
-
diff --git a/src/ui/TailwindItemText.svelte b/src/ui/TailwindItemText.svelte
index 8bf0022a..21bb2573 100644
--- a/src/ui/TailwindItemText.svelte
+++ b/src/ui/TailwindItemText.svelte
@@ -19,18 +19,16 @@
}
}
-
diff --git a/src/ui/svelte-tabs/Tab.svelte b/src/ui/svelte-tabs/Tab.svelte
index d51dea15..b8aaee24 100644
--- a/src/ui/svelte-tabs/Tab.svelte
+++ b/src/ui/svelte-tabs/Tab.svelte
@@ -54,7 +54,7 @@
} */
-{name}
+{colorName}
{hex}
-
+