microsoft / griffel

CSS-in-JS with ahead-of-time compilation ⚡️
https://griffel.js.org
MIT License
1.2k stars 61 forks source link

lint: add lint rule which warn unused makeStyles classes #491

Open taisei-13046 opened 10 months ago

taisei-13046 commented 10 months ago

Library

React Components / v9 (@fluentui/react-components)

Describe the feature that you would like added

Currently, I use @fluentui/react-components and style by using makeStyles. This feature proposal is making the new ESLint Rules.

For example.

export const Component = () => {
  const styles = useStyles()
  return (
    <div className={styles.wrapper}>
      <p>hello</p>
    </div>
  )
}

const useStyles = makeStyles({
  wrapper: {},
  // ⚠️ this class should be warned because it's not used
  form: {}
})

This above example means that the makeStyles code should be warned because it has unused styles. Please consider it.

Have you discussed this feature with our team

no

Additional context

no

Validations

Priority

Normal

Hotell commented 10 months ago

fluent v9 core doesn't contain css in js implementation anymore ( we use griffel for css in js ), thus can you please open this issue on griffel repo ?

the rule could be added to eslint-plugin https://github.com/microsoft/griffel/tree/main/packages/eslint-plugin

Last but not least, I'd suggest to add "motivation" behind this rule to provide better motivation. for example: shipping less JS for unused rule definitions etc.

ty!

layershifter commented 10 months ago

FYI I transferred the issue to Griffel repository.


This rule could be easily implemented for a case when makeStyles() and useStyles() call are in the same file. However, it's more complicated for a case when useStyles() gets imported from a different file:

import { useStyles } from './x.styles'

function App() {
  const styles = useStyles();
}

I don't think that there is an easy way on how to handle the second case, but I am opened for suggestions.