Help migration to v7 by suggesting tss-react.

[garronej]

Hello Mantine Developers,

With the release of version 7, Mantine has deprecated the createStyles function. This change necessitates a comprehensive rewrite of styles for migration.
However, tss-react offers a seamless transition that requires only minor modifications.
MUI also recommends it as a strategy for migrating to V5, as detailed in the MUI documentation.

As the solution's author, I am keen to submit a Pull Request to the 6.x to 7.x migration guide to propose tss-react as a possible alternative to CSS modules and offer detailed instructions for its implementation, should you be open to this suggestion.

As evidence of its effectiveness, I would like to point out the commafeed project, which successfully utilized tss-react for upgrading. The feedback from @Athou has been positive regarding this solution.

To further simplify the process, I propose adding an additional export, "tss-react/mantine", which would be pre-configured with the mantine theme, similar to the MUI configuration available via import "tss-react/mui".

import { tss } from "tss-react/mantine";

function MyComponent(){

    const { classes } = useStyles({ fooVariant: "subtle" });

    return <div class={classes.root}>...</div>;

}

const useStyles = tss
    .withParams<{ fooVariant: string; }>()
    .create(({ theme, fooVariant }) => ({
        root: {
            overflowWrap: "anywhere",
            "& a": {
                color: theme.fn.variant({ color: theme.primaryColor, variant: fooVariant }).color,
            },
            "& iframe": {
                maxWidth: "100%",
            }
        },
        other: { ... }
    }));

Please let me know if this contribution interests you.

Best regards,

[rtivital]

Sure, I do not mind adding a link to tss-react to the migration guide. You are welcome to submit a PR with the following documentation:

• A new /guides/tss page describing insulation and usage process
• A brief instruction in the migration guide that mentions /guides/tss

I haven't seen the entire implementation, but here are several notes based on 7.0 changes:

• colorScheme is managed completed different. It should not be really accessed as a js variable as it will most likely lead to hydration mismatches or result in flash of inaccurate color scheme.
• Not really sure about theme.fn.variant. The theme object does not provide these functions anymore, so if they are provided as a part of tss-react, then it is better to use functions and resolvers from @mantine/core package to handle them.
• It might be useful to include functions from @mantine/vanilla-extract package as the experience is more similar to CSS modules with functions that produce static selectors and values instead of relying on dynamic theme object.
• I am not planning to maintain these parts of documentation. Please leave a link to the tss-react issues and discussions in the guide where people can provide feedback, ask questions and report bugs.

[garronej]

Hello @rtivital,

Great, I'll work on it then.
The snippet I pasted is from the commafeed repository. I'll need to familiarize myself with Mantine.
All your points are noted; of course, I don't expect you to maintain any of this.
Regarding vanilla extract, although it indeed aligns more with Mantine v7's zero runtime approach, it's also much more constraining. The goal here is foremost to provide a near drop-in replacement for createStyles.
I'll provide an example setup for Next with SSR working and no hydration errors, but there will be some limitations, like RSC support, for example, won't be possible—they'll have to use "use client";. I'll make that very clear from the get go so pepole are aware of what ther're getting.
Regardless of Next, providing a straightforward upgrade path for all the SPAs would already be a big win. I'll come back with a PR in a few days.

The discussion can be continued here: garronej/tss-react#206