fix: resolve type errors with children prop and component composition

Author: Jeong-jj

examples/react-babel/src/App.tsx

@@ -1,13 +1,8 @@
 import { styled } from "@mincho-js/react";
 
-const BaseComponent = styled("div", {
+const Container = styled("div", {
   base: {
     fontWeight: "bold",
-  },
-});
-
-const Container = styled(BaseComponent, {
-  base: {
     backgroundColor: "red",
     padding: "20px",
     margin: "20px",
@@ -36,15 +31,15 @@ const Container = styled(BaseComponent, {
       },
     },
   },
-  compoundVariants: [
+  compoundVariants: ({ size, color }) => [
     {
-      variants: { size: "small", color: "blue" },
+      condition: [size.small, color.blue],
       style: {
         color: "green",
       },
     },
     {
-      variants: { size: "large", color: "blue" },
+      condition: [size.large, color.blue],
       style: {
         color: "yellow",
       },

packages/react/src/index.ts

@@ -23,15 +23,82 @@ export { $$styled } from "./runtime.js";
 
 type KeyofIntrinsicElements = keyof JSX.IntrinsicElements;
 
+// == Helpers (moved up for forward reference) =================================
+export type DefaultPropsType = Record<never, never>;
+export interface WithAsProp<AsComponent extends ElementType> {
+  as?: AsComponent;
+}
+
+export type ComponentPropWithAs<
+  Component extends ElementType,
+  AsComponent extends ElementType,
+  Props extends object
+> = Omit<ComponentProps<Component>, keyof Props> &
+  Omit<ComponentProps<AsComponent>, keyof Props> &
+  WithAsProp<AsComponent> &
+  Props;
+
+export interface ComponentWithAs<
+  Props = DefaultPropsType,
+  Component extends ElementType = ElementType
+> {
+  <AsComponent extends ElementType = Component>(
+    props: ComponentPropWithAs<Component, AsComponent, Props & object>
+  ): ReactNode;
+
+  propTypes?: unknown;
+  displayName?: string;
+  readonly $$typeof: symbol;
+}
+
+export type PatternOptionsToProps<
+  Variants extends VariantGroups | undefined = undefined,
+  ToggleVariants extends VariantDefinitions | undefined = undefined,
+  Props extends ComplexPropDefinitions<PropTarget> | undefined = undefined
+> = ResolveComplex<
+  NonNever<
+    VariantObjectSelection<ConditionalVariants<Variants, ToggleVariants>>
+  > &
+    NonNever<PropDefinitionOutput<Exclude<Props, undefined>>>
+>;
+type NonNever<T> = [T] extends [never] ? unknown : T;
+
+type MergedProps<
+  TProps,
+  Variants extends VariantGroups | undefined,
+  ToggleVariants extends VariantDefinitions | undefined,
+  Props extends ComplexPropDefinitions<PropTarget> | undefined
+> = TProps &
+  RefAttributes<unknown> &
+  PatternOptionsToProps<Variants, ToggleVariants, Props>;
+
+export type StyledComponent<
+  TProps = Record<string, unknown>,
+  Component extends ElementType = ElementType,
+  Variants extends VariantGroups | undefined = undefined,
+  ToggleVariants extends VariantDefinitions | undefined = undefined,
+  Props extends ComplexPropDefinitions<PropTarget> | undefined = undefined
+> = ComponentWithAs<
+  MergedProps<TProps, Variants, ToggleVariants, Props>,
+  Component
+> &
+  ForwardRefExoticComponent<
+    MergedProps<TProps, Variants, ToggleVariants, Props>
+  >;
+
+type IntrinsicProps<TComponent> = TComponent extends KeyofIntrinsicElements
+  ? JSX.IntrinsicElements[TComponent]
+  : never;
+
 // == Main =====================================================================
 export function styled<
   Props,
-  Component extends ForwardRefExoticComponent<Props>,
+  Component extends ElementType,
   RulesVariants extends VariantGroups | undefined = undefined,
   RulesToggleVariants extends VariantDefinitions | undefined = undefined,
   RulesProps extends ComplexPropDefinitions<PropTarget> | undefined = undefined
 >(
-  component: Component,
+  component: ComponentWithAs<Props, Component>,
   options: PatternOptions<RulesVariants, RulesToggleVariants, RulesProps>
 ): StyledComponent<
   Props,
@@ -43,7 +110,7 @@ export function styled<
 
 export function styled<
   Props,
-  Component extends ComponentType<Props>,
+  Component extends ForwardRefExoticComponent<Props>,
   RulesVariants extends VariantGroups | undefined = undefined,
   RulesToggleVariants extends VariantDefinitions | undefined = undefined,
   RulesProps extends ComplexPropDefinitions<PropTarget> | undefined = undefined
@@ -59,17 +126,17 @@ export function styled<
 >;
 
 export function styled<
-  Props extends object,
-  Component extends ElementType,
+  Props,
+  Component extends ComponentType<Props> | ForwardRefExoticComponent<Props>,
   RulesVariants extends VariantGroups | undefined = undefined,
   RulesToggleVariants extends VariantDefinitions | undefined = undefined,
   RulesProps extends ComplexPropDefinitions<PropTarget> | undefined = undefined
 >(
-  component: ComponentWithAs<Props, Component>,
+  component: Component,
   options: PatternOptions<RulesVariants, RulesToggleVariants, RulesProps>
 ): StyledComponent<
   Props,
-  Component,
+  Component extends ElementType ? Component : ElementType,
   RulesVariants,
   RulesToggleVariants,
   RulesProps
@@ -91,114 +158,21 @@ export function styled<
   RulesProps
 >;
 
-export function styled<
-  Component extends
-    | ForwardRefExoticComponent<unknown>
-    | ComponentType<unknown>
-    | KeyofIntrinsicElements
-    | ComponentWithAs<object, ElementType>,
-  RulesVariants extends VariantGroups | undefined = undefined,
-  RulesToggleVariants extends VariantDefinitions | undefined = undefined,
-  RulesProps extends ComplexPropDefinitions<PropTarget> | undefined = undefined
->(
-  _component: Component,
-  _options: PatternOptions<RulesVariants, RulesToggleVariants, RulesProps>
+export function styled(
+  _component: unknown,
+  _options: PatternOptions<
+    VariantGroups | undefined,
+    VariantDefinitions | undefined,
+    ComplexPropDefinitions<PropTarget> | undefined
+  >
 ): StyledComponent<
-  InferStyledComponentProps<Component>,
-  InferStyledComponentElement<Component>,
-  RulesVariants,
-  RulesToggleVariants,
-  RulesProps
+  unknown,
+  ElementType,
+  VariantGroups | undefined,
+  VariantDefinitions | undefined,
+  ComplexPropDefinitions<PropTarget> | undefined
 > {
   throw new Error(
     "This function shouldn't be there in your final code. If you're seeing this, there is probably some issue with your build config."
   );
 }
-
-type IntrinsicProps<TComponent> = TComponent extends KeyofIntrinsicElements
-  ? JSX.IntrinsicElements[TComponent]
-  : never;
-
-type InferStyledComponentProps<Component> =
-  Component extends KeyofIntrinsicElements
-    ? IntrinsicProps<Component>
-    : Component extends ComponentType<infer ComponentTypeProps>
-      ? ComponentTypeProps
-      : Component extends ForwardRefExoticComponent<infer ForwardRefProps>
-        ? ForwardRefProps
-        : Component extends ComponentWithAs<infer WithAsProps, ElementType>
-          ? WithAsProps
-          : never;
-
-type InferStyledComponentElement<Component> =
-  Component extends KeyofIntrinsicElements
-    ? Component
-    : Component extends ElementType
-      ? Component
-      : Component extends ComponentWithAs<infer _WithAsProps, infer AsComponent>
-        ? AsComponent
-        : never;
-
-// == Helpers ==================================================================
-export type StyledComponent<
-  TProps = Record<string, unknown>,
-  Component extends ElementType = ElementType,
-  Variants extends VariantGroups | undefined = undefined,
-  ToggleVariants extends VariantDefinitions | undefined = undefined,
-  Props extends ComplexPropDefinitions<PropTarget> | undefined = undefined
-> = ComponentWithAs<
-  TProps &
-    RefAttributes<unknown> &
-    PatternOptionsToProps<Variants, ToggleVariants, Props>,
-  Component
->;
-
-export type PatternOptionsToProps<
-  Variants extends VariantGroups | undefined = undefined,
-  ToggleVariants extends VariantDefinitions | undefined = undefined,
-  Props extends ComplexPropDefinitions<PropTarget> | undefined = undefined
-> = ResolveComplex<
-  NonNever<
-    VariantObjectSelection<ConditionalVariants<Variants, ToggleVariants>>
-  > &
-    NonNever<PropDefinitionOutput<Exclude<Props, undefined>>>
->;
-type NonNever<T> = [T] extends [never] ? unknown : T;
-
-export type DefaultPropsType = Record<never, never>;
-export interface WithAsProp<AsComponent extends ElementType> {
-  as?: AsComponent;
-}
-
-export type ComponentPropWithAs<
-  Component extends ElementType,
-  AsComponent extends ElementType,
-  Props extends object
-> = Omit<ComponentProps<Component>, keyof Props> &
-  Omit<ComponentProps<AsComponent>, keyof Props> &
-  WithAsProp<AsComponent> &
-  Props;
-
-export interface ComponentWithAs<
-  Props extends object = DefaultPropsType,
-  Component extends ElementType = ElementType
-> {
-  <AsComponent extends ElementType = Component>(
-    props: ComponentPropWithAs<Component, AsComponent, Props>
-  ): ReactNode;
-
-  /**
-   * Ignored by React.
-   * @deprecated Only kept in types for backwards compatibility. Will be removed in a future major release.
-   */
-  propTypes?: unknown;
-  /**
-   * Used in debugging messages. You might want to set it
-   * explicitly if you want to display a different name for
-   * debugging purposes.
-   *
-   * @see {@link https://legacy.reactjs.org/docs/react-component.html#displayname Legacy React Docs}
-   */
-  displayName?: string;
-  readonly $$typeof: symbol;
-}