eslint-plugin: Add rule to check that makeStyles is not called inside a React component

[NotWoods]

trafficstars

(or just called at module root)

When migrating to Fluent v9 & Griffel I've seen some devs use makeStyles inside a React component, since they want to pass in JS variables like the old CSS-in-JS system. It would be nice to have a lint rule to ensure that makeStyles is only called at the root.

[layershifter]

FYI: makeStyles will throw if it's called inside a component in development mode:

https://github.com/microsoft/griffel/blob/9228140c805f662b6c12df4c3f6e45bf9378b4ac/packages/react/src/makeStyles.ts#L32-L41

But, I agree that a ESLint rule is more ergonomic 👍

[swese44]

Note that Griffel will only throw that error if within the context of a React component. I wonder if it could throw if called from any place other than a module's root instead?

[layershifter]

Note that Griffel will only throw that error if within the context of a React component. I wonder if it could throw if called from any place other than a module's root instead?

@swese44 maybe, but I have no ideas how to check this/verify in runtime.

[NotWoods]

It could be checked by a lint rule at least