refactor: improve toCssUnit logic to reduce bundle size (kuma-ui#385)

thomaslindstrom · Dec 8, 2023 · 407a55e · 407a55e
1 parent 8377f8c
commit 407a55e
Show file tree

Hide file tree

Showing 25 changed files with 106 additions and 282 deletions.
diff --git a/.changeset/perfect-lamps-clean.md b/.changeset/perfect-lamps-clean.md
@@ -0,0 +1,6 @@
+---
+"@kuma-ui/core": patch
+"@kuma-ui/system": patch
+---
+
+refactor: improve toCssUnit logic to reduce bundle size
diff --git a/packages/core/src/components/Spacer/handler.ts b/packages/core/src/components/Spacer/handler.ts
@@ -25,12 +25,7 @@ export const spacerDefaultProps: StyledProps = {};
 export const spacerHandler = (props: SpacerSpecificProps): StyledProps => {
   if (!props.horizontal && !props.size) return {};
   const px =
-    typeof props.size === "number"
-      ? toCssUnit(props.size)
-      : // eslint-disable-next-line no-extra-boolean-cast -- FIXME
-      !!props.size
-      ? props.size
-      : "0px";
+    typeof props.size === "undefined" ? "0px" : toCssUnit("width", props.size);
 
   return props.horizontal
     ? {

diff --git a/packages/system/src/__snapshots__/consumeStyleProps.test.ts.snap b/packages/system/src/__snapshots__/consumeStyleProps.test.ts.snap
@@ -9,7 +9,7 @@ exports[`consumeStyleProps function > should consume animation props 1`] = `
 
 exports[`consumeStyleProps function > should consume background props 1`] = `
 {
-  "base": "background-image: url('img_tree.png');background-position: center;background-position-x: 10;background-position-y: 20;background-size: cover;background-repeat: no-repeat;background-attachment: fixed;background-clip: border-box;background-origin: content-box;background-blend-mode: hue;",
+  "base": "background-image: url('img_tree.png');background-position: center;background-position-x: 10px;background-position-y: 20px;background-size: cover;background-repeat: no-repeat;background-attachment: fixed;background-clip: border-box;background-origin: content-box;background-blend-mode: hue;",
   "media": {},
 }
 `;
@@ -86,7 +86,7 @@ exports[`consumeStyleProps function > should consume list props 1`] = `
 
 exports[`consumeStyleProps function > should consume mask props 1`] = `
 {
-  "base": "mask: url(#c1) luminance;mask-border: url(\\"border-mask.png\\") 25;mask-border-mode: alpha;mask-border-outset: 1.5;mask-border-repeat: stretch round;mask-border-slice: 10;mask-border-source: url('hogesrc.png');mask-border-width: 10;mask-clip: border-box;mask-composite: add;mask-image: url('hogeimg.png');mask-mode: luminance;mask-origin: border-box;mask-position: center;mask-repeat: repeat;mask-size: 10% 20%;mask-type: alpha;",
+  "base": "mask: url(#c1) luminance;mask-border: url(\\"border-mask.png\\") 25;mask-border-mode: alpha;mask-border-outset: 1.5px;mask-border-repeat: stretch round;mask-border-slice: 10px;mask-border-source: url('hogesrc.png');mask-border-width: 10px;mask-clip: border-box;mask-composite: add;mask-image: url('hogeimg.png');mask-mode: luminance;mask-origin: border-box;mask-position: center;mask-repeat: repeat;mask-size: 10% 20%;mask-type: alpha;",
   "media": {},
 }
 `;

diff --git a/packages/system/src/consumeStyleProps.ts b/packages/system/src/consumeStyleProps.ts
@@ -1,47 +1,27 @@
-import {
-  AnimationProps,
-  animationConverters,
-  animationMappings,
-} from "./props/animation";
-import { SpaceProps, spaceConverters, spaceMappings } from "./props/space";
-import {
-  TypographyProps,
-  typographyConverters,
-  typographyMappings,
-} from "./props/typography";
-import { LayoutProps, layoutConverters, layoutMappings } from "./props/layout";
-import { ColorProps, colorConverters, colorMappings } from "./props/color";
-import { FlexProps, flexConverters, flexMappings } from "./props/flex";
-import { BorderProps, borderConverters, borderMappings } from "./props/border";
-import {
-  OutlineProps,
-  outlineConverters,
-  outlineMappings,
-} from "./props/outline";
-import {
-  PositionProps,
-  positionConverters,
-  positionMappings,
-} from "./props/position";
-import { ShadowProps, shadowConverters, shadowMappings } from "./props/shadow";
-import { PseudoProps } from "./pseudo";
-import { ThemeSystemType, ResponsiveStyle, ValueConverter } from "./types";
+import { AnimationProps, animationMappings } from "./props/animation";
+import { SpaceProps, spaceMappings } from "./props/space";
+import { TypographyProps, typographyMappings } from "./props/typography";
+import { LayoutProps, layoutMappings } from "./props/layout";
+import { ColorProps, colorMappings } from "./props/color";
+import { FlexProps, flexMappings } from "./props/flex";
+import { BorderProps, borderMappings } from "./props/border";
+import { OutlineProps, outlineMappings } from "./props/outline";
+import { PositionProps, positionMappings } from "./props/position";
+import { ShadowProps, shadowMappings } from "./props/shadow";
+import { ThemeSystemType, ResponsiveStyle } from "./types";
 import { styleCache } from "@kuma-ui/sheet";
-import { GridProps, gridConverters, gridMappings } from "./props/grid";
-import { ListProps, listConverters, listMappings } from "./props/list";
-import { EffectProps, effectConverters, effectMappings } from "./props/effect";
-import { TextProps, textConverters, textMappings } from "./props/text";
-import { FontProps, fontConverters, fontMappings } from "./props/font";
-import { MaskProps, maskConverters, maskMappings } from "./props/mask";
-import { ColumnProps, columnConverters, columnMappings } from "./props/column";
-import {
-  BackgroundProps,
-  backgroundConverters,
-  backgroundMappings,
-} from "./props/background";
-import { FilterProps, filterConverters, filterMappings } from "./props/filter";
+import { GridProps, gridMappings } from "./props/grid";
+import { ListProps, listMappings } from "./props/list";
+import { EffectProps, effectMappings } from "./props/effect";
+import { TextProps, textMappings } from "./props/text";
+import { FontProps, fontMappings } from "./props/font";
+import { MaskProps, maskMappings } from "./props/mask";
+import { ColumnProps, columnMappings } from "./props/column";
+import { BackgroundProps, backgroundMappings } from "./props/background";
+import { FilterProps, filterMappings } from "./props/filter";
 import { StyledKeyType } from "./keys";
 import { applyResponsiveStyles } from "./responsive";
+import { toCssUnit } from "./toCSS";
 
 export type StyledProps<T extends ThemeSystemType = ThemeSystemType> =
   TypographyProps<T> &
@@ -92,30 +72,6 @@ const styleMappings: Record<StyledKeyType, string> = Object.assign(
   filterMappings,
 );
 
-const styleConverters: Partial<Record<StyledKeyType, ValueConverter>> =
-  Object.assign(
-    {},
-    animationConverters,
-    spaceConverters,
-    typographyConverters,
-    layoutConverters,
-    colorConverters,
-    flexConverters,
-    borderConverters,
-    outlineConverters,
-    positionConverters,
-    shadowConverters,
-    gridConverters,
-    listConverters,
-    effectConverters,
-    textConverters,
-    fontConverters,
-    maskConverters,
-    columnConverters,
-    backgroundConverters,
-    filterConverters,
-  ) as Partial<Record<StyledKeyType, ValueConverter>>;
-
 export const consumeStyleProps = (props: StyledProps): ResponsiveStyle => {
   const cacheKey = JSON.stringify(props);
 
@@ -130,13 +86,12 @@ export const consumeStyleProps = (props: StyledProps): ResponsiveStyle => {
     const cssValue = props[key as StyledKeyType];
     if (cssValue == null) continue;
 
-    const converter = styleConverters[key as StyledKeyType];
     const properties = styleMappings[key as StyledKeyType]?.split(",") ?? [];
     for (const property of properties) {
       const responsiveStyles = applyResponsiveStyles(
         property,
         cssValue,
-        converter,
+        (value) => toCssUnit(key, value),
       );
       base += responsiveStyles.base;
       for (const [breakpoint, css] of Object.entries(responsiveStyles.media)) {

diff --git a/packages/system/src/props/animation.ts b/packages/system/src/props/animation.ts
@@ -1,6 +1,5 @@
 import { AnimationKeys } from "../keys";
-import { CSSProperties, ResponsiveStyle, ValueConverter } from "../types";
-import { applyResponsiveStyles } from "../responsive";
+import { CSSProperties } from "../types";
 
 export type AnimationProps = Partial<
   CSSProperties<
@@ -31,7 +30,3 @@ export const animationMappings: Record<AnimationKeys, string> = {
   animationTimeline: "animation-timeline",
   animationTimingFunction: "animation-timing-function",
 };
-
-export const animationConverters: Partial<
-  Record<AnimationKeys, ValueConverter>
-> = {};
diff --git a/packages/system/src/props/background.ts b/packages/system/src/props/background.ts
@@ -1,13 +1,5 @@
 import { BackgroundKeys } from "../keys";
-import {
-  AddProperty,
-  CSSProperties,
-  CSSValue,
-  ResponsiveStyle,
-  ValueConverter,
-} from "../types";
-import { applyResponsiveStyles } from "../responsive";
-import { toCssUnit } from "../toCSS";
+import { AddProperty, CSSProperties, CSSValue } from "../types";
 
 // eslint-disable-next-line @typescript-eslint/ban-types
 export type BackgroundProps<AutoPrefix extends string = string & {}> = Partial<
@@ -92,11 +84,3 @@ export const backgroundMappings: Record<BackgroundKeys, string> = {
   backgroundBlendMode: "background-blend-mode",
   bgBlendMode: "background-blend-mode",
 } as const;
-
-export const backgroundConverters: Partial<
-  Record<BackgroundKeys, ValueConverter>
-> = {
-  bgPositionX: toCssUnit,
-  bgPositionY: toCssUnit,
-  bgSize: toCssUnit,
-};
diff --git a/packages/system/src/props/border.ts b/packages/system/src/props/border.ts
@@ -1,14 +1,10 @@
 import { BorderKeys } from "../keys";
-import { toCssUnit } from "../toCSS";
 import {
   AddProperty,
   CSSProperties,
   CSSValue,
-  ResponsiveStyle,
   ThemeSystemType,
-  ValueConverter,
 } from "../types";
-import { applyResponsiveStyles } from "../responsive";
 
 export type BorderProps<T extends ThemeSystemType = ThemeSystemType> = Partial<
   {
@@ -127,29 +123,3 @@ export const borderMappings: Record<BorderKeys, string> = {
   borderStartRadius: "border-top-left-radius,border-bottom-left-radius",
   borderEndRadius: "border-top-right-radius,border-bottom-right-radius",
 };
-
-export const borderConverters: Partial<Record<BorderKeys, ValueConverter>> = {
-  border: toCssUnit,
-  borderTop: toCssUnit,
-  borderRight: toCssUnit,
-  borderLeft: toCssUnit,
-  borderBottom: toCssUnit,
-  borderX: toCssUnit,
-  borderY: toCssUnit,
-  borderRadius: toCssUnit,
-  borderTopLeftRadius: toCssUnit,
-  borderTopRightRadius: toCssUnit,
-  borderBottomLeftRadius: toCssUnit,
-  borderBottomRightRadius: toCssUnit,
-  borderWidth: toCssUnit,
-  borderTopWidth: toCssUnit,
-  borderBottomWidth: toCssUnit,
-  borderLeftWidth: toCssUnit,
-  borderRightWidth: toCssUnit,
-  borderStart: toCssUnit,
-  borderEnd: toCssUnit,
-  borderStartWidth: toCssUnit,
-  borderEndWidth: toCssUnit,
-  borderStartRadius: toCssUnit,
-  borderEndRadius: toCssUnit,
-};
diff --git a/packages/system/src/props/color.ts b/packages/system/src/props/color.ts
@@ -3,11 +3,8 @@ import {
   AddProperty,
   CSSProperties,
   CSSValue,
-  ResponsiveStyle,
   ThemeSystemType,
-  ValueConverter,
 } from "../types";
-import { applyResponsiveStyles } from "../responsive";
 
 export type ColorProps<T extends ThemeSystemType = ThemeSystemType> = Partial<
   AddProperty<
@@ -49,5 +46,3 @@ export const colorMappings: Record<ColorKeys, string> = {
   opacity: "opacity",
   visibility: "visibility",
 };
-
-export const colorConverters: Partial<Record<ColorKeys, ValueConverter>> = {};
diff --git a/packages/system/src/props/column.ts b/packages/system/src/props/column.ts
@@ -1,13 +1,5 @@
-import {
-  AddProperty,
-  CSSProperties,
-  ResponsiveStyle,
-  ThemeSystemType,
-  ValueConverter,
-} from "../types";
+import { AddProperty, CSSProperties, ThemeSystemType } from "../types";
 import { ColumnKeys } from "../keys";
-import { applyResponsiveStyles } from "../responsive";
-import { toCssUnit } from "../toCSS";
 
 export type ColumnProps<T extends ThemeSystemType = ThemeSystemType> = Partial<
   CSSProperties<
@@ -36,9 +28,3 @@ export const columnMappings: Record<ColumnKeys, string> = {
   columnWidth: "column-width",
   columns: "columns",
 };
-
-export const columnConverters: Partial<Record<ColumnKeys, ValueConverter>> = {
-  columnGap: toCssUnit,
-  columnRuleWidth: toCssUnit,
-  columnWidth: toCssUnit,
-};
diff --git a/packages/system/src/props/effect.ts b/packages/system/src/props/effect.ts
@@ -1,11 +1,5 @@
 import { EffectKeys } from "../keys";
-import {
-  CSSProperties,
-  CSSValue,
-  ResponsiveStyle,
-  ValueConverter,
-} from "../types";
-import { applyResponsiveStyles } from "../responsive";
+import { CSSProperties } from "../types";
 
 export type EffectProps = Partial<
   CSSProperties<
@@ -34,5 +28,3 @@ export const effectMappings: Record<EffectKeys, string> = {
   transformStyle: "transform-style",
   clipPath: "clip-path",
 } as const;
-
-export const effectConverters: Partial<Record<EffectKeys, ValueConverter>> = {};
diff --git a/packages/system/src/props/filter.ts b/packages/system/src/props/filter.ts
@@ -1,12 +1,9 @@
-import { CSSProperties, ResponsiveStyle, ValueConverter } from "../types";
+import { CSSProperties } from "../types";
 import { FilterKeys } from "../keys";
-import { applyResponsiveStyles } from "../responsive";
 
 export type FilterProps = Partial<CSSProperties<"filter" | "backdropFilter">>;
 
 export const filterMappings: Record<FilterKeys, string> = {
   filter: "filter",
   backdropFilter: "backdrop-filter",
 } as const;
-
-export const filterConverters: Partial<Record<FilterKeys, ValueConverter>> = {};
diff --git a/packages/system/src/props/flex.ts b/packages/system/src/props/flex.ts
@@ -1,13 +1,9 @@
-import { toCssUnit } from "../toCSS";
 import { FlexKeys } from "../keys";
-import { applyResponsiveStyles } from "../responsive";
 import {
   AddProperty,
   CSSProperties,
   CSSValue,
-  ResponsiveStyle,
   ThemeSystemType,
-  ValueConverter,
 } from "../types";
 
 export type FlexProps<T extends ThemeSystemType = ThemeSystemType> = Partial<
@@ -50,8 +46,3 @@ export const flexMappings: Record<FlexKeys, string> = {
   placeItems: "place-items",
   placeContent: "place-content",
 } as const;
-
-export const flexConverters: Partial<Record<FlexKeys, ValueConverter>> = {
-  gap: toCssUnit,
-  flexBasis: toCssUnit,
-};
diff --git a/packages/system/src/props/font.ts b/packages/system/src/props/font.ts
@@ -1,13 +1,5 @@
-import { toCssUnit } from "../toCSS";
 import { FontKeys } from "../keys";
-import {
-  ResponsiveStyle,
-  CSSProperties,
-  AddProperty,
-  ThemeSystemType,
-  ValueConverter,
-} from "../types";
-import { applyResponsiveStyles } from "../responsive";
+import { CSSProperties, AddProperty, ThemeSystemType } from "../types";
 
 export type FontProps<T extends ThemeSystemType = ThemeSystemType> = Partial<
   CSSProperties<"font"> &
@@ -58,7 +50,3 @@ export const fontMappings: Record<FontKeys, string> = {
   fontVariationSettings: "font-variation-settings",
   fontWeight: "font-weight",
 };
-
-export const fontConverters: Partial<Record<FontKeys, ValueConverter>> = {
-  fontSize: toCssUnit,
-};
diff --git a/packages/system/src/props/grid.ts b/packages/system/src/props/grid.ts
@@ -1,13 +1,5 @@
-import { toCssUnit } from "../toCSS";
 import { GridKeys } from "../keys";
-import { applyResponsiveStyles } from "../responsive";
-import {
-  AddProperty,
-  CSSProperties,
-  ResponsiveStyle,
-  ThemeSystemType,
-  ValueConverter,
-} from "../types";
+import { AddProperty, CSSProperties, ThemeSystemType } from "../types";
 
 const gapKeys = ["gridGap", "gridColumnGap", "gridRowGap"] as const;
 type GapKeys = (typeof gapKeys)[number];
@@ -37,9 +29,3 @@ export const gridMappings: Record<GridKeys, string> = {
   gridColumnGap: "grid-column-gap",
   gridRowGap: "grid-row-gap",
 } as const;
-
-export const gridConverters: Partial<Record<GridKeys, ValueConverter>> = {
-  gridGap: toCssUnit,
-  gridColumnGap: toCssUnit,
-  gridRowGap: toCssUnit,
-};