diff --git a/apps/builder/app/canvas/shared/styles.ts b/apps/builder/app/canvas/shared/styles.ts
index 2e735cfb9fb0..6bfb5926bc59 100644
--- a/apps/builder/app/canvas/shared/styles.ts
+++ b/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,
     });
diff --git a/packages/cli/src/prebuild.ts b/packages/cli/src/prebuild.ts
index 48e85bf12e20..638664695651 100644
--- a/packages/cli/src/prebuild.ts
+++ b/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";
diff --git a/packages/react-sdk/src/css/global-rules.ts b/packages/react-sdk/src/css/global-rules.ts
deleted file mode 100644
index bfed9ce15a07..000000000000
--- a/packages/react-sdk/src/css/global-rules.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import type { StyleSheetRegular } from "@webstudio-is/css-engine";
-import type { Assets, FontAsset } from "@webstudio-is/sdk";
-import { getFontFaces } from "@webstudio-is/fonts";
-
-export const addGlobalRules = (
-  sheet: StyleSheetRegular,
-  { assets, assetBaseUrl }: { 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);
-  }
-};
diff --git a/packages/react-sdk/src/css/index.ts b/packages/react-sdk/src/css/index.ts
deleted file mode 100644
index d341d3184b3b..000000000000
--- a/packages/react-sdk/src/css/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./global-rules";
-export * from "./css";
diff --git a/packages/react-sdk/src/index.ts b/packages/react-sdk/src/index.ts
index ff51e35902d9..9df6629d4ff9 100644
--- a/packages/react-sdk/src/index.ts
+++ b/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";
diff --git a/packages/sdk-cli/src/generate-stories.ts b/packages/sdk-cli/src/generate-stories.ts
index b4db61b09cf9..8594a5c7a222 100644
--- a/packages/sdk-cli/src/generate-stories.ts
+++ b/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,
diff --git a/packages/sdk/package.json b/packages/sdk/package.json
index 70b040da02a1..0ec94d8ca2ca 100644
--- a/packages/sdk/package.json
+++ b/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"
diff --git a/packages/react-sdk/src/css/css.test.tsx b/packages/sdk/src/css.test.tsx
similarity index 99%
rename from packages/react-sdk/src/css/css.test.tsx
rename to packages/sdk/src/css.test.tsx
index f84ca2749c6f..b43efe6a5d62 100644
--- a/packages/react-sdk/src/css/css.test.tsx
+++ b/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));
diff --git a/packages/react-sdk/src/css/css.ts b/packages/sdk/src/css.ts
similarity index 83%
rename from packages/react-sdk/src/css/css.ts
rename to packages/sdk/src/css.ts
index 5b4f1bbb2c42..2e7f71d579e5 100644
--- a/packages/react-sdk/src/css/css.ts
+++ b/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, "-");
diff --git a/packages/sdk/src/index.ts b/packages/sdk/src/index.ts
index 12c7f3be6672..10d1c9e110c4 100644
--- a/packages/sdk/src/index.ts
+++ b/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";
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e590cd5f768c..9e6202e9e46d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1794,6 +1794,9 @@ importers:
       acorn-walk:
         specifier: ^8.3.4
         version: 8.3.4
+      change-case:
+        specifier: ^5.4.4
+        version: 5.4.4
       reserved-identifiers:
         specifier: ^1.0.0
         version: 1.0.0