jens-ox / eslint-plugin-material-ui-unused-classes

Detect unused Material UI styling classes using eslint

Detect unused Material-UI classes

This eslint plugin lets you detect unused Material UI classes:

Usage

1. Add the dependency:

npm i --save-dev eslint-plugin-mui-unused-classes

2. Add it at the end of your plugin list in your .eslintrc.js:

module.exports = {
  // ...
  plugins: [
    // ...
    'mui-unused-classes'
  ]
}

That's it! You should now get a warning if you have unused classes. One could also make it an error by adding the actual rule to the rule entry in .eslintrc.js:

module.exports = {
  // ...
  plugins: [
    // ...
    'mui-unused-classes'
  ],
  rules: {
    'mui-unused-classes/unused-classes': 2
  }
}

eslint-plugin-material-ui-unused-classes's Issues

Not working for classes imported from file

Classes which are imported from a file (usually styles.js in the same component directory) are not being checked:

import useStyles from "./styles";
...
const classes = useStyles();

The plugin seems like to assume that the classes are defined in the same file.
I have debugged the plugin and did a workaround by first saving all usedClasses to a file and loading them then in the next run to check if they include the definedClassKey. But therefore I had to add the filename as prefix for each class with context.getFilename() because many classes have the same name in different files.

It would be great to let it work also with classes imported from a file.

Another issue I had was, that all classes were marked as unused which is wrong, but in the console only unused classes were listed. Maybe it is in relation with that issue above.

Thanks

support peer dependency eslint 7 || 8

Trying to update some of my packages and this lib has been really useful. Can put in PR for this to support peers 7 || 8

"peerDependencies": {
    "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
},

Any suggestions on how to test this plugin?

Doesn't understand createStyles

Wrapping my styles with createStyles seems to defeat this plugin.

Here's an adapted example from the unit tests showing dead class detection working as expected:

import {makeStyles} from '@material-ui/core/styles';
import React from 'react';

const useStyles = makeStyles(theme => ({
  testClass: {
    backgroundColor: 'red',
  },
  usedClass: {
    backgroundColor: 'hotpink',
  },
}));

export const Component = () => {
  const classes = useStyles();
  return <div className={classes.usedClass}>test</div>;
};

When I throw a createStyles in there, the class is no longer marked as dead:

import {createStyles, makeStyles} from '@material-ui/core/styles';
import React from 'react';

const useStyles = makeStyles(theme =>
  createStyles({
    testClass: {
      backgroundColor: 'red',
    },
    usedClass: {
      backgroundColor: 'hotpink',
    },
  }),
);

export const Component = () => {
  const classes = useStyles();
  return <div className={classes.usedClass}>test</div>;
};

Destructured Props Support

Was this ever intended to work destructured styles?

const { myStyle } = useStyles()

Detects all classes as not used, even when they are

project made with create-react-app using "react-scripts": "4.0.3"

heres the relevent package.json:

"eslintConfig": { "extends": [ "react-app", "react-app/jest" ], "plugins": [ "mui-unused-classes" ], "rules": { "mui-unused-classes/unused-classes": 1 } }, "devDependencies": { "eslint-plugin-mui-unused-classes": "^1.0.3" }

shows errors:

even though the classes/styles are used:

🤔 what am i doing wrong?

TypeError: Cannot read property 'name' of undefined

I got this error when running this plugin in my project:

$ eslint '**/*.ts{,x}' --max-warnings=0

Oops! Something went wrong! :(

ESLint: 8.32.0

TypeError: Cannot read property 'name' of undefined
Occurred while linting /project/.../OverflowText.tsx:14
Rule: "mui-unused-classes/unused-classes"
    at CallExpression (/project/node_modules/eslint-plugin-mui-unused-classes/rule.js:39:37)
    at ruleErrorHandler (/project/node_modules/eslint/lib/linter/linter.js:1118:28)
    at /project/node_modules/eslint/lib/linter/safe-emitter.js:45:58
    at Array.forEach (<anonymous>)
    at Object.emit (/project/node_modules/eslint/lib/linter/safe-emitter.js:45:38)
    at NodeEventGenerator.applySelector (/project/node_modules/eslint/lib/linter/node-event-generator.js:297:26)
    at NodeEventGenerator.applySelectors (/project/node_modules/eslint/lib/linter/node-event-generator.js:326:22)
    at NodeEventGenerator.enterNode (/project/node_modules/eslint/lib/linter/node-event-generator.js:340:14)
    at CodePathAnalyzer.enterNode (/project/node_modules/eslint/lib/linter/code-path-analysis/code-path-analyzer.js:795:23)
    at /project/node_modules/eslint/lib/linter/linter.js:1153:32
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

This was the file that triggered it:

import Box, {BoxProps} from '@material-ui/core/Box';
import {createStyles, makeStyles} from '@material-ui/core/styles';
import Typography, {TypographyProps} from '@material-ui/core/Typography';
import React from 'react';

export interface Props {
  maxLines: number;
  boxProps?: BoxProps;
  typographyProps?: TypographyProps;
  children: React.ReactNode;
}

export const OverflowText = ({maxLines, boxProps = {}, typographyProps = {}, children}: Props) => {
  const classes = makeStyles(() =>
    createStyles({
      overflowText: {
        display: '-webkit-box',
        '-webkit-line-clamp': maxLines,
        '-webkit-box-orient': 'vertical',
        overflow: 'hidden',
      },
    }),
  )();

  return (
    <Box className={classes.overflowText} {...boxProps}>
      <Typography {...typographyProps}>{children}</Typography>
    </Box>
  );
};

I was able to work around the issue by wrapping this line in an if check:

eslint-plugin-material-ui-unused-classes/rule.js

Line 39 in 857559a

hookName = node.parent.id.name

          if (!node.parent.id) {
            return;
          }
          hookName = node.parent.id.name

Only works if your output of `useStyles` is `classes`

If your styles are created like this, then you're good:

const classes = useStyles()

If you use any other variable name, however, the plugin declares every class as "unused"

const different_classes = useStyles()

// Every class is marked as unused

Port for `tss-react`

Hello!

I am the author of tss-react, it's what's officially replaced mui v4's makeStyles for users that want to keep using that API in v5.

A user mentioned the existence of this plugin to me.

I am very interested in porting this for tss-react. What do you recommend? Should I do my own fork and publish it on my own or do you think we could adapt this to work whith the two APIs?

Best,

Mocha listed as dependency seemingly unnecessary and causes warnings

The package.json appears to unnecessarily list its dependencies as dependencies rather than devDependencies or peerDependencies.

When installing this npm package, I got the following warning, since it began installing mocha for me:
warning eslint-plugin-mui-unused-classes > mocha > [email protected]: Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is recommended you upgrade to 3.2.7 or 4.3.1. (https://github.com/visionmedia/debug/issues/797)

Mocha should be in the devDependencies presumably, since it's only needed to test the package when developing, and isn't needed by those who install the package.

I imagine the @typescript-eslint/parser and eslint itself could presumably be in peerDependencies, but less certain about this. (For instance, eslint-plugin-jsx-a11y lists eslint as a peerDependency and devDependency (but not dependency): https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/20b48a4110fef62165148a43269d955d82882cbc/package.json#L74. Same with Airbnb's eslint-config-airbnb: https://github.com/airbnb/javascript/blob/63098cbb6c05376dbefc9a91351f5727540c1ce1/packages/eslint-config-airbnb/package.json#L78)