Optimize typing

Author: owjs3901

packages/react/src/types/props/index.ts

@@ -31,13 +31,14 @@ export type DevupCommonProps = Merge<
   DevupShortcutsProps
 >
 
-export interface DevupProps
-  extends DevupCommonProps,
-    DevupSelectorProps,
+export interface DevupProps extends DevupCommonProps, DevupSelectorProps {}
+
+export interface DevupPropsWithTheme
+  extends DevupProps,
     DevupThemeSelectorProps {}
 
 export interface DevupComponentProps<T extends React.ElementType>
-  extends DevupProps {
+  extends DevupPropsWithTheme {
   as?: T
   styleVars?: Record<string, string | undefined>
 }

packages/react/src/types/props/selector/index.ts

@@ -2,7 +2,7 @@ import type { Pseudos } from 'csstype'
 
 import type { ResponsiveValue } from '../../responsive-value'
 import type { DevupTheme } from '../../theme'
-import type { DevupCommonProps } from '../index'
+import type { DevupProps } from '../index'
 
 type CamelCase<S extends string> =
   S extends Lowercase<S>
@@ -13,18 +13,13 @@ type CamelCase<S extends string> =
 
 type PascalCase<S extends string> = Capitalize<CamelCase<S>>
 
+type SelectorProps = ResponsiveValue<DevupProps | string | false>
 export type DevupThemeSelectorProps = keyof DevupTheme extends undefined
-  ? Record<`_theme${string}`, DevupCommonProps & DevupSelectorProps>
+  ? Record<`_theme${string}`, SelectorProps>
   : {
-      [K in keyof DevupTheme as `_theme${PascalCase<K>}`]?: DevupCommonProps &
-        DevupSelectorProps
+      [K in keyof DevupTheme as `_theme${PascalCase<K>}`]?: SelectorProps
     }
 
-type SelectorProps = ResponsiveValue<
-  | (DevupCommonProps & DevupSelectorProps & DevupThemeSelectorProps)
-  | string
-  | false
->
 type NormalSelector = Exclude<
   Pseudos,
   `:-${string}` | `::-${string}` | `${string}()`

packages/react/src/utils/css.ts

@@ -1,12 +1,12 @@
-import type { DevupProps } from '../types/props'
+import type { DevupPropsWithTheme } from '../types/props'
 
-export function css(props: DevupProps): string
+export function css(props: DevupPropsWithTheme): string
 export function css(strings: TemplateStringsArray): string
 export function css(): string
 
 export function css(
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  strings?: TemplateStringsArray | DevupProps,
+  strings?: TemplateStringsArray | DevupPropsWithTheme,
 ): string {
   throw new Error('Cannot run on the runtime')
 }