Bug: Type mismatch error in ThemeSwitch Component

[Istiopaxx]

Type mismatch error

I can't commit my works at all.. because of type error, pre-commit hook rejects. how can i fix this?

1. File: /src/components/ThemeSwitch/styles.ts
2. Error : Thumb, Shadow
3. Screenshot
4. error log

   Argument of type '{ [x: string]: string | { transform: "translate(1.75rem, -50%)"; }; position: "absolute"; top: "50%"; width: "1.25rem"; height: "1.25rem"; borderRadius: "50%"; backgroundColor: "$yellow"; transform: "translate(0.5rem, -50%)"; transition: "transform $switchTransitionDuration $transitionTiming"; webkitTapHighlightColo...' is not assignable to parameter of type '(({ alignContent?: AlignContentProperty | undefined; alignItems?: AlignItemsProperty | undefined; alignSelf?: AlignSelfProperty | undefined; ... 464 more ...; vectorEffect?: VectorEffectProperty | undefined; } & { ...; } & {} & { ...; }) | Record<...>) & { ...; } & { ...; } & { ...; }'.
   Type '{ [x: string]: string | { transform: "translate(1.75rem, -50%)"; }; position: "absolute"; top: "50%"; width: "1.25rem"; height: "1.25rem"; borderRadius: "50%"; backgroundColor: "$yellow"; transform: "translate(0.5rem, -50%)"; transition: "transform $switchTransitionDuration $transitionTiming"; webkitTapHighlightColo...' is not assignable to type 'Record<string, InternalCSS<TMedias & { initial: ""; }, { colors: { gray100: string; gray200: string; gray300: string; gray400: string; gray500: string; gray600: string; gray700: string; white: string; ... 23 more ...; themeSwitchBackground: string; }; sizes: { ...; }; shadows: { ...; }; transitions: { ...; }; }, {},...'.
   Type '{ [x: string]: string | { transform: "translate(1.75rem, -50%)"; }; position: "absolute"; top: "50%"; width: "1.25rem"; height: "1.25rem"; borderRadius: "50%"; backgroundColor: "$yellow"; transform: "translate(0.5rem, -50%)"; transition: "transform $switchTransitionDuration $transitionTiming"; webkitTapHighlightColo...' is not assignable to type 'Record<string, InternalCSS<TMedias & { initial: ""; }, { colors: { gray100: string; gray200: string; gray300: string; gray400: string; gray500: string; gray600: string; gray700: string; white: string; ... 23 more ...; themeSwitchBackground: string; }; sizes: { ...; }; shadows: { ...; }; transitions: { ...; }; }, {},...'.
     'string' index signatures are incompatible.
       Type 'string | { transform: "translate(1.75rem, -50%)"; }' is not assignable to type 'InternalCSS<TMedias & { initial: ""; }, { colors: { gray100: string; gray200: string; gray300: string; gray400: string; gray500: string; gray600: string; gray700: string; white: string; black: string; ... 22 more ...; themeSwitchBackground: string; }; sizes: { ...; }; shadows: { ...; }; transitions: { ...; }; }, {},...'.
         Type 'string' is not assignable to type 'InternalCSS<TMedias & { initial: ""; }, { colors: { gray100: string; gray200: string; gray300: string; gray400: string; gray500: string; gray600: string; gray700: string; white: string; black: string; ... 22 more ...; themeSwitchBackground: string; }; sizes: { ...; }; shadows: { ...; }; transitions: { ...; }; }, {},...'.
           Type 'string' is not assignable to type '{ [x: `@${string}`]: ({ alignContent?: AlignContentProperty | undefined; alignItems?: AlignItemsProperty | undefined; alignSelf?: AlignSelfProperty | undefined; ... 464 more ...; vectorEffect?: VectorEffectProperty | undefined; } & ... & {} & { ...; }) | undefined; }'.

   Argument of type '{ [x: string]: "absolute" | "$themeSwitchBackground" | "50%" | "1.25rem" | "transform $switchTransitionDuration $transitionTiming" | "translate(0, -100%) scale(0)" | { transform: "translate(1.35rem, -70%) scale(1)"; }; ... 7 more ...; transition: "transform $switchTransitionDuration $transitionTiming"; }' is not assignable to parameter of type '(({ alignContent?: AlignContentProperty | undefined; alignItems?: AlignItemsProperty | undefined; alignSelf?: AlignSelfProperty | undefined; ... 464 more ...; vectorEffect?: VectorEffectProperty | undefined; } & { ...; } & {} & { ...; }) | Record<...>) & { ...; } & { ...; } & { ...; }'.
   Type '{ [x: string]: "absolute" | "$themeSwitchBackground" | "50%" | "1.25rem" | "transform $switchTransitionDuration $transitionTiming" | "translate(0, -100%) scale(0)" | { transform: "translate(1.35rem, -70%) scale(1)"; }; ... 7 more ...; transition: "transform $switchTransitionDuration $transitionTiming"; }' is not assignable to type 'Record<string, InternalCSS<TMedias & { initial: ""; }, { colors: { gray100: string; gray200: string; gray300: string; gray400: string; gray500: string; gray600: string; gray700: string; white: string; ... 23 more ...; themeSwitchBackground: string; }; sizes: { ...; }; shadows: { ...; }; transitions: { ...; }; }, {},...'.
   Type '{ [x: string]: "absolute" | "$themeSwitchBackground" | "50%" | "1.25rem" | "transform $switchTransitionDuration $transitionTiming" | "translate(0, -100%) scale(0)" | { transform: "translate(1.35rem, -70%) scale(1)"; }; ... 7 more ...; transition: "transform $switchTransitionDuration $transitionTiming"; }' is not assignable to type 'Record<string, InternalCSS<TMedias & { initial: ""; }, { colors: { gray100: string; gray200: string; gray300: string; gray400: string; gray500: string; gray600: string; gray700: string; white: string; ... 23 more ...; themeSwitchBackground: string; }; sizes: { ...; }; shadows: { ...; }; transitions: { ...; }; }, {},...'.
     'string' index signatures are incompatible.
       Type '"absolute" | "$themeSwitchBackground" | "50%" | "1.25rem" | "transform $switchTransitionDuration $transitionTiming" | "translate(0, -100%) scale(0)" | { transform: "translate(1.35rem, -70%) scale(1)"; }' is not assignable to type 'InternalCSS<TMedias & { initial: ""; }, { colors: { gray100: string; gray200: string; gray300: string; gray400: string; gray500: string; gray600: string; gray700: string; white: string; black: string; ... 22 more ...; themeSwitchBackground: string; }; sizes: { ...; }; shadows: { ...; }; transitions: { ...; }; }, {},...'.
         Type 'string' is not assignable to type 'InternalCSS<TMedias & { initial: ""; }, { colors: { gray100: string; gray200: string; gray300: string; gray400: string; gray500: string; gray600: string; gray700: string; white: string; black: string; ... 22 more ...; themeSwitchBackground: string; }; sizes: { ...; }; shadows: { ...; }; transitions: { ...; }; }, {},...'.
           Type 'string' is not assignable to type '{ [x: `@${string}`]: ({ alignContent?: AlignContentProperty | undefined; alignItems?: AlignItemsProperty | undefined; alignSelf?: AlignSelfProperty | undefined; ... 464 more ...; vectorEffect?: VectorEffectProperty | undefined; } & ... & {} & { ...; }) | undefined; }'.

5. environment
   • Window 10
   • Node v16.11.1
   • Tsc Version 4.5.4

[blurfx]

I updated the stitches and it seems to have been fixed. See bd543fc