search

cssinjs / jss

JSS is an authoring tool for CSS which uses JavaScript as a host language.
https://cssinjs.org
MIT License
7.08k stars 399 forks source link

[react-jss] compiled class name does not prefix with Component name #1301

Closed rianbrob closed 4 years ago

rianbrob commented 4 years ago

Describe the bug: upgraded from 8.6.1 to 10.0.4 and now component name is not prefixed in the generated classname.

e.g. instead of <button class="Button-myButton-1-25"> as per documentation, I only get <button class="myButton-1-25">.

having the component name prefixed in development mode is one of the reasons i love react-jss as it makes it so simple to know where to find something in the code.

Versions (please complete the following information): 10.0.4 of react-jss

kof commented 4 years ago

Using hooks?

rianbrob commented 4 years ago

yes, with hooks...even tried with a new plain vanilla create-react-app to make sure I wasn't nuts. alas, got the same issue even after I implemented a basic App exactly as in https://cssinjs.org/react-jss/?v=v10.0.4#basic

kof commented 4 years ago

So you didn't just upgrade, you rewrote from hocs to hooks ... hooks have no way to know the components name. To get this, we need to create a babel plugin that does it. Let me know if you wan to work on it. Closing this issue, it needs a new one.

rianbrob commented 4 years ago

makes sense thanks. though, I was wondering what sort of voodoo would allow knowing the components name using hooks...might want to have the documentation i referred to updated...

kof commented 4 years ago

It's not too hard, babel plugin can take the component name and pass it as an argument to useStyles hook call.