Refactor CSS generation

packages/cli/package.json

@@ -56,6 +56,7 @@
     "@types/shelljs": "^0.8.12",
     "@types/tmp": "^0.2.3",
     "@uimix/adapter-types": "workspace:*",
+    "@uimix/elements-react": "workspace:*",
     "@uimix/foundation": "workspace:*",
     "@uimix/model": "workspace:*",
     "csstype": "^3.1.2",

packages/cli/src/compiler/CSSGenerator.ts

@@ -2,13 +2,9 @@ import { kebabCase } from "lodash-es";
 import * as CSS from "csstype";
 import { Page } from "@uimix/model/src/models/Page";
 import * as CodeAsset from "@uimix/adapter-types";
-import {
-  buildNodeCSS,
-  Selectable,
-  SelfAndChildrenCSS,
-  Variant,
-} from "@uimix/model/src/models";
+import { Selectable, Variant } from "@uimix/model/src/models";
 import { ClassNameGenerator } from "./ClassNameGenerator";
+import { SelfAndChildrenCSS } from "@uimix/elements-react/src/buildNodeCSS";
 
 function isDesignToken(
   value: CodeAsset.DesignToken | CodeAsset.DesignTokens
@@ -70,9 +66,7 @@ export class CSSGenerator {
         return css;
       }
 
-      css = buildNodeCSS(
-        selectable.node.type,
-        selectable.style,
+      css = selectable.buildCSS(
         (tokenID) =>
           getColorToken(this.designTokens, tokenID.split("/"))?.$value ??
           selectable.project.colorTokens.resolve(tokenID)

packages/editor/src/views/viewport/TextEditor.tsx

@@ -1,7 +1,7 @@
 import { action, reaction } from "mobx";
 import { observer } from "mobx-react-lite";
 import React, { useEffect, useRef } from "react";
-import { Selectable, buildNodeCSS } from "@uimix/model/src/models";
+import { Selectable } from "@uimix/model/src/models";
 import { viewportState } from "../../state/ViewportState";
 import { projectState } from "../../state/ProjectState";
 
@@ -10,9 +10,7 @@ export const TextEditorBody: React.FC<{
 }> = observer(({ selectable }) => {
   const style = selectable.style;
 
-  const cssStyle = buildNodeCSS("text", style, (tokenID) =>
-    selectable.project.colorTokens.resolve(tokenID)
-  ).self;
+  const cssStyle = selectable.buildCSS().self;
   delete cssStyle.marginTop;
   delete cssStyle.marginRight;
   delete cssStyle.marginBottom;

packages/editor/src/views/viewport/renderer/NodeRenderer.tsx

@@ -1,6 +1,6 @@
 import React, { createRef, useEffect, useRef } from "react";
 import { observer } from "mobx-react-lite";
-import { Selectable, buildNodeCSS } from "@uimix/model/src/models";
+import { Selectable } from "@uimix/model/src/models";
 import { viewportState } from "../../../state/ViewportState";
 import { ComputedRectProvider } from "./ComputedRectProvider";
 import { projectState } from "../../../state/ProjectState";
@@ -59,9 +59,7 @@ export const NodeRenderer: React.FC<{
     const style = selectable.style;
     const type = selectable.node.type;
 
-    const builtStyle = buildNodeCSS(type, style, (tokenID) =>
-      selectable.project.colorTokens.resolve(tokenID)
-    );
+    const builtStyle = selectable.buildCSS();
 
     const cssStyle: React.CSSProperties = {
       all: "revert",

packages/elements-react/src/buildNodeCSS.ts

@@ -210,10 +210,16 @@ export function buildNodeCSS(
     cssStyle.fontWeight = style.fontWeight;
     const lineHeight = style.lineHeight;
     cssStyle.lineHeight =
-      typeof lineHeight === "number" ? `${lineHeight}px` : lineHeight ?? "auto";
+      lineHeight === null
+        ? "normal"
+        : typeof lineHeight === "number"
+        ? `${lineHeight}px`
+        : lineHeight;
     const letterSpacing = style.letterSpacing;
     cssStyle.letterSpacing =
-      typeof letterSpacing === "number" ? `${letterSpacing}px` : letterSpacing;
+      typeof letterSpacing === "number"
+        ? `${letterSpacing}px`
+        : `${Number.parseFloat(letterSpacing) / 100}em`;
     cssStyle.textAlign = style.textHorizontalAlign;
     cssStyle.justifyContent = (() => {
       switch (style.textVerticalAlign) {

packages/model/package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@babel/standalone": "^7.21.4",
     "@uimix/adapter-types": "workspace:*",
+    "@uimix/elements-react": "workspace:*",
     "@uimix/foundation": "workspace:*",
     "crypto-js": "^4.1.1",
     "lodash-es": "^4.17.21",

packages/model/src/models/Selectable.ts

@@ -11,6 +11,11 @@ import { Project } from "./Project";
 import { Component, Variant } from "./Component";
 import { ObjectData } from "./ObjectData";
 import { Page } from "./Page";
+import {
+  buildNodeCSS,
+  SelfAndChildrenCSS,
+} from "@uimix/elements-react/src/buildNodeCSS";
+import { StyleProps } from "@uimix/elements-react/src/StyleProps";
 
 export interface IComputedRectProvider {
   readonly value: Rect | undefined;
@@ -654,6 +659,49 @@ export class Selectable {
     );
     return selectable;
   }
+
+  buildCSS(
+    getColorToken: (id: string) => string = (tokenID) =>
+      this.project.colorTokens.resolve(tokenID)
+  ): SelfAndChildrenCSS {
+    const style = { ...defaultStyle, ...this.style.toJSON() };
+
+    const nodeType = this.node.type;
+    const resolveColor = (color: Data.Color): string => {
+      if (typeof color === "string") {
+        return color;
+      }
+      return getColorToken(color.token);
+    };
+    const resolveFill = (fill: Data.Fill): StyleProps["fills"][number] => {
+      return {
+        solid: resolveColor(fill.solid),
+      };
+    };
+
+    if (nodeType === "component") {
+      return {
+        self: {},
+        children: {},
+      };
+    }
+
+    const resolvedStyle: StyleProps = {
+      ...style,
+      fills: style.fills.map(resolveFill),
+      border: style.border && resolveFill(style.border),
+      shadows: style.shadows.map((shadow) => ({
+        ...shadow,
+        color: resolveColor(shadow.color),
+      })),
+      image: null,
+    };
+
+    return buildNodeCSS(
+      nodeType as "frame" | "text" | "image" | "svg",
+      resolvedStyle
+    );
+  }
 }
 
 export class SelectableMap {