@seed-design/figma 0.0.21 → 0.0.22

package/src/codegen/targets/react/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,
@@ -15,17 +9,19 @@ import type {
   NormalizedTypePropertiesTrait,
 } from "@/normalizer";
 import { match } from "ts-pattern";
-
-export interface PropsTransformers {
-  containerLayout: PropsTransformer<ContainerLayoutTrait, ContainerLayoutProps>;
-  selfLayout: PropsTransformer<SelfLayoutTrait, SelfLayoutProps>;
-  iconSelfLayout: PropsTransformer<SelfLayoutTrait, IconSelfLayoutProps>;
-  radius: PropsTransformer<RadiusTrait, RadiusProps>;
-  frameFill: PropsTransformer<FillTrait, FrameFillProps>;
-  shapeFill: PropsTransformer<FillTrait, ShapeFillProps>;
-  textFill: PropsTransformer<FillTrait, TextFillProps>;
-  stroke: PropsTransformer<StrokeTrait, StrokeProps>;
-  typeStyle: PropsTransformer<TypeStyleTrait, TypeStyleProps>;
+import type { ReactValueResolver } from "./value-resolver";
+
+export interface PropsConverters {
+  containerLayout: PropsConverter<ContainerLayoutTrait, ContainerLayoutProps>;
+  selfLayout: PropsConverter<SelfLayoutTrait, SelfLayoutProps>;
+  iconSelfLayout: PropsConverter<SelfLayoutTrait, IconSelfLayoutProps>;
+  radius: PropsConverter<RadiusTrait, RadiusProps>;
+  frameFill: PropsConverter<FillTrait, FrameFillProps>;
+  shapeFill: PropsConverter<FillTrait, ShapeFillProps>;
+  textFill: PropsConverter<FillTrait, TextFillProps>;
+  vectorChildrenFill: PropsConverter<ContainerLayoutTrait, VectorChildrenFillProps>;
+  stroke: PropsConverter<StrokeTrait, StrokeProps>;
+  typeStyle: PropsConverter<TypeStyleTrait, TypeStyleProps>;
 }
 
 export type ContainerLayoutTrait = NormalizedHasFramePropertiesTrait &
@@ -58,12 +54,10 @@ export interface ContainerLayoutProps {
   p?: string | 0;
 }
 
-type ReactValueTransformer = ValueTransformer<string, string, string, number>;
-
-export function createContainerLayoutPropsTransformer(
-  valueTransformer: ReactValueTransformer,
-): PropsTransformer<ContainerLayoutTrait, ContainerLayoutProps> {
-  return createPropsTransformer({
+export function createContainerLayoutPropsConverter(
+  valueResolver: ReactValueResolver,
+): PropsConverter<ContainerLayoutTrait, ContainerLayoutProps> {
+  return createPropsConverter({
     _types: {
       trait: {} as ContainerLayoutTrait,
       props: {} as ContainerLayoutProps,
@@ -120,12 +114,12 @@ export function createContainerLayoutPropsTransformer(
           return undefined;
         }
 
-        return valueTransformer.getFormattedValue.itemSpacing(node);
+        return valueResolver.getFormattedValue.itemSpacing(node);
       },
-      pt: (node) => valueTransformer.getFormattedValue.paddingTop(node),
-      pb: (node) => valueTransformer.getFormattedValue.paddingBottom(node),
-      pl: (node) => valueTransformer.getFormattedValue.paddingLeft(node),
-      pr: (node) => valueTransformer.getFormattedValue.paddingRight(node),
+      pt: (node) => valueResolver.getFormattedValue.paddingTop(node),
+      pb: (node) => valueResolver.getFormattedValue.paddingBottom(node),
+      pl: (node) => valueResolver.getFormattedValue.paddingLeft(node),
+      pr: (node) => valueResolver.getFormattedValue.paddingRight(node),
     },
     shorthands: {
       p: ["pt", "pb", "pl", "pr"],
@@ -159,10 +153,10 @@ export interface SelfLayoutProps {
   maxHeight?: string | number;
 }
 
-export function createSelfLayoutPropsTransformer(
-  valueTransformer: ReactValueTransformer,
-): PropsTransformer<SelfLayoutTrait, SelfLayoutProps> {
-  return createPropsTransformer({
+export function createSelfLayoutPropsConverter(
+  valueResolver: ReactValueResolver,
+): PropsConverter<SelfLayoutTrait, SelfLayoutProps> {
+  return createPropsConverter({
     _types: {
       trait: {} as SelfLayoutTrait,
       props: {} as SelfLayoutProps,
@@ -180,27 +174,27 @@ export function createSelfLayoutPropsTransformer(
           .exhaustive(),
       height: (node) =>
         node.layoutSizingVertical === "FIXED"
-          ? valueTransformer.getFormattedValue.height(node)
+          ? valueResolver.getFormattedValue.height(node)
           : undefined,
       width: (node) =>
         node.layoutSizingHorizontal === "FIXED"
-          ? valueTransformer.getFormattedValue.width(node)
+          ? valueResolver.getFormattedValue.width(node)
           : undefined,
       minHeight: (node) =>
         node.layoutSizingVertical === "HUG"
-          ? valueTransformer.getFormattedValue.minHeight(node)
+          ? valueResolver.getFormattedValue.minHeight(node)
           : undefined,
       maxHeight: (node) =>
         node.layoutSizingVertical === "HUG"
-          ? valueTransformer.getFormattedValue.maxHeight(node)
+          ? valueResolver.getFormattedValue.maxHeight(node)
           : undefined,
       minWidth: (node) =>
         node.layoutSizingHorizontal === "HUG"
-          ? valueTransformer.getFormattedValue.minWidth(node)
+          ? valueResolver.getFormattedValue.minWidth(node)
           : undefined,
       maxWidth: (node) =>
         node.layoutSizingHorizontal === "HUG"
-          ? valueTransformer.getFormattedValue.maxWidth(node)
+          ? valueResolver.getFormattedValue.maxWidth(node)
           : undefined,
     },
     defaults: {
@@ -213,14 +207,14 @@ export interface IconSelfLayoutProps {
   size?: string | number;
 }
 
-export function createIconSelfLayoutPropsTransformer(valueTransformer: ReactValueTransformer) {
-  return createPropsTransformer({
+export function createIconSelfLayoutPropsConverter(valueResolver: ReactValueResolver) {
+  return createPropsConverter({
     _types: {
       trait: {} as SelfLayoutTrait,
       props: {} as IconSelfLayoutProps,
     },
     handlers: {
-      size: (node) => valueTransformer.getFormattedValue.width(node),
+      size: (node) => valueResolver.getFormattedValue.width(node),
     },
   });
 }
@@ -233,17 +227,17 @@ export interface RadiusProps {
   borderBottomRightRadius?: string | 0;
 }
 
-export function createRadiusPropsTransformer(valueTransformer: ReactValueTransformer) {
-  return createPropsTransformer({
+export function createRadiusPropsConverter(valueResolver: ReactValueResolver) {
+  return createPropsConverter({
     _types: {
       trait: {} as RadiusTrait,
       props: {} as RadiusProps,
     },
     handlers: {
-      borderTopLeftRadius: (node) => valueTransformer.getFormattedValue.topLeftRadius(node),
-      borderTopRightRadius: (node) => valueTransformer.getFormattedValue.topRightRadius(node),
-      borderBottomLeftRadius: (node) => valueTransformer.getFormattedValue.bottomLeftRadius(node),
-      borderBottomRightRadius: (node) => valueTransformer.getFormattedValue.bottomRightRadius(node),
+      borderTopLeftRadius: (node) => valueResolver.getFormattedValue.topLeftRadius(node),
+      borderTopRightRadius: (node) => valueResolver.getFormattedValue.topRightRadius(node),
+      borderBottomLeftRadius: (node) => valueResolver.getFormattedValue.bottomLeftRadius(node),
+      borderBottomRightRadius: (node) => valueResolver.getFormattedValue.bottomRightRadius(node),
     },
     shorthands: {
       borderRadius: [
@@ -271,15 +265,13 @@ export interface TypeStyleProps {
   maxLines?: number;
 }
 
-export function createTypeStylePropsTransformer({
-  valueTransformer,
-  styleService,
+export function createTypeStylePropsConverter({
+  valueResolver,
 }: {
-  valueTransformer: ReactValueTransformer;
-  styleService: StyleService;
-}): PropsTransformer<TypeStyleTrait, TypeStyleProps> {
-  return definePropsTransformer((node) => {
-    const styleName = node.textStyleKey ? styleService.getStyleName(node.textStyleKey) : undefined;
+  valueResolver: ReactValueResolver;
+}): PropsConverter<TypeStyleTrait, TypeStyleProps> {
+  return definePropsConverter((node) => {
+    const styleName = valueResolver.getTextStyleValue(node);
     const maxLines =
       node.style.textTruncation === "ENDING" ? (node.style.maxLines ?? undefined) : undefined;
 
@@ -291,9 +283,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,
     };
   });
@@ -303,9 +295,9 @@ export interface FrameFillProps {
   bg?: string;
 }
 
-export function createFrameFillPropsTransformer(valueTransformer: ReactValueTransformer) {
-  return definePropsTransformer<FillTrait, FrameFillProps>((node) => {
-    const bg = valueTransformer.getFormattedValue.frameFill(node);
+export function createFrameFillPropsConverter(valueResolver: ReactValueResolver) {
+  return definePropsConverter<FillTrait, FrameFillProps>((node) => {
+    const bg = valueResolver.getFormattedValue.frameFill(node);
 
     return {
       bg,
@@ -317,9 +309,9 @@ export interface ShapeFillProps {
   color?: string;
 }
 
-export function createShapeFillPropsTransformer(valueTransformer: ReactValueTransformer) {
-  return definePropsTransformer<FillTrait, ShapeFillProps>((node) => {
-    const color = valueTransformer.getFormattedValue.shapeFill(node);
+export function createShapeFillPropsConverter(valueResolver: ReactValueResolver) {
+  return definePropsConverter<FillTrait, ShapeFillProps>((node) => {
+    const color = valueResolver.getFormattedValue.shapeFill(node);
 
     return {
       color,
@@ -331,9 +323,9 @@ export interface TextFillProps {
   color?: string;
 }
 
-export function createTextFillPropsTransformer(valueTransformer: ReactValueTransformer) {
-  return definePropsTransformer<FillTrait, TextFillProps>((node) => {
-    const color = valueTransformer.getFormattedValue.textFill(node);
+export function createTextFillPropsConverter(valueResolver: ReactValueResolver) {
+  return definePropsConverter<FillTrait, TextFillProps>((node) => {
+    const color = valueResolver.getFormattedValue.textFill(node);
 
     return {
       color,
@@ -341,16 +333,46 @@ export function createTextFillPropsTransformer(valueTransformer: ReactValueTrans
   });
 }
 
+export interface VectorChildrenFillProps {
+  color?: string;
+}
+
+export function createVectorChildrenFillPropsConverter(valueResolver: ReactValueResolver) {
+  return definePropsConverter<ContainerLayoutTrait, VectorChildrenFillProps>((node) => {
+    if (node.children.length === 0) {
+      console.warn(
+        `createVectorChildrenFillPropsConverter: Node has no children. Name:${node.name}, ID:${node.id}`,
+      );
+      return {};
+    }
+
+    const vectors = node.children.filter(
+      (child) => child.type === "VECTOR" || child.type === "BOOLEAN_OPERATION",
+    );
+
+    const colors = vectors.map((vector) => valueResolver.getFormattedValue.shapeFill(vector));
+
+    const fills = new Set(colors.filter((color) => color !== undefined));
+
+    // If there are more than 1 color, colors are likely pre-defined in the icon component; we should ignore the color prop.
+    if (fills.size > 1) {
+      return {};
+    }
+
+    return { color: fills.values().next().value };
+  });
+}
+
 export interface StrokeProps {
   borderWidth?: number;
   borderColor?: string;
 }
 
-export function createStrokePropsTransformer(
-  valueTransformer: ReactValueTransformer,
-): PropsTransformer<StrokeTrait, StrokeProps> {
-  return definePropsTransformer((node) => {
-    const borderColor = valueTransformer.getFormattedValue.stroke(node);
+export function createStrokePropsConverter(
+  valueResolver: ReactValueResolver,
+): PropsConverter<StrokeTrait, StrokeProps> {
+  return definePropsConverter((node) => {
+    const borderColor = valueResolver.getFormattedValue.stroke(node);
     const borderWidth = borderColor ? node.strokeWeight : undefined;
 
     return {

package/src/codegen/targets/react/shape.ts

@@ -4,19 +4,19 @@ import type {
   NormalizedVectorNode,
 } from "@/normalizer";
 import { createElement, defineElementTransformer, type ElementTransformer } from "../../core";
-import type { PropsTransformers } from "./props";
+import type { PropsConverters } from "./props";
 
 export interface RectangleTransformerDeps {
-  propsTransformers: PropsTransformers;
+  propsConverters: PropsConverters;
 }
 
 export function createRectangleTransformer({
-  propsTransformers,
+  propsConverters,
 }: RectangleTransformerDeps): ElementTransformer<NormalizedRectangleNode> {
-  return defineElementTransformer((node: NormalizedRectangleNode, traverse) => {
+  return defineElementTransformer((node: NormalizedRectangleNode) => {
     return createElement(
       "Box",
-      { ...propsTransformers.selfLayout(node, traverse), background: "palette.gray200" },
+      { ...propsConverters.selfLayout(node), background: "palette.gray200" },
       undefined,
       "Rectangle Node Placeholder",
     );

package/src/codegen/targets/react/text.ts

@@ -1,20 +1,20 @@
 import type { NormalizedTextNode } from "@/normalizer";
 import { compactObject } from "@/utils/common";
 import { createElement, defineElementTransformer, type ElementTransformer } from "../../core";
-import type { PropsTransformers } from "./props";
+import type { PropsConverters } from "./props";
 
 export interface TextTransformerDeps {
-  propsTransformers: PropsTransformers;
+  propsConverters: PropsConverters;
 }
 
 export function createTextTransformer({
-  propsTransformers,
+  propsConverters,
 }: TextTransformerDeps): ElementTransformer<NormalizedTextNode> {
-  return defineElementTransformer((node: NormalizedTextNode, traverse) => {
+  return defineElementTransformer((node: NormalizedTextNode) => {
     const hasMultipleFills = node.fills.length > 1;
 
-    const fillProps = propsTransformers.textFill(node, traverse);
-    const typeStyleProps = propsTransformers.typeStyle(node, traverse);
+    const fillProps = propsConverters.textFill(node);
+    const typeStyleProps = propsConverters.typeStyle(node);
 
     const props = compactObject({
       ...typeStyleProps,

package/src/codegen/targets/react/value-resolver.ts

@@ -0,0 +1,35 @@
+import { createValueResolver, type ValueResolver } from "@/codegen/core";
+import { styleService, variableService } from "@/codegen/default-services";
+import { camelCasePreserveUnderscoreBetweenNumbers } from "@/utils/common";
+import { toCssPixel, toCssRgba } from "@/utils/css";
+import { camelCase } from "change-case";
+
+export type ReactValueResolver = ValueResolver<string, string, string, number>;
+
+export const valueResolver = createValueResolver({
+  variableService,
+  variableNameFormatter: ({ slug }) =>
+    slug
+      .filter(
+        (s) =>
+          !(
+            s === "dimension" ||
+            s === "radius" ||
+            s === "font-size" ||
+            s === "font-weight" ||
+            s === "line-height"
+          ),
+      )
+      .map((s) => s.replaceAll(",", "_"))
+      .map(camelCasePreserveUnderscoreBetweenNumbers)
+      .join("."),
+  styleService,
+  styleNameFormatter: ({ slug }) =>
+    camelCase(slug[slug.length - 1]!, { mergeAmbiguousCharacters: true }),
+  rawValueFormatters: {
+    color: (value: RGBA) => toCssRgba(value),
+    dimension: (value: number) => toCssPixel(value),
+    fontDimension: (value: number) => toCssPixel(value),
+    fontWeight: (value: number) => value,
+  },
+});

package/src/entities/icon.repository.ts

@@ -1,11 +1,11 @@
 import type { IconData } from "./icon.interface";
 
 export interface IconRepository {
-  getIconData(key: string): IconData;
+  getOne(key: string): IconData;
 }
 
 export function createStaticIconRepository(iconRecord: Record<string, IconData>) {
   return {
-    getIconData: (key: string) => iconRecord[key],
+    getOne: (key: string) => iconRecord[key],
   };
 }

package/src/entities/icon.service.ts

@@ -1,35 +1,24 @@
-import { pascalCase } from "change-case";
+import type { IconData } from "./icon.interface";
 import type { IconRepository } from "./icon.repository";
 
 export interface IconService {
-  isIconComponent: (componentKey: string) => boolean;
-  createIconTagName: (key?: string) => string;
+  isAvailable: (componentKey: string) => boolean;
+  getOne: (componentKey: string) => IconData;
 }
 
 export function createIconService({
   iconRepository,
 }: { iconRepository: IconRepository }): IconService {
-  function isIconComponent(componentKey: string) {
-    return iconRepository.getIconData(componentKey) !== undefined;
+  function isAvailable(componentKey: string) {
+    return iconRepository.getOne(componentKey) !== undefined;
   }
 
-  function createIconTagName(key?: string) {
-    if (!key) {
-      return "UnknownIcon";
-    }
-
-    const iconData = iconRepository.getIconData(key);
-    if (!iconData) {
-      return "UnknownIcon";
-    }
-
-    const { name, weight } = iconData;
-
-    return pascalCase(`${name}${weight ? weight : ""}`);
+  function getOne(componentKey: string) {
+    return iconRepository.getOne(componentKey);
   }
 
   return {
-    isIconComponent,
-    createIconTagName,
+    isAvailable,
+    getOne,
   };
 }

package/src/entities/style.service.ts

@@ -1,18 +1,16 @@
 import type { StyleRepository } from "./style.repository";
 
 export interface StyleService {
-  getStyleName: (id: string) => string | undefined;
+  getSlug: (id: string) => string[] | undefined;
 }
 
 // TODO: inferStyleName 추가해야 함, rest api에서 style value가 제공되지 않고 있어 보류
 export function createStyleService({
   styleRepository,
-  styleNameTransformer,
 }: {
   styleRepository: StyleRepository;
-  styleNameTransformer: ({ slug }: { slug: string[] }) => string;
 }): StyleService {
-  function getFigmaStyleName(id: string) {
+  function getName(id: string) {
     const style = styleRepository.findOneByKey(id);
 
     if (!style) {
@@ -22,8 +20,8 @@ export function createStyleService({
     return style.name;
   }
 
-  function getFigmaStyleSlug(id: string): string[] | undefined {
-    const name = getFigmaStyleName(id);
+  function getSlug(id: string): string[] | undefined {
+    const name = getName(id);
 
     if (!name) {
       return undefined;
@@ -32,17 +30,7 @@ export function createStyleService({
     return name.split("/");
   }
 
-  function getStyleName(id: string) {
-    const slug = getFigmaStyleSlug(id);
-
-    if (!slug) {
-      return undefined;
-    }
-
-    return styleNameTransformer({ slug });
-  }
-
   return {
-    getStyleName,
+    getSlug,
   };
 }

package/src/entities/variable.service.ts

@@ -1,42 +1,41 @@
-import { isVariableAlias, sanitizeVariableId } from "@/utils/figma-variable";
+import {
+  isIdenticalVariableValue,
+  isInsideScope,
+  isVariableAlias,
+  sanitizeVariableId,
+} from "@/utils/figma-variable";
 import type { Variable, VariableScope, VariableValueResolved } from "./variable.interface";
 import type { VariableRepository } from "./variable.repository";
 
 export interface VariableService {
-  getVariableName: (id: string) => string;
-  inferVariableName: (value: VariableValueResolved, scope: VariableScope) => string | undefined;
+  getSlug: (id: string) => string[] | undefined;
+  resolveValue: (variable: Variable, mode: string) => VariableValueResolved;
+  infer: (value: VariableValueResolved, scope: VariableScope) => Variable | undefined;
 }
 
 export interface VariableServiceDeps {
   variableRepository: VariableRepository;
-  variableNameTransformer: ({ slug }: { slug: string[] }) => string;
-  inferCompareFunction: (name1: string, name2: string) => number;
+  inferCompareFunction: (a: Variable, b: Variable) => number;
 }
 
 export function createVariableService({
   variableRepository,
-  variableNameTransformer,
   inferCompareFunction,
 }: VariableServiceDeps): VariableService {
   const variables = variableRepository.getVariableList();
 
   // private
-  function getFigmaVariableName(key: string) {
+  function getName(key: string) {
     const sanitizedId = sanitizeVariableId(key);
     const variable = variableRepository.findVariableByKey(sanitizedId);
 
     if (!variable) {
-      return "UNKNOWN_VARIABLE";
+      return undefined;
     }
 
     return variable.name;
   }
 
-  function getFigmaVariableSlug(key: string): string[] {
-    const name = getFigmaVariableName(key);
-    return name.split("/");
-  }
-
   function getDefaultModeId(variable: Variable) {
     const variableCollection = variableRepository.findVariableCollectionById(
       variable.variableCollectionId,
@@ -50,84 +49,53 @@ export function createVariableService({
     return variableCollection.defaultModeId;
   }
 
-  function resolveVariableValue(id: string, mode: string): VariableValueResolved {
-    const variable = variableRepository.findVariableById(id);
-    if (!variable) {
-      throw new Error(`Variable not found: ${id}`);
-    }
-
-    const value = variable.valuesByMode[mode];
-
-    if (value === undefined) {
-      throw new Error(`Variable value not found: ${id} ${mode}`);
-    }
+  // public
+  function getSlug(key: string): string[] | undefined {
+    const name = getName(key);
 
-    if (isVariableAlias(value)) {
-      return resolveVariableValue(value.id, mode);
+    if (!name) {
+      return undefined;
     }
 
-    return value;
+    return name.split("/");
   }
 
-  function isIdenticalVariableValue(value1: VariableValueResolved, value2: VariableValueResolved) {
-    if (typeof value1 !== typeof value2) {
-      return false;
-    }
+  function resolveValue(variable: Variable, mode: string): VariableValueResolved {
+    const value = variable.valuesByMode[mode];
 
-    if (typeof value1 === "string" || typeof value1 === "number" || typeof value1 === "boolean") {
-      return value1 === value2;
+    if (value === undefined) {
+      throw new Error(`Variable value not found: ${variable.id} ${mode}`);
     }
 
-    return (
-      value1.r === (value2 as RGBA).r &&
-      value1.g === (value2 as RGBA).g &&
-      value1.b === (value2 as RGBA).b &&
-      value1.a === (value2 as RGBA).a
-    );
-  }
-
-  function isInsideScope(variable: Variable, scope: VariableScope) {
-    if (variable.scopes.includes("ALL_SCOPES")) {
-      return true;
-    }
+    if (isVariableAlias(value)) {
+      const resolvedVariable = variableRepository.findVariableById(value.id);
 
-    if (variable.scopes.includes("ALL_FILLS")) {
-      if (scope === "FRAME_FILL" || scope === "SHAPE_FILL" || scope === "TEXT_FILL") {
-        return true;
+      if (!resolvedVariable) {
+        throw new Error(`Variable not found: ${value.id}`);
       }
-    }
 
-    return variable.scopes.includes(scope);
-  }
+      return resolveValue(resolvedVariable, mode);
+    }
 
-  // public
-  function getVariableName(key: string) {
-    const slug = getFigmaVariableSlug(key);
-    return variableNameTransformer({ slug });
+    return value;
   }
 
-  function inferVariableName(value: VariableValueResolved, scope: VariableScope) {
+  function infer(value: VariableValueResolved, scope: VariableScope) {
     // NOTE: We assume that the variable is in the default mode or value is equal between all modes for simplicity.
     const inferredVariables = variables.filter(
       (variable) =>
         isInsideScope(variable, scope) &&
-        isIdenticalVariableValue(
-          resolveVariableValue(variable.id, getDefaultModeId(variable)),
-          value,
-        ),
-    );
-
-    const inferredVariableNames = inferredVariables.map((variable) =>
-      getVariableName(variable.key),
+        isIdenticalVariableValue(resolveValue(variable, getDefaultModeId(variable)), value),
     );
 
-    const sortedVariableNames = inferredVariableNames.sort(inferCompareFunction);
+    const sortedVariables = inferredVariables.sort(inferCompareFunction);
 
-    return sortedVariableNames[0];
+    return sortedVariables[0];
   }
 
   return {
-    getVariableName,
-    inferVariableName,
+    getSlug,
+    resolveValue,
+    infer,
   };
 }