Disallow unused object properties

Question

I'm using Typescript and React with Material-UI. I'm using Material-UI's styling solution (CSS in JS) in a Hook-like fashion just how explained in their docs:

const useStyles = makeStyles({
  root: {
    background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
    border: 0,
    borderRadius: 3,
    boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
    color: 'white',
    height: 48,
    padding: '0 30px',
  },
});

export default function Hook() {
  const classes = useStyles();
  return <Button className={classes.root}>Hook</Button>;
}

And I want Eslint to detect if a property of the object classes is not being used anywhere. Because after having more than 6 properties (CSS rules), it's getting pretty hard to detect which ones are being used or if they are ever being used. I tried eslint-plugin-unicorn with their no-unused-properties rule on, although it could detect the unused properties in an object if the object was declared and one of its properties being accessed by the dot notation:

const styles = {
    success: { … },
    danger: { … } // <- Property `danger` is defined but never used
};

console.log(styles.success)

But in the first code example where I'm passing an object as an argument to another function and some more steps, it cannot detect whether the properties of classes, which now is an object with the styling properties, are being used or not. I want to understand why this is the case and what's the reason? (I'm also pretty new to Typescript) I'd appreciate some explanation of why can't the linter warn me of the unused properties in the classes object in the first example. Thanks in advance.

Answer 1

For your use case you'll have to use the npm package eslint-plugin-unicorn which has the rule you want no-unused-properties