Detecting unused classes with eslint

[hoangbn]

There is a package to detect unused styles with @mui/styles: https://github.com/jens-ox/eslint-plugin-material-ui-unused-classes. Can we have one adjusted to tss-react?

Also, unrelated question: does GlobalStyles in this package differ from one exported from @mui/material?

[garronej]

Hi @hoangbn,
I will have a look to see if the eslint plugin can be easily adapted.

The GlobalStyle exposed by tss-react is a wrapper around the one of @emotion/react

[garronej]

There is a package to detect unused styles with @mui/styles: https://github.com/jens-ox/eslint-plugin-material-ui-unused-classes. Can we have one adjusted to tss-react?

This is actually a good idea. I put in in my roadmap.

Also, unrelated question: does GlobalStyles in this package differ from one exported from @mui/material?

I forget to link the doc: https://github.com/garronej/tss-react/blob/main/README.md#globalstyles-

[hoangbn]

Is there any reason I would use this GlobalStyles as opposed to one exported from @mui/material? Their version is also a wrapper around one in @emotion/react, but they do some additional things.

[garronej]

Honestly, I don't know. I do know

[Morriz]

Honestly, I don't know.

I wonder who would know? It would be beneficial not to export constructs unneededly (yagni).

[garronej]

tss-react is not a plugin for MUI. It is a styling solution that is compatible with MUI.
It is important that tss-react provide a way to define global style.

With the <GlobalStyles/> from MUI unlike with the <GlobalStyles/> from tss-react you can either pass a CSS object or a function that receive the theme and return a CSSObject like:

import GlobalStyles from "@mui/material/GlobalStyles";

const node = (
    <GlobalStyle
        styles={theme=> ({
             "body": { "backgroundColor": theme.palette.... }    
        })}
    />
);

I plan to update tss-react to make it work the same way.
I don't see what it brings to the table, we can simply do:

import { GlobalStyles } from "tss-react";
import { useStyles } from "tss-react/mui";

function MyComponent() {

    const { theme } = useStyles();

    return (
        <>
            <GlobalStyles
                styles={{
                    "body": {
                        "backgroundColor": theme.palette.background.default,
                    },
                    ".foo": {
                        "color": "cyan"
                    },
                }}
            />
            <h1 className="foo">This text will be cyan</h1>
        </>
    );
}

[M4Hastam]

Honestly, I don't know.

I wonder who would know? It would be beneficial not to export constructs unneededly (yagni).

[garronej]

Honestly, I don't know.

I wonder who would know? It would be beneficial not to export constructs unneededly (yagni).

tss-react is not a plugin for MUI. It is a styling solution that is compatible with MUI. It is important that tss-react provide a way to define global style.

[garronej]

There is a package to detect unused styles with @mui/styles: https://github.com/jens-ox/eslint-plugin-material-ui-unused-classes. Can we have one adjusted to tss-react?

Also, unrelated question: does GlobalStyles in this package differ from one exported from @mui/material?

It's finally coming! https://github.com/garronej/eslint-plugin-tss-unused-classes There is still some bugs to fix and some docs to write, I will publish it officially by monday.

[garronej]

@hoangbn @stefanpl

That's done: https://docs.tss-react.dev/detecting-unused-classes

@hoangbn Thank you for suggesting it.