From f733eff20b5e91018bbbb3c5bbf3970dc9627f02 Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Sat, 5 Nov 2022 18:33:14 +0100
Subject: [PATCH] fix reduction of the fontFamily list,  needed a way to get
 value wtihout fallbacks

---
 .../font-weight/font-weight-control.tsx       |  2 +-
 .../react-sdk/src/stitches/to-css.test.ts     | 20 ++++++++++++++++++
 packages/react-sdk/src/stitches/to-css.ts     | 21 ++++++++++++++++---
 3 files changed, 39 insertions(+), 4 deletions(-)

diff --git a/apps/designer/app/designer/features/style-panel/controls/font-weight/font-weight-control.tsx b/apps/designer/app/designer/features/style-panel/controls/font-weight/font-weight-control.tsx
index 635250dc9f..3cb2670ead 100644
--- a/apps/designer/app/designer/features/style-panel/controls/font-weight/font-weight-control.tsx
+++ b/apps/designer/app/designer/features/style-panel/controls/font-weight/font-weight-control.tsx
@@ -67,7 +67,7 @@ export const FontWeightControl = ({
   });
 
   const { labels, selectedLabel, availableFontWeights } = useFontWeights(
-    toValue(fontFamily),
+    toValue(fontFamily, { withFallback: false }),
     toValue(fontWeight)
   );
 
diff --git a/packages/react-sdk/src/stitches/to-css.test.ts b/packages/react-sdk/src/stitches/to-css.test.ts
index dde8f51b09..2ed740c856 100644
--- a/packages/react-sdk/src/stitches/to-css.test.ts
+++ b/packages/react-sdk/src/stitches/to-css.test.ts
@@ -50,6 +50,26 @@ describe("Convert WS CSS rules to stitches", () => {
     });
   });
 
+  test("withFallback option", () => {
+    const cssRules: Array<CssRule> = [
+      {
+        style: {
+          fontFamily: {
+            type: "fontFamily",
+            value: ["Courier New"],
+          },
+        },
+        breakpoint: "0",
+      },
+    ];
+    const stitchesCss = toCss(cssRules, breakpoints, { withFallback: false });
+    expect(stitchesCss).toEqual({
+      "@0": {
+        fontFamily: "Courier New",
+      },
+    });
+  });
+
   test("sort order based on maxWidth in breakpoints", () => {
     const cssRules: Array<CssRule> = [
       {
diff --git a/packages/react-sdk/src/stitches/to-css.ts b/packages/react-sdk/src/stitches/to-css.ts
index 3823549234..9b22caaec4 100644
--- a/packages/react-sdk/src/stitches/to-css.ts
+++ b/packages/react-sdk/src/stitches/to-css.ts
@@ -2,12 +2,26 @@ import type { CSS } from "./stitches";
 import type { StyleProperty, StyleValue, CssRule, Breakpoint } from "../css";
 import { DEFAULT_FONT_FALLBACK, SYSTEM_FONTS } from "@webstudio-is/fonts";
 
-export const toValue = (value?: StyleValue): string => {
+type Options = {
+  withFallback: boolean;
+};
+
+const defaultOptions = {
+  withFallback: true,
+};
+
+export const toValue = (
+  value?: StyleValue,
+  { withFallback }: Options = defaultOptions
+): string => {
   if (value === undefined) return "";
   if (value.type === "unit") {
     return value.value + (value.unit === "number" ? "" : value.unit);
   }
   if (value.type === "fontFamily") {
+    if (withFallback === false) {
+      return value.value[0];
+    }
     const family = value.value[0];
     const fallbacks = SYSTEM_FONTS.get(family);
     if (Array.isArray(fallbacks)) {
@@ -23,7 +37,8 @@ export const toValue = (value?: StyleValue): string => {
  */
 export const toCss = (
   cssRules: Array<CssRule>,
-  breakpoints: Array<Breakpoint>
+  breakpoints: Array<Breakpoint>,
+  options: Options = defaultOptions
 ): CSS => {
   const css: CSS = {};
 
@@ -45,7 +60,7 @@ export const toCss = (
     for (const property in cssRule.style) {
       const value = cssRule.style[property as StyleProperty];
       if (value === undefined) continue;
-      style[property] = toValue(value);
+      style[property] = toValue(value, options);
     }
 
     if (cssRule.breakpoint in breakpointsMap) {