kuma-ui · kotarella1110 · Aug 25, 2023 · Aug 13, 2023 · Aug 25, 2023 · Aug 25, 2023
diff --git a/.changeset/wise-teachers-build.md b/.changeset/wise-teachers-build.md
@@ -0,0 +1,5 @@
+---
+"@kuma-ui/system": patch
+---
+
+Fix the way to calculate processedProps
diff --git a/packages/system/src/animation.ts b/packages/system/src/animation.ts
@@ -18,7 +18,7 @@ export type AnimationProps = Partial<
     CSSProperties<"animationIterationCount", true>
 >;
 
-const animationMappings: Record<AnimationKeys, string> = {
+export const animationMappings: Record<AnimationKeys, string> = {
   animation: "animation",
   animationComposition: "animation-composition",
   animationDelay: "animation-delay",

diff --git a/packages/system/src/background.ts b/packages/system/src/background.ts
@@ -59,7 +59,7 @@ export type BackgroundProps<AutoPrefix extends string = string & {}> = Partial<
   >
 >;
 
-const backgroundMappings: Record<BackgroundKeys, string> = {
+export const backgroundMappings: Record<BackgroundKeys, string> = {
   backgroundImage: "background-image",
   bgImage: "background-image",
   backgroundPosition: "background-position",

diff --git a/packages/system/src/border.ts b/packages/system/src/border.ts
@@ -84,7 +84,7 @@ export type BorderProps = Partial<
     >
 >;
 
-const borderMappings: Record<BorderKeys, string> = {
+export const borderMappings: Record<BorderKeys, string> = {
   border: "border",
   borderTop: "border-top",
   borderRight: "border-right",

diff --git a/packages/system/src/color.ts b/packages/system/src/color.ts
@@ -35,7 +35,7 @@ export type ColorProps<T extends ThemeSystemType = ThemeSystemType> = Partial<
   >
 >;
 
-const colorMappings: Record<ColorKeys, string> = {
+export const colorMappings: Record<ColorKeys, string> = {
   background: "background",
   bg: "background",
   backgroundColor: "background-color",

diff --git a/packages/system/src/column.ts b/packages/system/src/column.ts
@@ -21,7 +21,7 @@ export type ColumnProps = Partial<
     >
 >;
 
-const columnMappings: Record<ColumnKeys, string> = {
+export const columnMappings: Record<ColumnKeys, string> = {
   columnCount: "column-count",
   columnFill: "column-fill",
   columnGap: "column-gap",

diff --git a/packages/system/src/compose.test.ts b/packages/system/src/compose.test.ts
@@ -15,6 +15,7 @@ import { font } from "./font";
 import { mask } from "./mask";
 import { column } from "./column";
 import { background } from "./background";
+import { text } from "./text";
 
 describe("compose function", () => {
   test("should combine styles from multiple style functions", () => {
@@ -31,6 +32,7 @@ describe("compose function", () => {
       shadow,
       list,
       effect,
+      text,
       font,
       mask,
       column,
@@ -61,6 +63,8 @@ describe("compose function", () => {
       bgAttachment: "fixed",
       bgClip: "border-box",
       bgOrigin: "content-box",
+      marginRight: 4,
+      textAlign: "right",
     };
     // Act
     const styles = combinedFunction(props);
@@ -91,6 +95,8 @@ describe("compose function", () => {
     expect(styles.base).toContain("background-attachment: fixed;");
     expect(styles.base).toContain("background-clip: border-box;");
     expect(styles.base).toContain("background-origin: content-box;");
+    expect(styles.base).toContain("margin-right: 4px;");
+    expect(styles.base).toContain("text-align: right;");
   });
 
   test("should not include invalid keys in the resulting CSS", () => {

diff --git a/packages/system/src/compose.ts b/packages/system/src/compose.ts
@@ -1,24 +1,25 @@
-import { AnimationProps } from "./animation";
-import { SpaceProps } from "./space";
-import { TypographyProps } from "./typography";
-import { LayoutProps } from "./layout";
-import { ColorProps } from "./color";
-import { FlexProps } from "./flex";
-import { BorderProps } from "./border";
-import { OutlineProps } from "./outline";
-import { PositionProps } from "./position";
-import { ShadowProps } from "./shadow";
+import { AnimationProps, animationMappings } from "./animation";
+import { SpaceProps, spaceMappings } from "./space";
+import { TypographyProps, typographyMappings } from "./typography";
+import { LayoutProps, layoutMappings } from "./layout";
+import { ColorProps, colorMappings } from "./color";
+import { FlexProps, flexMappings } from "./flex";
+import { BorderProps, borderMappings } from "./border";
+import { OutlineProps, outlineMappings } from "./outline";
+import { PositionProps, positionMappings } from "./position";
+import { ShadowProps, shadowMappings } from "./shadow";
 import { PseudoProps } from "./pseudo";
 import { ThemeSystemType, ResponsiveStyle } from "./types";
 import { styleCache } from "@kuma-ui/sheet";
-import { GridProps } from "./grid";
-import { ListProps } from "./list";
-import { EffectProps } from "./effect";
-import { TextProps } from "./text";
-import { FontProps } from "./font";
-import { MaskProps } from "./mask";
-import { ColumnProps } from "./column";
-import { BackgroundProps } from "./background";
+import { GridProps, gridMappings } from "./grid";
+import { ListProps, listMappings } from "./list";
+import { EffectProps, effectMappings } from "./effect";
+import { TextProps, textMappings } from "./text";
+import { FontProps, fontMappings } from "./font";
+import { MaskProps, maskMappings } from "./mask";
+import { ColumnProps, columnMappings } from "./column";
+import { BackgroundProps, backgroundMappings } from "./background";
+import { StyledKeyType } from "./keys";
 
 export type StyledProps<T extends ThemeSystemType = ThemeSystemType> =
   TypographyProps<T> &
@@ -44,6 +45,28 @@ export type StyledProps<T extends ThemeSystemType = ThemeSystemType> =
 
 export type StyleFunction = (props: StyledProps) => ResponsiveStyle;
 
+// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment -- FIXME
+const styleMappings: Record<StyledKeyType, string> = Object.assign(
+  {},
+  animationMappings,
+  spaceMappings,
+  typographyMappings,
+  layoutMappings,
+  colorMappings,
+  flexMappings,
+  borderMappings,
+  outlineMappings,
+  positionMappings,
+  shadowMappings,
+  gridMappings,
+  listMappings,
+  effectMappings,
+  textMappings,
+  fontMappings,
+  maskMappings,
+  columnMappings,
+  backgroundMappings
+);
 /**
  * Composes multiple style functions into a single style function.
  * This allows for more efficient application of multiple style functions at once,
@@ -81,7 +104,7 @@ export const compose = (...styleFunctions: StyleFunction[]): StyleFunction => {
 
         const processedProps = Object.keys(outputProps).filter((key) =>
           // eslint-disable-next-line @typescript-eslint/restrict-template-expressions -- FIXME
-          newStyles.base.includes(`${outputProps[key as keyof StyledProps]}:`)
+          newStyles.base.includes(`${styleMappings[key as StyledKeyType]}:`)
         );
         // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment -- FIXME
         outputProps = Object.keys(outputProps).reduce((remainingProps, key) => {

diff --git a/packages/system/src/effect.ts b/packages/system/src/effect.ts
@@ -16,7 +16,7 @@ export type EffectProps = Partial<
   >
 >;
 
-const effectMappings: Record<EffectKeys, string> = {
+export const effectMappings: Record<EffectKeys, string> = {
   transition: "transition",
   transitionDuration: "transition-duration",
   transitionProperty: "transition-property",

diff --git a/packages/system/src/flex.ts b/packages/system/src/flex.ts
@@ -22,7 +22,7 @@ export type FlexProps = Partial<
     CSSProperties<"gap", true>
 >;
 
-const flexMappings: Record<FlexKeys, string> = {
+export const flexMappings: Record<FlexKeys, string> = {
   flexDirection: "flex-direction",
   flexDir: "flex-direction",
   justifyContent: "justify-content",

diff --git a/packages/system/src/font.ts b/packages/system/src/font.ts
@@ -34,7 +34,7 @@ export type FontProps<T extends ThemeSystemType = ThemeSystemType> = Partial<
     AddProperty<CSSProperties<"fontWeight", true>, T["fontWeights"]>
 >;
 
-const fontMappings: Record<FontKeys, string> = {
+export const fontMappings: Record<FontKeys, string> = {
   font: "font",
   fontFamily: "font-family",
   fontFeatureSettings: "font-feature-settings",

diff --git a/packages/system/src/grid.ts b/packages/system/src/grid.ts
@@ -10,7 +10,7 @@ export type GridProps = Partial<
   CSSProperties<Exclude<GridKeys, UnitKeys>> & CSSProperties<UnitKeys, true>
 >;
 
-const gridMappings: Record<GridKeys, string> = {
+export const gridMappings: Record<GridKeys, string> = {
   grid: "grid",
   gridArea: "grid-area",
   gridAutoColumns: "grid-auto-columns",

diff --git a/packages/system/src/keys.ts b/packages/system/src/keys.ts
@@ -304,6 +304,8 @@ export type StyledKeyType =
   | AnimationKeys
   | SpaceKeys
   | TypographyKeys
+  | FontKeys
+  | TextKeys
   | LayoutKeys
   | ColorKeys
   | FlexKeys

diff --git a/packages/system/src/layout.ts b/packages/system/src/layout.ts
@@ -11,7 +11,7 @@ export type LayoutProps = Partial<
     CSSProperties<"cursor">
 >;
 
-const layoutMappings: Record<LayoutKeys, string> = {
+export const layoutMappings: Record<LayoutKeys, string> = {
   width: "width",
   minWidth: "min-width",
   maxWidth: "max-width",

diff --git a/packages/system/src/list.ts b/packages/system/src/list.ts
@@ -8,7 +8,7 @@ export type ListProps = Partial<
   >
 >;
 
-const listMappings: Record<ListKeys, string> = {
+export const listMappings: Record<ListKeys, string> = {
   listStyle: "list-style",
   listStyleImage: "list-style-image",
   listStylePosition: "list-style-position",

diff --git a/packages/system/src/mask.ts b/packages/system/src/mask.ts
@@ -25,7 +25,7 @@ export type MaskProps = Partial<
     >
 >;
 
-const maskMappings: Record<MaskKeys, string> = {
+export const maskMappings: Record<MaskKeys, string> = {
   mask: "mask",
   maskBorder: "mask-border",
   maskBorderMode: "mask-border-mode",

diff --git a/packages/system/src/outline.ts b/packages/system/src/outline.ts
@@ -10,7 +10,7 @@ export type OutlineProps = Partial<
     CSSProperties<"outlineStyle">
 >;
 
-const outlineMappings: Record<OutlineKeys, string> = {
+export const outlineMappings: Record<OutlineKeys, string> = {
   outline: "outline",
   outlineOffset: "outline-offset",
   outlineWidth: "outline-width",

diff --git a/packages/system/src/position.ts b/packages/system/src/position.ts
@@ -7,7 +7,7 @@ export type PositionProps = Partial<
   CSSProperties<"top" | "right" | "left" | "bottom" | "inset", true>
 >;
 
-const positionMappings: Record<PositionKeys, string> = {
+export const positionMappings: Record<PositionKeys, string> = {
   top: "top",
   right: "right",
   left: "left",

diff --git a/packages/system/src/shadow.ts b/packages/system/src/shadow.ts
@@ -4,7 +4,7 @@ import { applyResponsiveStyles } from "./responsive";
 
 export type ShadowProps = Partial<CSSProperties<"boxShadow" | "textShadow">>;
 
-const shadowMappings: Record<ShadowKeys, string> = {
+export const shadowMappings: Record<ShadowKeys, string> = {
   boxShadow: "box-shadow",
   textShadow: "text-shadow",
 } as const;

diff --git a/packages/system/src/space.ts b/packages/system/src/space.ts
@@ -100,7 +100,7 @@ export type SpaceProps = Partial<
   }
 >;
 
-const spaceMappings: Record<SpaceKeys, string> = {
+export const spaceMappings: Record<SpaceKeys, string> = {
   margin: "margin",
   m: "margin",
   marginTop: "margin-top",

diff --git a/packages/system/src/text.ts b/packages/system/src/text.ts
@@ -29,7 +29,7 @@ export type TextProps = Partial<
     CSSProperties<"textUnderlinePosition">
 >;
 
-const textMappings: Record<TextKeys, string> = {
+export const textMappings: Record<TextKeys, string> = {
   textAlign: "text-align",
   textAlignLast: "text-align-last",
   textCombineUpright: "text-combine-upright",

diff --git a/packages/system/src/typography.ts b/packages/system/src/typography.ts
@@ -27,7 +27,7 @@ export type TypographyProps<T extends ThemeSystemType = ThemeSystemType> =
       CSSProperties<"wordBreak" | "writingMode">
   >;
 
-const typographyMappings: Record<TypographyKeys, string> = {
+export const typographyMappings: Record<TypographyKeys, string> = {
   hyphenateCharacter: "hyphenate-character",
   hyphenateLimitChars: "hyphenate-limit-chars",
   hyphens: "hyphens",