Fix selector typing

Author: owjs3901

packages/react/package.json

@@ -19,7 +19,7 @@
   "version": "1.0.12",
   "type": "module",
   "scripts": {
-    "lint": "eslint",
+    "lint": "eslint && tsc --noEmit",
     "build": "tsc && vite build"
   },
   "publishConfig": {

packages/react/src/types/props/__tests__/index.test-d.ts

@@ -1,4 +1,8 @@
-import type { DevupCommonProps, DevupComponentProps } from '..'
+import { Property } from 'csstype'
+
+import type { ResponsiveValue } from '../../responsive-value'
+import type { DevupCommonProps, DevupComponentProps, DevupProps } from '..'
+import type { Selectors } from '../selector'
 
 describe('index', () => {
   it('DevupCommonProps', () => {
@@ -8,6 +12,16 @@ describe('index', () => {
     })
   })
 
+  it('DevupProps', () => {
+    expectTypeOf<DevupProps>()
+      .toHaveProperty('bg')
+      .toEqualTypeOf<ResponsiveValue<Property.Background>>()
+  })
+
+  it('Selectors', () => {
+    expectTypeOf<Selectors>().toHaveProperty('&:hover')
+  })
+
   it('DevupCommonProps _selector', () => {
     assertType<DevupComponentProps<'div'>>({
       _hover: {

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

@@ -13,7 +13,7 @@ type CamelCase<S extends string> =
 
 type PascalCase<S extends string> = Capitalize<CamelCase<S>>
 
-type SelectorProps = ResponsiveValue<DevupProps | string | false>
+export type SelectorProps<T = DevupProps> = ResponsiveValue<T | string | false>
 export type DevupThemeSelectorProps = keyof DevupTheme extends undefined
   ? Record<`_theme${string}`, SelectorProps>
   : {
@@ -24,22 +24,29 @@ type NormalSelector = Exclude<
   Pseudos,
   `:-${string}` | `::-${string}` | `${string}()`
 >
-type ExtractSelector<T> = T extends `::${infer R}`
+type ExtractSelector<T = NormalSelector> = T extends `::${infer R}`
   ? R
   : T extends `:${infer R}`
     ? R
     : never
 export type CommonSelectorProps = {
-  [K in ExtractSelector<NormalSelector> as
+  [K in ExtractSelector as
     | `_${CamelCase<K>}`
     | `_group${PascalCase<K>}`]?: SelectorProps
 }
 
+export type Selectors = Partial<
+  Record<
+    (string & {}) | `&${NormalSelector}` | `_${CamelCase<ExtractSelector>}`,
+    SelectorProps
+  >
+>
+
 export interface DevupSelectorProps extends CommonSelectorProps {
   // media query
   _print?: SelectorProps
 
-  selectors?: Record<string, SelectorProps>
+  selectors?: Selectors
 
   styleOrder?: number
 }

packages/react/src/utils/__tests__/css.test.ts

@@ -6,6 +6,12 @@ describe('css', () => {
     expect(() => css('class name' as any)).toThrowError(
       'Cannot run on the runtime',
     )
-    expect(() => css()).toThrowError('Cannot run on the runtime')
+    expect(() =>
+      css({
+        selectors: {
+          '&::after': {},
+        },
+      }),
+    ).toThrowError('Cannot run on the runtime')
   })
 })