refactor(66): namespace import로 변경

Author: Seojunhwan

src/components/ui/Bleed/Bleed.css.ts

@@ -5,7 +5,7 @@ export const bleedInlineEndVar = createVar();
 export const bleedBlockStartVar = createVar();
 export const bleedBlockEndVar = createVar();
 
-export const bleedStyles = style({
+export const container = style({
   marginInlineStart: `calc(${bleedInlineStartVar} * -1)`,
   marginInlineEnd: `calc(${bleedInlineEndVar} * -1)`,
   marginBlockStart: `calc(${bleedBlockStartVar} * -1)`,

src/components/ui/Bleed/Bleed.tsx

@@ -4,13 +4,7 @@ import { type ElementType } from "react";
 import { coerceCssRemValue } from "@/lib/utils/coerceCssRemValue";
 import { type PolymorphicComponentPropsWithRef } from "@/types/polymorphic.types";
 
-import {
-  bleedBlockEndVar,
-  bleedBlockStartVar,
-  bleedInlineEndVar,
-  bleedInlineStartVar,
-  bleedStyles,
-} from "./Bleed.css";
+import * as styles from "./Bleed.css";
 
 export type BleedProps<T extends ElementType> =
   PolymorphicComponentPropsWithRef<
@@ -43,27 +37,31 @@ export const Bleed = <T extends ElementType = "div">({
     ...styleFromProps,
     ...assignInlineVars({
       ...(inline && {
-        [bleedInlineStartVar]: coerceCssRemValue(inline),
-        [bleedInlineEndVar]: coerceCssRemValue(inline),
+        [styles.bleedInlineStartVar]: coerceCssRemValue(inline),
+        [styles.bleedInlineEndVar]: coerceCssRemValue(inline),
       }),
       ...(block && {
-        [bleedBlockStartVar]: coerceCssRemValue(block),
-        [bleedBlockEndVar]: coerceCssRemValue(block),
+        [styles.bleedBlockStartVar]: coerceCssRemValue(block),
+        [styles.bleedBlockEndVar]: coerceCssRemValue(block),
       }),
       ...(inlineStart && {
-        [bleedInlineStartVar]: coerceCssRemValue(inlineStart),
+        [styles.bleedInlineStartVar]: coerceCssRemValue(inlineStart),
+      }),
+      ...(inlineEnd && {
+        [styles.bleedInlineEndVar]: coerceCssRemValue(inlineEnd),
       }),
-      ...(inlineEnd && { [bleedInlineEndVar]: coerceCssRemValue(inlineEnd) }),
       ...(blockStart && {
-        [bleedBlockStartVar]: coerceCssRemValue(blockStart),
+        [styles.bleedBlockStartVar]: coerceCssRemValue(blockStart),
+      }),
+      ...(blockEnd && {
+        [styles.bleedBlockEndVar]: coerceCssRemValue(blockEnd),
       }),
-      ...(blockEnd && { [bleedBlockEndVar]: coerceCssRemValue(blockEnd) }),
     }),
   };
 
   return (
     <Component
-      className={`${bleedStyles} ${className ?? ""}`.trim()}
+      className={`${styles.container} ${className ?? ""}`.trim()}
       style={style}
       {...props}
     />

src/components/ui/Stack/Stack.css.ts

@@ -3,7 +3,7 @@ import { recipe, type RecipeVariants } from "@vanilla-extract/recipes";
 
 export const stackGapVar = createVar();
 
-export const stackStyles = recipe({
+export const container = recipe({
   base: {
     display: "flex",
     gap: stackGapVar,
@@ -62,4 +62,4 @@ export const stackStyles = recipe({
   },
 });
 
-export type StackVariants = RecipeVariants<typeof stackStyles>;
+export type StackVariants = RecipeVariants<typeof container>;

src/components/ui/Stack/Stack.tsx

@@ -4,12 +4,12 @@ import { type ElementType } from "react";
 import { coerceCssRemValue } from "@/lib/utils/coerceCssRemValue";
 import { type PolymorphicComponentPropsWithRef } from "@/types/polymorphic.types";
 
-import { stackGapVar, stackStyles, type StackVariants } from "./Stack.css";
+import * as styles from "./Stack.css";
 
 export type StackProps<T extends ElementType> =
   PolymorphicComponentPropsWithRef<
     T,
-    StackVariants & {
+    styles.StackVariants & {
       gap?: number | string;
     }
   >;
@@ -42,14 +42,14 @@ export const Stack = <T extends ElementType = "div">({
   const style = {
     ...styleFromProps,
     ...assignInlineVars({
-      [stackGapVar]: gap ? coerceCssRemValue(gap) : undefined,
+      [styles.stackGapVar]: gap ? coerceCssRemValue(gap) : undefined,
     }),
   };
 
   return (
     <Component
       ref={ref}
-      className={`${stackStyles({
+      className={`${styles.container({
         direction,
         justify,
         align,

src/components/ui/Text/Text.css.ts

@@ -5,7 +5,7 @@ export const lineHeightVar = createVar();
 export const letterSpacingVar = createVar();
 export const colorVar = createVar();
 
-export const textStyles = style({
+export const container = style({
   color: colorVar,
   fontSize: fontSizeVar,
   lineHeight: lineHeightVar,

src/components/ui/Text/Text.tsx

@@ -4,13 +4,7 @@ import { type ElementType } from "react";
 import { colors, semantic, typography } from "@/styles";
 import { type PolymorphicComponentPropsWithRef } from "@/types/polymorphic.types";
 
-import {
-  colorVar,
-  fontSizeVar,
-  letterSpacingVar,
-  lineHeightVar,
-  textStyles,
-} from "./Text.css";
+import * as styles from "./Text.css";
 
 type DotNestedKeys<T> = (
   T extends object
@@ -93,16 +87,16 @@ export const Text = <T extends ElementType = "p">({
   const style = {
     ...styleFromProps,
     ...assignInlineVars({
-      [fontSizeVar]: typography[typo]?.fontSize,
-      [lineHeightVar]: typography[typo]?.lineHeight,
-      [letterSpacingVar]: typography[typo]?.letterSpacing,
-      [colorVar]: color ? resolveColor(color) : undefined,
+      [styles.fontSizeVar]: typography[typo]?.fontSize,
+      [styles.lineHeightVar]: typography[typo]?.lineHeight,
+      [styles.letterSpacingVar]: typography[typo]?.letterSpacing,
+      [styles.colorVar]: color ? resolveColor(color) : undefined,
     }),
   };
 
   return (
     <Component
-      className={`${textStyles} ${className ?? ""}`.trim()}
+      className={`${styles.container} ${className ?? ""}`.trim()}
       style={style}
       ref={ref}
       {...rest}