Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
91 changes: 67 additions & 24 deletions packages/theme/src/UIHelper/makeStyles.ts
Original file line number Diff line number Diff line change
@@ -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>
}
3 changes: 1 addition & 2 deletions tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -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": []
}
Loading