Add custom base font

Author: bernaferrari

apps/plugin/plugin-src/code.ts

@@ -33,6 +33,7 @@ export const defaultPluginSettings: PluginSettings = {
   embedVectors: false,
   htmlGenerationMode: "html",
   tailwindGenerationMode: "jsx",
+  baseFontSize: 16,
 };
 
 // A helper type guard to ensure the key belongs to the PluginSettings type
@@ -175,7 +176,7 @@ const codegenMode = async () => {
         node,
       );
 
-      const nodeJson = await nodesToJSON([node]);
+      const nodeJson = await nodesToJSON([node], userPluginSettings);
       const convertedSelection = await convertIntoNodes(nodeJson, null);
       console.log(
         "[DEBUG] codegen.generate - Converted selection:",

apps/plugin/ui-src/App.tsx

@@ -124,7 +124,7 @@ export default function App() {
   };
   const handlePreferencesChange = (
     key: keyof PluginSettings,
-    value: boolean | string,
+    value: boolean | string | number,
   ) => {
     if (state.settings && state.settings[key] === value) {
       // do nothing

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

@@ -12,14 +12,11 @@ const formatTailwindSizeValue = (
   prefix: string,
   settings?: TailwindSettings,
 ): string => {
-  // Try to find a matching Tailwind size class
-  if (settings?.roundTailwindValues) {
-    const tailwindSize = pxToLayoutSize(size);
+  const tailwindSize = pxToLayoutSize(size);
 
-    // If we found a matching Tailwind class, use it
-    if (!tailwindSize.startsWith("[")) {
-      return `${prefix}-${tailwindSize}`;
-    }
+  // If we found a matching Tailwind class, use it
+  if (!tailwindSize.startsWith("[")) {
+    return `${prefix}-${tailwindSize}`;
   }
 
   // No matching class or rounding disabled, use arbitrary value

packages/backend/src/tailwind/conversionTables.ts

@@ -44,15 +44,17 @@ export const exactValue = (
 /**
  * convert pixel values to Tailwind attributes.
  * by default, Tailwind uses rem, while Figma uses px.
- * Therefore, a conversion is necessary. Rem = Pixel / 16.abs
+ * Therefore, a conversion is necessary. Rem = Pixel / baseFontSize
  * Then, find in the corresponding table the closest value.
  */
 const pxToRemToTailwind = (
   value: number,
   conversionMap: Record<number, string>,
 ): string => {
   const keys = Object.keys(conversionMap).map((d) => +d);
-  const remValue = value / 16;
+  // Use the configured base font size or fall back to default 16px
+  const baseFontSize = localTailwindSettings.baseFontSize || 16;
+  const remValue = value / baseFontSize;
   const convertedValue = exactValue(remValue, keys);
 
   if (convertedValue) {
@@ -76,6 +78,8 @@ const pxToTailwind = (
   const keys = Object.keys(conversionMap).map((d) => +d);
   const convertedValue = exactValue(value, keys);
 
+  console.log("convertedValue", convertedValue);
+
   if (convertedValue) {
     return conversionMap[convertedValue];
   } else if (localTailwindSettings.roundTailwindValues) {
@@ -111,30 +115,16 @@ export const pxToBlur = (value: number): string | null => {
 };
 
 export const pxToLayoutSize = (value: number): string => {
-  // First check if it's a direct match to avoid rounding errors
-  const exactValue = Object.keys(config.layoutSize)
-    .map(Number)
-    .find((size) => Math.abs(value - size) < 0.05);
-
-  if (exactValue !== undefined) {
-    return (config.layoutSize as any)[exactValue];
-  }
-
-  // If not an exact match but rounding is enabled, check for a close match
-  if (localTailwindSettings.roundTailwindValues) {
-    const thresholdValue = nearestValueWithThreshold(
-      value,
-      Object.keys(config.layoutSize).map(Number),
-      15, // 15% threshold for layout sizes
-    );
-
-    if (thresholdValue !== null) {
-      return (config.layoutSize as any)[thresholdValue];
-    }
-  }
-
-  // No match found, return arbitrary value
-  return `[${numberToFixedString(value)}px]`;
+  // Scale the input value according to the base font size ratio
+  const baseFontSize = localTailwindSettings.baseFontSize || 16;
+  // If baseFontSize is different than 16, we need to adjust the pixel value
+  // For example, with baseFontSize=14, 7px should match with the key for 8px (w-2)
+  const scaledValue = (value * 16) / baseFontSize;
+
+  // Use pxToTailwind directly with the scaled value, since the keys in config.layoutSize
+  // are likely in pixels based on a 16px base font size
+  const result = pxToTailwind(scaledValue, config.layoutSize);
+  return result !== null ? result : `[${numberToFixedString(value)}px]`;
 };
 
 export const nearestOpacity = (nodeOpacity: number): number => {

packages/plugin-ui/src/PluginUI.tsx

@@ -31,7 +31,7 @@ type PluginUIProps = {
   settings: PluginSettings | null;
   onPreferenceChanged: (
     key: keyof PluginSettings,
-    value: boolean | string,
+    value: boolean | string | number,
   ) => void;
   colors: SolidColorConversion[];
   gradients: LinearGradientConversion[];
@@ -97,9 +97,9 @@ export const PluginUI = (props: PluginUIProps) => {
             {isEmpty === false && props.htmlPreview && (
               <Preview htmlPreview={props.htmlPreview} />
             )}
-            
+
             {warnings.length > 0 && <WarningsPanel warnings={warnings} />}
-            
+
             <CodePanel
               code={props.code}
               selectedFramework={props.selectedFramework}

packages/plugin-ui/src/components/CodePanel.tsx

@@ -12,6 +12,7 @@ import EmptyState from "./EmptyState";
 import SettingsGroup from "./SettingsGroup";
 import CustomPrefixInput from "./CustomPrefixInput";
 import FrameworkTabs from "./FrameworkTabs";
+import { TailwindSettings } from "./tailwindSettings";
 
 interface CodePanelProps {
   code: string;
@@ -21,7 +22,7 @@ interface CodePanelProps {
   selectPreferenceOptions: SelectPreferenceOptions[];
   onPreferenceChanged: (
     key: keyof PluginSettings,
-    value: boolean | string,
+    value: boolean | string | number,
   ) => void;
 }
 
@@ -202,9 +203,9 @@ const CodePanel = (props: CodePanelProps) => {
               onPreferenceChanged={onPreferenceChanged}
             >
               {selectedFramework === "Tailwind" && (
-                <CustomPrefixInput
-                  initialValue={settings?.customTailwindPrefix || ""}
-                  onValueChange={handleCustomPrefixChange}
+                <TailwindSettings
+                  settings={settings}
+                  onPreferenceChanged={onPreferenceChanged}
                 />
               )}
             </SettingsGroup>