Add import mantineTheme in TSS context

[garronej]

Hello,
I just found out that commafeed was using tss-react let's go! 🥳

As I was looking how it was used I noticed that ther's no context provided. Maybe providing the Mantine theme and colorScheme would be desirable.

Like:

tss.ts

import { useMantineTheme } from "@mantine/core"
import { useColorScheme } from "hooks/useColorScheme"
import { createTss } from "tss-react"

const useContext = () => {
    const theme = useMantineTheme()
    const colorScheme = useColorScheme()
 
    return { theme, colorScheme };
}

export const { tss } = createTss({ useContext })

export const useStyles = tss.create({})

This way instead of manually passing them over to useStyles every time like:

const useStyles = tss
    .withParams<{
        theme: MantineTheme
        colorScheme: "dark" | "light"
        //...
    }>()
    .create(({ theme, colorScheme, /*...*/ }) => ({/*...*/}));

//...

    const theme = useMantineTheme()
    const colorScheme = useColorScheme()
    
    const { classes } = useStyles({
        theme,
        colorScheme,
        // ...
    })

You would be able to just write:

const useStyles = tss
    .withParams<{
        //...
    }>()
    .create(({ theme, colorScheme, /*...*/ }) => ({/*...*/}));

//...

    const { classes } = useStyles({
        // ...
    })

And have theme and colorScheme always available as arguments of the tss.create() function.

I can issue a PR if you're intrested.

[Athou]

I just found out that commafeed was using tss-react let's go! 🥳

CommaFeed was using createStyles of Mantine. When Mantine v7 dropped support for createStyles/css-in-js I needed a replacement and tss-react was perfect for the job. Thank you for this awesome tool!

As I was looking how it was used I noticed that ther's no context provided. Maybe providing the Mantine theme and colorScheme would be desirable.

I didn't realize I could call hooks in the useContext function. Neat :) theme and colorScheme are indeed good candidates as they are used by most useStyles calls.

I can issue a PR if you're intrested.

It's okay, thanks. It's a quick change, I'll do it this morning :)

[Athou]

Done in b6107c3! Thank you for the suggestion :)

[garronej]

Looks great 😃😃