fix reduction of the fontFamily list, needed a way to get value wtihout fallbacks

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)
   );
 

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> = [
       {

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) {