refactor: move css generation to sdk

apps/builder/app/canvas/shared/styles.ts

@@ -9,13 +9,13 @@ import {
   rootComponent,
   type StyleDecl,
   type StyleSourceSelection,
+  createImageValueTransformer,
+  addFontRules,
 } from "@webstudio-is/sdk";
 import {
   collapsedAttribute,
   idAttribute,
   editingPlaceholderVariable,
-  addGlobalRules,
-  createImageValueTransformer,
   editablePlaceholderVariable,
   componentAttribute,
 } from "@webstudio-is/react-sdk";
@@ -500,7 +500,8 @@ export const GlobalStyles = () => {
 
   useLayoutEffect(() => {
     fontsAndDefaultsSheet.clear();
-    addGlobalRules(fontsAndDefaultsSheet, {
+    addFontRules({
+      sheet: fontsAndDefaultsSheet,
       assets,
       assetBaseUrl,
     });

packages/cli/src/prebuild.ts

@@ -16,7 +16,6 @@ import pLimit from "p-limit";
 import { log, spinner } from "@clack/prompts";
 import merge from "deepmerge";
 import {
-  generateCss,
   generateWebstudioComponent,
   getIndexesWithinAncestors,
   type Params,
@@ -48,6 +47,7 @@ import {
   isCoreComponent,
   coreMetas,
   SYSTEM_VARIABLE_ID,
+  generateCss,
 } from "@webstudio-is/sdk";
 import type { Data } from "@webstudio-is/http-client";
 import { LOCAL_DATA_FILE } from "./config";

packages/react-sdk/src/index.ts

@@ -1,5 +1,4 @@
 export * from "./remix";
-export * from "./css/index";
 export * from "./components/components-utils";
 export * from "./embed-template";
 export * from "./props";

packages/sdk-cli/src/generate-stories.ts

@@ -11,9 +11,9 @@ import {
   parseComponentName,
   getStyleDeclKey,
   coreMetas,
+  generateCss,
 } from "@webstudio-is/sdk";
 import {
-  generateCss,
   generateWebstudioComponent,
   getIndexesWithinAncestors,
   namespaceMeta,

packages/sdk/package.json

@@ -46,6 +46,7 @@
     "@webstudio-is/icons": "workspace:*",
     "acorn": "^8.14.0",
     "acorn-walk": "^8.3.4",
+    "change-case": "^5.4.4",
     "reserved-identifiers": "^1.0.0",
     "type-fest": "^4.32.0",
     "zod": "^3.22.4"

packages/react-sdk/src/css/css.test.tsx → packages/sdk/src/css.test.tsx

@@ -1,8 +1,8 @@
 import { expect, test } from "vitest";
-import type { Breakpoint } from "@webstudio-is/sdk";
-import { rootComponent } from "@webstudio-is/sdk";
 import { $, ws, css, renderData } from "@webstudio-is/template";
 import { generateCss, type CssConfig } from "./css";
+import type { Breakpoint } from "./schema/breakpoints";
+import { rootComponent } from "./core-metas";
 
 const toMap = <T extends { id: string }>(list: T[]) =>
   new Map(list.map((item) => [item.id, item] as const));

packages/react-sdk/src/css/css.ts → packages/sdk/src/css.ts

@@ -1,26 +1,43 @@
+import { kebabCase } from "change-case";
 import {
   createRegularStyleSheet,
   generateAtomic,
   type NestingRule,
+  type StyleSheetRegular,
   type TransformValue,
 } from "@webstudio-is/css-engine";
-import {
-  ROOT_INSTANCE_ID,
-  createScope,
-  parseComponentName,
-  descendantComponent,
-  rootComponent,
-  type Assets,
-  type Breakpoints,
-  type Instance,
-  type Instances,
-  type Props,
-  type StyleSourceSelections,
-  type Styles,
-  type WsComponentMeta,
-} from "@webstudio-is/sdk";
-import { addGlobalRules } from "./global-rules";
-import { kebabCase } from "change-case";
+import { getFontFaces } from "@webstudio-is/fonts";
+import type { Assets, FontAsset } from "./schema/assets";
+import type { Instance, Instances } from "./schema/instances";
+import type { Props } from "./schema/props";
+import type { Breakpoints } from "./schema/breakpoints";
+import type { Styles } from "./schema/styles";
+import type { StyleSourceSelections } from "./schema/style-source-selections";
+import type { WsComponentMeta } from "./schema/component-meta";
+import { createScope } from "./scope";
+import { parseComponentName, ROOT_INSTANCE_ID } from "./instances-utils";
+import { descendantComponent, rootComponent } from "./core-metas";
+
+export const addFontRules = ({
+  sheet,
+  assets,
+  assetBaseUrl,
+}: {
+  sheet: StyleSheetRegular;
+  assets: Assets;
+  assetBaseUrl: string;
+}) => {
+  const fontAssets: FontAsset[] = [];
+  for (const asset of assets.values()) {
+    if (asset.type === "font") {
+      fontAssets.push(asset);
+    }
+  }
+  const fontFaces = getFontFaces(fontAssets, { assetBaseUrl });
+  for (const fontFace of fontFaces) {
+    sheet.addFontFaceRule(fontFace);
+  }
+};
 
 export type CssConfig = {
   assets: Assets;
@@ -76,7 +93,7 @@ export const generateCss = ({
   const globalSheet = createRegularStyleSheet({ name: "ssr" });
   const sheet = createRegularStyleSheet({ name: "ssr" });
 
-  addGlobalRules(globalSheet, { assets, assetBaseUrl });
+  addFontRules({ sheet: globalSheet, assets, assetBaseUrl });
   globalSheet.addMediaRule("presets");
   const presetClasses = new Map<Instance["component"], string>();
   const scope = createScope([], normalizeClassName, "-");

packages/sdk/src/index.ts

@@ -22,3 +22,4 @@ export * from "./expression";
 export * from "./resources-generator";
 export * from "./page-meta-generator";
 export * from "./url-pattern";
+export * from "./css";