refactor: make gotoDefinition for classes possible without plugin (#12372)

* refactor: make gotoDefinition for classes possible without plugin

* fix: preserve makeStyles callback typing

Author: swkatmask

packages/theme/src/UIHelper/makeStyles.ts

@@ -1,31 +1,74 @@
 import { createMakeStyles, type CSSObject, type Css, type Cx } from 'tss-react'
 import { useTheme, type Theme } from '@mui/material'
 
-// Note: type refinement, see https://github.com/garronej/tss-react/issues/128
-export const { makeStyles } = createMakeStyles({ useTheme }) as any as {
-    makeStyles: <Params = void, RuleNameSubsetReferencedInNestedSelectors extends string = never>(params?: {
-        name?: string | Record<string, unknown>
-        uniqId?: string
-    }) => <RuleName extends string>(
-        cssObjectByRuleNameOrGetCssObjectByRuleName:
-            | Record<RuleName, CSSObject>
-            | ((
-                  theme: Theme,
-                  params: Params,
-                  classes: Record<RuleNameSubsetReferencedInNestedSelectors, string>,
-              ) => Record<RuleNameSubsetReferencedInNestedSelectors | RuleName, CSSObject>),
-    ) => <StyleOverrides extends { classes?: { [key in string]?: string | undefined } }>(
+const { makeStyles: baseMakeStyles } = createMakeStyles({ useTheme })
+
+type MakeStylesOptions = {
+    name?: string | Record<string, unknown>
+    uniqId?: string
+}
+
+type StyleRules = Record<string, CSSObject | { [key: string]: unknown }>
+//                                           ^ conceal the complaint like `position: string` not satisfy `position: CSSProperties['position']`
+
+type NestedSelectorClasses<RuleNameSubsetReferencedInNestedSelectors extends string> = Record<
+    RuleNameSubsetReferencedInNestedSelectors,
+    string
+>
+
+type StyleOverrides = {
+    classes?: { [key in string]?: string | undefined }
+}
+
+type EmptyStyleOverrides = {
+    classes?: Record<never, never>
+}
+
+type StyleClassNames<Styles extends StyleRules> = {
+    [Key in keyof Styles]: string
+}
+
+type ExtraClassKeys<Overrides extends StyleOverrides> =
+    Overrides extends { classes?: infer Classes } ? Extract<keyof NonNullable<Classes>, string> : never
+
+type OverrideClassNames<ExtraKeys extends string, BaseKeys extends PropertyKey> =
+    string extends ExtraKeys ? Record<string, string>
+    : { [Key in Exclude<ExtraKeys, BaseKeys>]: string }
+
+type MakeStylesResult<Styles extends StyleRules, Overrides extends StyleOverrides> = {
+    classes: StyleClassNames<Styles> & OverrideClassNames<ExtraClassKeys<Overrides>, keyof Styles>
+    theme: Theme
+    css: Css
+    cx: Cx
+}
+
+type GetCssObjectByRuleName<Params, RuleNameSubsetReferencedInNestedSelectors extends string> = (
+    theme: Theme,
+    params: Params,
+    classes: NestedSelectorClasses<RuleNameSubsetReferencedInNestedSelectors>,
+) => StyleRules
+
+export interface UseStyles<Params, Styles extends StyleRules> {
+    (params: Params): MakeStylesResult<Styles, EmptyStyleOverrides>
+    <Overrides extends StyleOverrides>(
         params: Params,
-        styleOverrides?: {
-            props: StyleOverrides
+        styleOverrides: {
+            props: Overrides
             ownerState?: Record<string, unknown>
         },
-    ) => {
-        classes: StyleOverrides extends { classes?: { [key in infer ExtraKeys]?: string | undefined } } ?
-            Record<string extends ExtraKeys ? RuleName : ExtraKeys | RuleName, string>
-        :   Record<RuleName, string>
-        theme: Theme
-        css: Css
-        cx: Cx
-    }
+    ): MakeStylesResult<Styles, Overrides>
+}
+
+interface MakeStylesHook<Params, RuleNameSubsetReferencedInNestedSelectors extends string> {
+    <Styles extends StyleRules>(cssObjectByRuleName: Styles): UseStyles<Params, Styles>
+    <T extends GetCssObjectByRuleName<Params, RuleNameSubsetReferencedInNestedSelectors>>(
+        getCssObjectByRuleName: T,
+    ): UseStyles<Params, ReturnType<T>>
+}
+
+// Note: type refinement, see https://github.com/garronej/tss-react/issues/128
+export function makeStyles<Params = void, RuleNameSubsetReferencedInNestedSelectors extends string = never>(
+    params?: MakeStylesOptions,
+): MakeStylesHook<Params, RuleNameSubsetReferencedInNestedSelectors> {
+    return baseMakeStyles(params) as unknown as MakeStylesHook<Params, RuleNameSubsetReferencedInNestedSelectors>
 }

tsconfig.json

@@ -141,8 +141,7 @@
       // @masknet/scripts: insert-here 3
       "@masknet/plugin-switch-logo": ["./packages/plugins/SwitchLogo/src/index.ts"],
       "@masknet/plugin-calendar": ["./packages/plugins/Calendar/src/index.ts"]
-    },
-    "plugins": [{ "name": "@masknet/typescript-plugin" }]
+    }
   },
   "files": []
 }