@seed-design/figma 0.0.21 → 0.0.23

package/src/codegen/core/{value.ts → value-resolver.ts}

@@ -1,3 +1,4 @@
+import type { StyleService, VariableValueResolved } from "@/entities";
 import type {
   NormalizedCornerTrait,
   NormalizedHasFramePropertiesTrait,
@@ -15,7 +16,7 @@ import {
 import type { RGBA } from "@figma/rest-api-spec";
 import type { VariableService } from "../../entities/variable.service";
 
-export interface ValueTransformer<TColor, TDimension, TFontDimension, TFontWeight> {
+export interface ValueResolver<TColor, TDimension, TFontDimension, TFontWeight> {
   getFormattedValue: {
     frameFill: (
       node: NormalizedHasGeometryTrait & NormalizedIsLayerTrait,
@@ -84,11 +85,17 @@ export interface ValueTransformer<TColor, TDimension, TFontDimension, TFontWeigh
       node: NormalizedTypePropertiesTrait & NormalizedIsLayerTrait,
     ) => string | TFontDimension | undefined;
   };
+  getTextStyleValue: (
+    node: NormalizedTypePropertiesTrait & NormalizedIsLayerTrait,
+  ) => string | undefined; // TODO: we might turn this into a generic; not sure yet
 }
 
-export interface ValueTransformerDeps<TColor, TDimension, TFontDimension, TFontWeight> {
+export interface ValueResolverDeps<TColor, TDimension, TFontDimension, TFontWeight> {
   variableService: VariableService;
-  formatters: {
+  variableNameFormatter: (props: { slug: string[] }) => string;
+  styleService: StyleService;
+  styleNameFormatter: (props: { slug: string[] }) => string;
+  rawValueFormatters: {
     color: (value: RGBA) => string | TColor;
     dimension: (value: number) => string | TDimension;
     fontDimension: (value: number) => string | TFontDimension;
@@ -97,31 +104,64 @@ export interface ValueTransformerDeps<TColor, TDimension, TFontDimension, TFontW
   shouldInferVariableName: boolean;
 }
 
-export function createValueTransformer<TColor, TDimension, TFontDimension, TFontWeight>({
+export function createValueResolver<TColor, TDimension, TFontDimension, TFontWeight>({
   variableService,
-  formatters,
+  variableNameFormatter,
+  styleService,
+  styleNameFormatter,
+  rawValueFormatters,
   shouldInferVariableName,
-}: ValueTransformerDeps<TColor, TDimension, TFontDimension, TFontWeight>): ValueTransformer<
+}: ValueResolverDeps<TColor, TDimension, TFontDimension, TFontWeight>): ValueResolver<
   TColor,
   TDimension,
   TFontDimension,
   TFontWeight
 > {
+  function getVariableName(key: string) {
+    const slug = variableService.getSlug(key);
+
+    if (!slug) {
+      return undefined;
+    }
+
+    return variableNameFormatter({ slug });
+  }
+
+  function inferVariableName(value: VariableValueResolved, scope: VariableScope) {
+    if (!shouldInferVariableName) {
+      return undefined;
+    }
+
+    const inferred = variableService.infer(value, scope);
+
+    if (!inferred) {
+      return undefined;
+    }
+
+    return getVariableName(inferred.key);
+  }
+
+  function getStyleName(key: string) {
+    const slug = styleService.getSlug(key);
+
+    if (!slug) {
+      return undefined;
+    }
+
+    return styleNameFormatter({ slug });
+  }
+
   function processColor(
     key: string | undefined,
     value: RGBA | undefined,
     scope: "FRAME_FILL" | "SHAPE_FILL" | "STROKE_COLOR" | "TEXT_FILL",
   ) {
     if (key) {
-      return variableService.getVariableName(key);
+      return getVariableName(key);
     }
 
-    if (value) {
-      if (shouldInferVariableName) {
-        return variableService.inferVariableName(value, scope) ?? formatters.color(value);
-      }
-
-      return formatters.color(value);
+    if (value !== undefined) {
+      return inferVariableName(value, scope) ?? rawValueFormatters.color(value);
     }
 
     return undefined;
@@ -133,15 +173,11 @@ export function createValueTransformer<TColor, TDimension, TFontDimension, TFont
     scope: "WIDTH_HEIGHT" | "GAP" | "CORNER_RADIUS",
   ) {
     if (key) {
-      return variableService.getVariableName(key);
+      return getVariableName(key);
     }
 
-    if (value) {
-      if (shouldInferVariableName) {
-        return variableService.inferVariableName(value, scope) ?? formatters.dimension(value);
-      }
-
-      return formatters.dimension(value);
+    if (value !== undefined) {
+      return inferVariableName(value, scope) ?? rawValueFormatters.dimension(value);
     }
 
     return undefined;
@@ -153,15 +189,11 @@ export function createValueTransformer<TColor, TDimension, TFontDimension, TFont
     scope: "FONT_SIZE" | "LINE_HEIGHT",
   ) {
     if (key) {
-      return variableService.getVariableName(key);
+      return getVariableName(key);
     }
 
-    if (value) {
-      if (shouldInferVariableName) {
-        return variableService.inferVariableName(value, scope) ?? formatters.fontDimension(value);
-      }
-
-      return formatters.fontDimension(value);
+    if (value !== undefined) {
+      return inferVariableName(value, scope) ?? rawValueFormatters.fontDimension(value);
     }
 
     return undefined;
@@ -169,37 +201,33 @@ export function createValueTransformer<TColor, TDimension, TFontDimension, TFont
 
   function processFontWeight(key: string | undefined, value: number | undefined) {
     if (key) {
-      return variableService.getVariableName(key);
+      return getVariableName(key);
     }
 
-    if (value) {
-      if (shouldInferVariableName) {
-        const fontWeightToString: Record<number, string> = {
-          100: "thin",
-          200: "extra-light",
-          300: "light",
-          400: "regular",
-          500: "medium",
-          600: "semi-bold",
-          700: "bold",
-          800: "extra-bold",
-          900: "black",
-        };
+    if (value !== undefined) {
+      const fontWeightToString: Record<number, string> = {
+        100: "thin",
+        200: "extra-light",
+        300: "light",
+        400: "regular",
+        500: "medium",
+        600: "semi-bold",
+        700: "bold",
+        800: "extra-bold",
+        900: "black",
+      };
 
-        return (
-          variableService.inferVariableName(value, "FONT_WEIGHT") ??
-          variableService.inferVariableName(fontWeightToString[value], "FONT_STYLE") ??
-          formatters.fontWeight(value)
-        );
-      }
-
-      return formatters.fontWeight(value);
+      return (
+        inferVariableName(value, "FONT_WEIGHT") ??
+        inferVariableName(fontWeightToString[value], "FONT_STYLE") ??
+        rawValueFormatters.fontWeight(value)
+      );
     }
 
     return undefined;
   }
 
-  const getFormattedValue: ValueTransformer<
+  const getFormattedValue: ValueResolver<
     TColor,
     TDimension,
     TFontDimension,
@@ -283,7 +311,16 @@ export function createValueTransformer<TColor, TDimension, TFontDimension, TFont
       ),
   };
 
+  function getTextStyleValue(node: NormalizedTypePropertiesTrait & NormalizedIsLayerTrait) {
+    if (node.textStyleKey) {
+      return getStyleName(node.textStyleKey);
+    }
+
+    return undefined;
+  }
+
   return {
     getFormattedValue,
+    getTextStyleValue,
   };
 }

package/src/codegen/default-services.ts

@@ -0,0 +1,44 @@
+import {
+  createIconService,
+  createStyleService,
+  createVariableService,
+  iconRepository,
+  styleRepository,
+  variableRepository,
+} from "@/entities";
+
+export const styleService = createStyleService({
+  styleRepository,
+});
+export const variableService = createVariableService({
+  variableRepository,
+  inferCompareFunction: (a, b) => {
+    const scoreFn = (name: string) => {
+      let score = 0;
+      if (name.includes("bg")) {
+        score += 100;
+      }
+      if (name.includes("fg")) {
+        score += 100;
+      }
+      if (name.includes("stroke")) {
+        score += 100;
+      }
+      if (name.includes("spacing-x")) {
+        score -= 100;
+      }
+      if (name.includes("spacing-y")) {
+        score -= 100;
+      }
+      if (name.endsWith("pressed")) {
+        score -= 100;
+      }
+      return score;
+    };
+
+    return scoreFn(b.name) - scoreFn(a.name);
+  },
+});
+export const iconService = createIconService({
+  iconRepository,
+});

package/src/codegen/index.ts

@@ -1,46 +1,3 @@
+export * from "./component-properties";
 export * from "./core";
 export * from "./targets";
-
-import type { NormalizedSceneNode } from "@/normalizer";
-import { stringifyElement } from "./core/jsx";
-import { figma, react } from "./targets";
-
-export function generateJsxTree(
-  node: NormalizedSceneNode,
-  options: Partial<react.CreateContextOptions> = {},
-) {
-  const { shouldInferVariableName = true, shouldInferAutoLayout = true } = options;
-  const codegen = react.createContext({
-    shouldInferVariableName,
-    shouldInferAutoLayout,
-  });
-
-  return codegen(node);
-}
-
-export function generateCode(
-  node: NormalizedSceneNode,
-  options: Partial<react.CreateContextOptions> & { shouldPrintSource?: boolean } = {},
-) {
-  const result = generateJsxTree(node, options);
-  return result ? stringifyElement(result, { printSource: options.shouldPrintSource }) : undefined;
-}
-
-export function generateFigmaSummary(
-  node: NormalizedSceneNode,
-  options: Partial<figma.CreateContextOptions> & { shouldPrintSource?: boolean } = {},
-) {
-  const {
-    shouldInferVariableName = false,
-    shouldPrintSource = false,
-    shouldInferAutoLayout = false,
-  } = options;
-  const codegen = figma.createContext({
-    shouldInferVariableName,
-    shouldInferAutoLayout,
-  });
-
-  const result = codegen(node);
-
-  return result ? stringifyElement(result, { printSource: shouldPrintSource }) : undefined;
-}

package/src/codegen/targets/figma/frame.ts

@@ -4,14 +4,14 @@ import type {
   NormalizedInstanceNode,
 } from "@/normalizer";
 import { createElement, defineElementTransformer, type ElementTransformer } from "../../core";
-import type { PropsTransformers } from "./props";
+import type { PropsConverters } from "./props";
 
 export interface FrameTransformerDeps {
-  propsTransformers: PropsTransformers;
+  propsConverters: PropsConverters;
 }
 
 export function createFrameTransformer({
-  propsTransformers,
+  propsConverters,
 }: FrameTransformerDeps): ElementTransformer<
   NormalizedFrameNode | NormalizedInstanceNode | NormalizedComponentNode
 > {
@@ -20,11 +20,11 @@ export function createFrameTransformer({
       const children = node.children;
 
       const props = {
-        ...propsTransformers.radius(node, traverse),
-        ...propsTransformers.containerLayout(node, traverse),
-        ...propsTransformers.selfLayout(node, traverse),
-        ...propsTransformers.frameFill(node, traverse),
-        ...propsTransformers.stroke(node, traverse),
+        ...propsConverters.radius(node),
+        ...propsConverters.containerLayout(node),
+        ...propsConverters.selfLayout(node),
+        ...propsConverters.frameFill(node),
+        ...propsConverters.stroke(node),
       };
 
       return createElement(

package/src/codegen/targets/figma/index.ts

@@ -1,4 +1,4 @@
-export * from "./context";
+export * from "./pipeline";
 export * from "./frame";
 export * from "./instance";
 export * from "./props";

package/src/codegen/targets/figma/pipeline.ts

@@ -0,0 +1,94 @@
+import { createCodeGenerator, createValueResolver } from "@/codegen/core";
+import { styleService, variableService } from "@/codegen/default-services";
+import { createFrameTransformer } from "./frame";
+import { createInstanceTransformer } from "./instance";
+import {
+  createContainerLayoutPropsConverter,
+  createFrameFillPropsConverter,
+  createRadiusPropsConverter,
+  createSelfLayoutPropsConverter,
+  createShapeFillPropsConverter,
+  createStrokePropsConverter,
+  createTextFillPropsConverter,
+  createTypeStylePropsConverter,
+} from "./props";
+import {
+  createBooleanOperationTransformer,
+  createRectangleTransformer,
+  createVectorTransformer,
+} from "./shape";
+import { createTextTransformer } from "./text";
+import {
+  defaultRawValueFormatters,
+  defaultStyleNameFormatter,
+  defaultVariableNameFormatter,
+} from "./value-resolver";
+
+export interface CreatePipelineConfig {
+  shouldInferAutoLayout?: boolean;
+  shouldInferVariableName?: boolean;
+}
+
+export function createPipeline(options: CreatePipelineConfig = {}) {
+  const { shouldInferAutoLayout = true, shouldInferVariableName = true } = options;
+
+  const valueResolver = createValueResolver({
+    variableService,
+    variableNameFormatter: defaultVariableNameFormatter,
+    styleService,
+    styleNameFormatter: defaultStyleNameFormatter,
+    rawValueFormatters: defaultRawValueFormatters,
+    shouldInferVariableName,
+  });
+
+  const containerLayoutPropsConverter = createContainerLayoutPropsConverter(valueResolver);
+  const selfLayoutPropsConverter = createSelfLayoutPropsConverter(valueResolver);
+  const frameFillPropsConverter = createFrameFillPropsConverter(valueResolver);
+  const shapeFillPropsConverter = createShapeFillPropsConverter(valueResolver);
+  const textFillPropsConverter = createTextFillPropsConverter(valueResolver);
+  const radiusPropsConverter = createRadiusPropsConverter(valueResolver);
+  const strokePropsConverter = createStrokePropsConverter(valueResolver);
+  const typeStylePropsConverter = createTypeStylePropsConverter(valueResolver);
+
+  const propsConverters = {
+    containerLayout: containerLayoutPropsConverter,
+    selfLayout: selfLayoutPropsConverter,
+    frameFill: frameFillPropsConverter,
+    shapeFill: shapeFillPropsConverter,
+    textFill: textFillPropsConverter,
+    radius: radiusPropsConverter,
+    stroke: strokePropsConverter,
+    typeStyle: typeStylePropsConverter,
+  };
+
+  const frameTransformer = createFrameTransformer({
+    propsConverters,
+  });
+  const instanceTransformer = createInstanceTransformer({
+    frameTransformer,
+  });
+  const textTransformer = createTextTransformer({
+    propsConverters,
+  });
+  const rectangleTransformer = createRectangleTransformer({
+    propsConverters,
+  });
+  const vectorTransformer = createVectorTransformer({
+    propsConverters,
+  });
+  const booleanOperationTransformer = createBooleanOperationTransformer({
+    propsConverters,
+  });
+
+  const codegenTransformer = createCodeGenerator({
+    frameTransformer,
+    textTransformer,
+    rectangleTransformer,
+    instanceTransformer,
+    vectorTransformer,
+    booleanOperationTransformer,
+    shouldInferAutoLayout,
+  });
+
+  return codegenTransformer;
+}

package/src/codegen/targets/figma/props.ts

@@ -1,10 +1,4 @@
-import {
-  createPropsTransformer,
-  definePropsTransformer,
-  type PropsTransformer,
-  type ValueTransformer,
-} from "@/codegen/core";
-import type { StyleService } from "@/entities";
+import { createPropsConverter, definePropsConverter, type PropsConverter } from "@/codegen/core";
 import type {
   NormalizedCornerTrait,
   NormalizedHasChildrenTrait,
@@ -14,16 +8,17 @@ import type {
   NormalizedIsLayerTrait,
   NormalizedTypePropertiesTrait,
 } from "@/normalizer";
-
-export interface PropsTransformers {
-  containerLayout: PropsTransformer<ContainerLayoutTrait, ContainerLayoutProps>;
-  selfLayout: PropsTransformer<SelfLayoutTrait, SelfLayoutProps>;
-  radius: PropsTransformer<RadiusTrait, RadiusProps>;
-  frameFill: PropsTransformer<FillTrait, FillProps>;
-  shapeFill: PropsTransformer<FillTrait, FillProps>;
-  textFill: PropsTransformer<FillTrait, FillProps>;
-  stroke: PropsTransformer<StrokeTrait, StrokeProps>;
-  typeStyle: PropsTransformer<TypeStyleTrait, TypeStyleProps>;
+import type { FigmaValueResolver } from "./value-resolver";
+
+export interface PropsConverters {
+  containerLayout: PropsConverter<ContainerLayoutTrait, ContainerLayoutProps>;
+  selfLayout: PropsConverter<SelfLayoutTrait, SelfLayoutProps>;
+  radius: PropsConverter<RadiusTrait, RadiusProps>;
+  frameFill: PropsConverter<FillTrait, FillProps>;
+  shapeFill: PropsConverter<FillTrait, FillProps>;
+  textFill: PropsConverter<FillTrait, FillProps>;
+  stroke: PropsConverter<StrokeTrait, StrokeProps>;
+  typeStyle: PropsConverter<TypeStyleTrait, TypeStyleProps>;
 }
 
 export type ContainerLayoutTrait = NormalizedHasFramePropertiesTrait &
@@ -55,12 +50,10 @@ export interface ContainerLayoutProps {
   verticalPadding?: number | string; // string when variable
 }
 
-type FigmaValueTransformer = ValueTransformer<string, number, number, number>;
-
-export function createContainerLayoutPropsTransformer(
-  valueTransformer: FigmaValueTransformer,
-): PropsTransformer<ContainerLayoutTrait, ContainerLayoutProps> {
-  return createPropsTransformer({
+export function createContainerLayoutPropsConverter(
+  valueResolver: FigmaValueResolver,
+): PropsConverter<ContainerLayoutTrait, ContainerLayoutProps> {
+  return createPropsConverter({
     _types: {
       trait: {} as ContainerLayoutTrait,
       props: {} as ContainerLayoutProps,
@@ -70,11 +63,11 @@ export function createContainerLayoutPropsTransformer(
       primaryAxisAlignItems: ({ primaryAxisAlignItems }) => primaryAxisAlignItems,
       counterAxisAlignItems: ({ counterAxisAlignItems }) => counterAxisAlignItems,
       layoutWrap: ({ layoutWrap }) => layoutWrap,
-      itemSpacing: ({ itemSpacing }) => itemSpacing,
-      paddingTop: (node) => valueTransformer.getFormattedValue.paddingTop(node),
-      paddingBottom: (node) => valueTransformer.getFormattedValue.paddingBottom(node),
-      paddingLeft: (node) => valueTransformer.getFormattedValue.paddingLeft(node),
-      paddingRight: (node) => valueTransformer.getFormattedValue.paddingRight(node),
+      itemSpacing: (node) => valueResolver.getFormattedValue.itemSpacing(node),
+      paddingTop: (node) => valueResolver.getFormattedValue.paddingTop(node),
+      paddingBottom: (node) => valueResolver.getFormattedValue.paddingBottom(node),
+      paddingLeft: (node) => valueResolver.getFormattedValue.paddingLeft(node),
+      paddingRight: (node) => valueResolver.getFormattedValue.paddingRight(node),
     },
     shorthands: {
       horizontalPadding: ["paddingLeft", "paddingRight"],
@@ -97,10 +90,10 @@ export interface SelfLayoutProps {
   maxHeight?: string | number; // string when variable
 }
 
-export function createSelfLayoutPropsTransformer(
-  valueTransformer: FigmaValueTransformer,
-): PropsTransformer<SelfLayoutTrait, SelfLayoutProps> {
-  return createPropsTransformer({
+export function createSelfLayoutPropsConverter(
+  valueResolver: FigmaValueResolver,
+): PropsConverter<SelfLayoutTrait, SelfLayoutProps> {
+  return createPropsConverter({
     _types: {
       trait: {} as SelfLayoutTrait,
       props: {} as SelfLayoutProps,
@@ -110,12 +103,12 @@ export function createSelfLayoutPropsTransformer(
       layoutAlign: ({ layoutAlign }) => layoutAlign,
       layoutSizingVertical: ({ layoutSizingVertical }) => layoutSizingVertical,
       layoutSizingHorizontal: ({ layoutSizingHorizontal }) => layoutSizingHorizontal,
-      width: (node) => valueTransformer.getFormattedValue.width(node),
-      height: (node) => valueTransformer.getFormattedValue.height(node),
-      minWidth: (node) => valueTransformer.getFormattedValue.minWidth(node),
-      minHeight: (node) => valueTransformer.getFormattedValue.minHeight(node),
-      maxWidth: (node) => valueTransformer.getFormattedValue.maxWidth(node),
-      maxHeight: (node) => valueTransformer.getFormattedValue.maxHeight(node),
+      width: (node) => valueResolver.getFormattedValue.width(node),
+      height: (node) => valueResolver.getFormattedValue.height(node),
+      minWidth: (node) => valueResolver.getFormattedValue.minWidth(node),
+      minHeight: (node) => valueResolver.getFormattedValue.minHeight(node),
+      maxWidth: (node) => valueResolver.getFormattedValue.maxWidth(node),
+      maxHeight: (node) => valueResolver.getFormattedValue.maxHeight(node),
     },
     defaults: {},
   });
@@ -129,17 +122,17 @@ export interface RadiusProps {
   bottomRightRadius?: number | string; // string when variable
 }
 
-export function createRadiusPropsTransformer(valueTransformer: FigmaValueTransformer) {
-  return createPropsTransformer({
+export function createRadiusPropsConverter(valueResolver: FigmaValueResolver) {
+  return createPropsConverter({
     _types: {
       trait: {} as RadiusTrait,
       props: {} as RadiusProps,
     },
     handlers: {
-      topLeftRadius: (node) => valueTransformer.getFormattedValue.topLeftRadius(node),
-      topRightRadius: (node) => valueTransformer.getFormattedValue.topRightRadius(node),
-      bottomLeftRadius: (node) => valueTransformer.getFormattedValue.bottomLeftRadius(node),
-      bottomRightRadius: (node) => valueTransformer.getFormattedValue.bottomRightRadius(node),
+      topLeftRadius: (node) => valueResolver.getFormattedValue.topLeftRadius(node),
+      topRightRadius: (node) => valueResolver.getFormattedValue.topRightRadius(node),
+      bottomLeftRadius: (node) => valueResolver.getFormattedValue.bottomLeftRadius(node),
+      bottomRightRadius: (node) => valueResolver.getFormattedValue.bottomRightRadius(node),
     },
     shorthands: {
       cornerRadius: ["topLeftRadius", "topRightRadius", "bottomLeftRadius", "bottomRightRadius"],
@@ -158,9 +151,9 @@ export interface FillProps {
   fill?: string;
 }
 
-export function createFrameFillPropsTransformer(valueTransformer: FigmaValueTransformer) {
-  return definePropsTransformer<FillTrait, FillProps>((node: FillTrait) => {
-    const fill = valueTransformer.getFormattedValue.frameFill(node);
+export function createFrameFillPropsConverter(valueResolver: FigmaValueResolver) {
+  return definePropsConverter<FillTrait, FillProps>((node: FillTrait) => {
+    const fill = valueResolver.getFormattedValue.frameFill(node);
 
     return {
       fill,
@@ -168,9 +161,9 @@ export function createFrameFillPropsTransformer(valueTransformer: FigmaValueTran
   });
 }
 
-export function createShapeFillPropsTransformer(valueTransformer: FigmaValueTransformer) {
-  return definePropsTransformer<FillTrait, FillProps>((node: FillTrait) => {
-    const fill = valueTransformer.getFormattedValue.shapeFill(node);
+export function createShapeFillPropsConverter(valueResolver: FigmaValueResolver) {
+  return definePropsConverter<FillTrait, FillProps>((node: FillTrait) => {
+    const fill = valueResolver.getFormattedValue.shapeFill(node);
 
     return {
       fill,
@@ -178,9 +171,9 @@ export function createShapeFillPropsTransformer(valueTransformer: FigmaValueTran
   });
 }
 
-export function createTextFillPropsTransformer(valueTransformer: FigmaValueTransformer) {
-  return definePropsTransformer<FillTrait, FillProps>((node: FillTrait) => {
-    const fill = valueTransformer.getFormattedValue.textFill(node);
+export function createTextFillPropsConverter(valueResolver: FigmaValueResolver) {
+  return definePropsConverter<FillTrait, FillProps>((node: FillTrait) => {
+    const fill = valueResolver.getFormattedValue.textFill(node);
 
     return {
       fill,
@@ -193,11 +186,11 @@ export interface StrokeProps {
   strokeWeight?: number;
 }
 
-export function createStrokePropsTransformer(
-  valueTransformer: FigmaValueTransformer,
-): PropsTransformer<StrokeTrait, StrokeProps> {
-  return definePropsTransformer((node: StrokeTrait) => {
-    const stroke = valueTransformer.getFormattedValue.stroke(node);
+export function createStrokePropsConverter(
+  valueResolver: FigmaValueResolver,
+): PropsConverter<StrokeTrait, StrokeProps> {
+  return definePropsConverter((node: StrokeTrait) => {
+    const stroke = valueResolver.getFormattedValue.stroke(node);
     const strokeWeight = node.strokeWeight;
 
     return {
@@ -215,15 +208,11 @@ export interface TypeStyleProps {
   maxLines?: number;
 }
 
-export function createTypeStylePropsTransformer({
-  valueTransformer,
-  styleService,
-}: {
-  valueTransformer: FigmaValueTransformer;
-  styleService: StyleService;
-}): PropsTransformer<TypeStyleTrait, TypeStyleProps> {
-  return definePropsTransformer((node) => {
-    const styleName = node.textStyleKey ? styleService.getStyleName(node.textStyleKey) : undefined;
+export function createTypeStylePropsConverter(
+  valueResolver: FigmaValueResolver,
+): PropsConverter<TypeStyleTrait, TypeStyleProps> {
+  return definePropsConverter((node) => {
+    const styleName = valueResolver.getTextStyleValue(node);
     const maxLines =
       node.style.textTruncation === "ENDING" ? (node.style.maxLines ?? undefined) : undefined;
 
@@ -235,9 +224,9 @@ export function createTypeStylePropsTransformer({
     }
 
     return {
-      fontSize: valueTransformer.getFormattedValue.fontSize(node),
-      fontWeight: valueTransformer.getFormattedValue.fontWeight(node),
-      lineHeight: valueTransformer.getFormattedValue.lineHeight(node),
+      fontSize: valueResolver.getFormattedValue.fontSize(node),
+      fontWeight: valueResolver.getFormattedValue.fontWeight(node),
+      lineHeight: valueResolver.getFormattedValue.lineHeight(node),
       maxLines,
     };
   });