diff --git a/packages/theme/src/UIHelper/makeStyles.ts b/packages/theme/src/UIHelper/makeStyles.ts index d200c85c675c..77b8349eeaaf 100644 --- a/packages/theme/src/UIHelper/makeStyles.ts +++ b/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?: { - name?: string | Record - uniqId?: string - }) => ( - cssObjectByRuleNameOrGetCssObjectByRuleName: - | Record - | (( - theme: Theme, - params: Params, - classes: Record, - ) => Record), - ) => ( +const { makeStyles: baseMakeStyles } = createMakeStyles({ useTheme }) + +type MakeStylesOptions = { + name?: string | Record + uniqId?: string +} + +type StyleRules = Record +// ^ conceal the complaint like `position: string` not satisfy `position: CSSProperties['position']` + +type NestedSelectorClasses = Record< + RuleNameSubsetReferencedInNestedSelectors, + string +> + +type StyleOverrides = { + classes?: { [key in string]?: string | undefined } +} + +type EmptyStyleOverrides = { + classes?: Record +} + +type StyleClassNames = { + [Key in keyof Styles]: string +} + +type ExtraClassKeys = + Overrides extends { classes?: infer Classes } ? Extract, string> : never + +type OverrideClassNames = + string extends ExtraKeys ? Record + : { [Key in Exclude]: string } + +type MakeStylesResult = { + classes: StyleClassNames & OverrideClassNames, keyof Styles> + theme: Theme + css: Css + cx: Cx +} + +type GetCssObjectByRuleName = ( + theme: Theme, + params: Params, + classes: NestedSelectorClasses, +) => StyleRules + +export interface UseStyles { + (params: Params): MakeStylesResult + ( params: Params, - styleOverrides?: { - props: StyleOverrides + styleOverrides: { + props: Overrides ownerState?: Record }, - ) => { - classes: StyleOverrides extends { classes?: { [key in infer ExtraKeys]?: string | undefined } } ? - Record - : Record - theme: Theme - css: Css - cx: Cx - } + ): MakeStylesResult +} + +interface MakeStylesHook { + (cssObjectByRuleName: Styles): UseStyles + >( + getCssObjectByRuleName: T, + ): UseStyles> +} + +// Note: type refinement, see https://github.com/garronej/tss-react/issues/128 +export function makeStyles( + params?: MakeStylesOptions, +): MakeStylesHook { + return baseMakeStyles(params) as unknown as MakeStylesHook } diff --git a/tsconfig.json b/tsconfig.json index d17af1e3d068..cafeddb4eee6 100644 --- a/tsconfig.json +++ b/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": [] }