Round to tailwind values.

bernaferrari · bernaferrari · commit 729efab133f7 · 2023-07-09T14:59:23.000-03:00
diff --git a/packages/backend/src/tailwind/builderImpl/tailwindBorder.ts b/packages/backend/src/tailwind/builderImpl/tailwindBorder.ts
@@ -58,12 +58,16 @@ export const tailwindBorderRadius = (node: SceneNode): string => {
   }
 
   const getRadius = (radius: number) => {
-    if (radius > 24) {
-      // special case. If height is 90 and cornerRadius is 45, it is full.
-      return `-[${sliceNum(radius)}px]`;
-    } else {
-      return pxToBorderRadius(radius);
+    // if (radius > 24) {
+    //   // special case. If height is 90 and cornerRadius is 45, it is full.
+    //   return `[${sliceNum(radius)}px]`;
+    // } else {
+    const r = pxToBorderRadius(radius);
+    if (r) {
+      return `-${r}`;
     }
+    return "";
+    // }
   };
 
   const radius = getCommonRadius(node);
diff --git a/packages/backend/src/tailwind/conversionTables.ts b/packages/backend/src/tailwind/conversionTables.ts
@@ -1,4 +1,5 @@
 import { sliceNum } from "../common/numToAutoFixed";
+import { localTailwindSettings } from "./tailwindMain";
 
 export const nearestValue = (goal: number, array: Array<number>): number => {
   return array.reduce((prev, curr) => {
@@ -27,65 +28,36 @@ export const exactValue = (
  * Therefore, a conversion is necessary. Rem = Pixel / 16.abs
  * Then, find in the corresponding table the closest value.
  */
-const pixelToTailwindValue = (
+const pxToRemToTailwind = (
   value: number,
   conversionMap: Record<number, string>
 ): string => {
-  return conversionMap[
-    nearestValue(
-      value / 16,
-      Object.keys(conversionMap).map((d) => +d)
-    )
-  ];
-};
+  const keys = Object.keys(conversionMap).map((d) => +d);
+  const convertedValue = exactValue(value / 16, keys);
 
-const pixelToTailwindRemExact = (
-  value: number,
-  conversionMap: Record<number, string>
-): string | null => {
-  const exactValueFound = Object.entries(conversionMap).find(
-    ([_, remValue]) => +remValue === value
-  );
+  if (convertedValue) {
+    return conversionMap[convertedValue];
+  } else if (localTailwindSettings.roundTailwind) {
+    return conversionMap[nearestValue(value / 16, keys)];
+  }
 
-  return exactValueFound ? exactValueFound[0] : null;
+  return `[${sliceNum(value)}px]`;
 };
 
-const pixelToTailwindPxExact = (
+const pxToTailwind = (
   value: number,
   conversionMap: Record<number, string>
 ): string | null => {
-  const convertedValue = exactValue(
-    value,
-    Object.keys(conversionMap).map((d) => +d)
-  );
+  const keys = Object.keys(conversionMap).map((d) => +d);
+  const convertedValue = exactValue(value, keys);
 
-  if (!convertedValue) {
-    return null;
+  if (convertedValue) {
+    return conversionMap[convertedValue];
+  } else if (localTailwindSettings.roundTailwind) {
+    return conversionMap[nearestValue(value, keys)];
   }
 
-  return conversionMap[convertedValue];
-};
-
-const mapLetterSpacing: Record<number, string> = {
-  "-0.05": "tighter",
-  "-0.025": "tight",
-  // 0: "normal",
-  0.025: "wide",
-  0.05: "wider",
-  0.1: "widest",
-};
-
-const mapLineHeight: Record<number, string> = {
-  0.75: "3",
-  1: "none",
-  1.25: "tight",
-  1.375: "snug",
-  1.5: "normal",
-  1.625: "relaxed",
-  2: "loose",
-  1.75: "7",
-  2.25: "9",
-  2.5: "10",
+  return `[${sliceNum(value)}px]`;
 };
 
 const mapFontSize: Record<number, string> = {
@@ -129,40 +101,41 @@ const mapBlur: Record<number, string> = {
 };
 
 const mapWidthHeightSize: Record<number, string> = {
-  // 0: "0",
-  0.5: "2",
-  1: "4",
-  1.5: "6",
-  2: "8",
-  2.5: "10",
-  3: "12",
-  3.5: "14",
-  4: "16",
-  5: "20",
-  6: "24",
-  7: "28",
-  8: "32",
-  9: "36",
-  10: "40",
-  11: "44",
-  12: "48",
-  14: "56",
-  16: "64",
-  20: "80",
-  24: "96",
-  28: "112",
-  32: "128",
-  36: "144",
-  40: "160",
-  44: "176",
-  48: "192",
-  52: "208",
-  56: "224",
-  60: "240",
-  64: "256",
-  72: "288",
-  80: "320",
-  96: "384",
+  // '0: 0',
+  1: "px",
+  2: "0.5",
+  4: "1",
+  6: "1.5",
+  8: "2",
+  10: "2.5",
+  12: "3",
+  14: "3.5",
+  16: "4",
+  20: "5",
+  24: "6",
+  28: "7",
+  32: "8",
+  36: "9",
+  40: "10",
+  44: "11",
+  48: "12",
+  56: "14",
+  64: "16",
+  80: "20",
+  96: "24",
+  112: "28",
+  128: "32",
+  144: "36",
+  160: "40",
+  176: "44",
+  192: "48",
+  208: "52",
+  224: "56",
+  240: "60",
+  256: "64",
+  288: "72",
+  320: "80",
+  384: "96",
 };
 
 export const opacityValues = [
@@ -172,23 +145,45 @@ export const opacityValues = [
 export const nearestOpacity = (nodeOpacity: number): number =>
   nearestValue(nodeOpacity * 100, opacityValues);
 
+const mapLetterSpacing: Record<number, string> = {
+  "-0.05": "tighter",
+  "-0.025": "tight",
+  // 0: "normal",
+  0.025: "wide",
+  0.05: "wider",
+  0.1: "widest",
+};
+
 export const pxToLetterSpacing = (value: number): string =>
-  pixelToTailwindValue(value, mapLetterSpacing);
+  pxToRemToTailwind(value, mapLetterSpacing);
+
+const mapLineHeight: Record<number, string> = {
+  0.75: "3",
+  1: "none",
+  1.25: "tight",
+  1.375: "snug",
+  1.5: "normal",
+  1.625: "relaxed",
+  2: "loose",
+  1.75: "7",
+  2.25: "9",
+  2.5: "10",
+};
 
 export const pxToLineHeight = (value: number): string =>
-  pixelToTailwindValue(value, mapLineHeight);
+  pxToRemToTailwind(value, mapLineHeight);
 
 export const pxToFontSize = (value: number): string =>
-  pixelToTailwindValue(value, mapFontSize);
+  pxToRemToTailwind(value, mapFontSize);
 
 export const pxToBorderRadius = (value: number): string =>
-  pixelToTailwindValue(value, mapBorderRadius);
+  pxToRemToTailwind(value, mapBorderRadius);
 
 export const pxToBlur = (value: number): string | null =>
-  pixelToTailwindPxExact(value, mapBlur);
+  pxToTailwind(value, mapBlur);
 
 export const pxToLayoutSize = (value: number): string => {
-  const tailwindValue = pixelToTailwindRemExact(value, mapWidthHeightSize);
+  const tailwindValue = pxToTailwind(value, mapWidthHeightSize);
   if (tailwindValue) {
     return tailwindValue;
   }
diff --git a/packages/backend/src/tailwind/tailwindMain.ts b/packages/backend/src/tailwind/tailwindMain.ts
@@ -7,7 +7,7 @@ import { PluginSettings } from "../code";
 import { tailwindAutoLayoutProps } from "./builderImpl/tailwindAutoLayout";
 import { commonSortChildrenWhenInferredAutoLayout } from "../common/commonChildrenOrder";
 
-let localSettings: PluginSettings;
+export let localTailwindSettings: PluginSettings;
 
 let previousExecutionCache: { style: string; text: string }[];
 
@@ -17,10 +17,10 @@ export const tailwindMain = (
   sceneNode: Array<SceneNode>,
   settings: PluginSettings
 ): string => {
-  localSettings = settings;
+  localTailwindSettings = settings;
   previousExecutionCache = [];
 
-  let result = tailwindWidgetGenerator(sceneNode, localSettings.jsx);
+  let result = tailwindWidgetGenerator(sceneNode, localTailwindSettings.jsx);
 
   // remove the initial \n that is made in Container.
   if (result.length > 0 && result.startsWith("\n")) {
@@ -82,7 +82,7 @@ const tailwindGroup = (node: GroupNode, isJsx: boolean = false): string => {
 
   const vectorIfExists = tailwindVector(
     node,
-    localSettings.layerName,
+    localTailwindSettings.layerName,
     "",
     isJsx
   );
@@ -91,12 +91,12 @@ const tailwindGroup = (node: GroupNode, isJsx: boolean = false): string => {
   // this needs to be called after CustomNode because widthHeight depends on it
   const builder = new TailwindDefaultBuilder(
     node,
-    localSettings.layerName,
+    localTailwindSettings.layerName,
     isJsx
   )
     .blend(node)
-    .size(node, localSettings.optimizeLayout)
-    .position(node, localSettings.optimizeLayout);
+    .size(node, localTailwindSettings.optimizeLayout)
+    .position(node, localTailwindSettings.optimizeLayout);
 
   if (builder.attributes || builder.style) {
     const attr = builder.build("");
@@ -112,10 +112,10 @@ const tailwindGroup = (node: GroupNode, isJsx: boolean = false): string => {
 export const tailwindText = (node: TextNode, isJsx: boolean): string => {
   let layoutBuilder = new TailwindTextBuilder(
     node,
-    localSettings.layerName,
+    localTailwindSettings.layerName,
     isJsx
   )
-    .commonPositionStyles(node, localSettings.optimizeLayout)
+    .commonPositionStyles(node, localTailwindSettings.optimizeLayout)
     .textAlign(node);
 
   const styledHtml = layoutBuilder.getTextSegments(node.id);
@@ -141,7 +141,7 @@ const tailwindFrame = (
   const childrenStr = tailwindWidgetGenerator(
     commonSortChildrenWhenInferredAutoLayout(
       node,
-      localSettings.optimizeLayout
+      localTailwindSettings.optimizeLayout
     ),
     isJsx
   );
@@ -150,7 +150,7 @@ const tailwindFrame = (
     const rowColumn = tailwindAutoLayoutProps(node, node);
     return tailwindContainer(node, childrenStr, rowColumn, isJsx);
   } else {
-    if (localSettings.optimizeLayout && node.inferredAutoLayout !== null) {
+    if (localTailwindSettings.optimizeLayout && node.inferredAutoLayout !== null) {
       const rowColumn = tailwindAutoLayoutProps(node, node.inferredAutoLayout);
       return tailwindContainer(node, childrenStr, rowColumn, isJsx);
     }
@@ -181,8 +181,8 @@ export const tailwindContainer = (
     return children;
   }
 
-  let builder = new TailwindDefaultBuilder(node, localSettings.layerName, isJsx)
-    .commonPositionStyles(node, localSettings.optimizeLayout)
+  let builder = new TailwindDefaultBuilder(node, localTailwindSettings.layerName, isJsx)
+    .commonPositionStyles(node, localTailwindSettings.optimizeLayout)
     .commonShapeStyles(node);
 
   if (builder.attributes || additionalAttr) {
@@ -221,10 +221,10 @@ export const tailwindContainer = (
 export const tailwindLine = (node: LineNode, isJsx: boolean): string => {
   const builder = new TailwindDefaultBuilder(
     node,
-    localSettings.layerName,
+    localTailwindSettings.layerName,
     isJsx
   )
-    .commonPositionStyles(node, localSettings.optimizeLayout)
+    .commonPositionStyles(node, localTailwindSettings.optimizeLayout)
     .commonShapeStyles(node);
 
   return `\n<div${builder.build()}></div>`;
@@ -234,11 +234,11 @@ export const tailwindSection = (node: SectionNode, isJsx: boolean): string => {
   const childrenStr = tailwindWidgetGenerator(node.children, isJsx);
   const builder = new TailwindDefaultBuilder(
     node,
-    localSettings.layerName,
+    localTailwindSettings.layerName,
     isJsx
   )
-    .size(node, localSettings.optimizeLayout)
-    .position(node, localSettings.optimizeLayout)
+    .size(node, localTailwindSettings.optimizeLayout)
+    .position(node, localTailwindSettings.optimizeLayout)
     .customColor(node.fills, "bg");
 
   if (childrenStr) {
diff --git a/packages/backend/src/tailwind/tailwindTextBuilder.ts b/packages/backend/src/tailwind/tailwindTextBuilder.ts
@@ -4,7 +4,11 @@ import {
   commonLineHeight,
 } from "../common/commonTextHeightSpacing";
 import { tailwindColorFromFills } from "./builderImpl/tailwindColor";
-import { pxToLetterSpacing, pxToLineHeight } from "./conversionTables";
+import {
+  pxToFontSize,
+  pxToLetterSpacing,
+  pxToLineHeight,
+} from "./conversionTables";
 import { TailwindDefaultBuilder } from "./tailwindDefaultBuilder";
 
 export class TailwindTextBuilder extends TailwindDefaultBuilder {
@@ -55,22 +59,8 @@ export class TailwindTextBuilder extends TailwindDefaultBuilder {
     return tailwindColorFromFills(fills, "text");
   };
 
-  getTailwindLetterSpacingStyle = (letterSpacing: any) => {
-    // Convert letterSpacing to the appropriate Tailwind CSS class.
-    // This can be based on your project's configuration and letterSpacing scale.
-    // For example, suppose your project uses the default Tailwind CSS letterSpacing scale:
-    if (letterSpacing.unit === "PIXELS") {
-      return `tracking-${letterSpacing.value}px`;
-    } else {
-      return `tracking-${letterSpacing.value * 100}%`;
-    }
-  };
-
   fontSize = (fontSize: number) => {
-    // Convert fontSize to the appropriate Tailwind CSS class.
-    // This can be based on your project's configuration and fontSize scale.
-    // For example, suppose your project uses the default Tailwind CSS fontSize scale:
-    return `text-[${fontSize}px]`;
+    return `text-${pxToFontSize(fontSize)}`;
   };
 
   fontWeight = (fontWeight: number): string => {
diff --git a/packages/plugin-ui/src/PluginUI.tsx b/packages/plugin-ui/src/PluginUI.tsx
