Using with webpack css modules

[marvson]

In the issue #61, you added support to use css classes by adding a sufix for the className provided for everything you can style, arrow, overlay, content. However, webpack css loader transform the names of the classes adding also a sufix.

A class named ".popup" becomes ".ReactComponentName__popup__1bT1k" where "1bT1k" is a random string and "ReactComponentName" is the name of the component that the poup is in.

This way, the className trick doesn't work and it can't find the class ".ReactComponentName__popup__1bT1k-content" for example.

If I create a class named ".popup-content" it will be transformed to something like this:
".ReactComponentName__popup-content__3g-Uc" and further in reactjs-popup to ".ReactComponentName__popup-content__3g-Uc-content" which is different than ".ReactComponentName__popup__1bT1k-content".

Webpack css loader is really great to use, since you can import your css files and use hot loading with them, but with this I can't use it with reactjs-popup. It would be great to add support to css classes loaded by webpack css loader.

[avin-kavish]

CSS loader doesn't do this by default. Have you turned on CSS Modules? You can use a global selector in that case which doesn't go through name transformation.

https://github.com/webpack-contrib/css-loader#features

[marvson]

At the time, I was starting to use webpack loaders, later I found out that, as you said, it has nothing to do with css loader. Now I'm fully using css modules.

What I did to "fix it" (actually a hack) was passing my style like this:

className={`${styles.popup} dummy`}

This way, no prefix is added to 'styles.popup'. The prefixes are only added to this dummy class name. This has the downside of applying the same style for all elements, the popup, overlay, content and arrow. But since I'm using only the content, disabling the overlay and arrow, it's enough for me.

I am aware of the global solution, but I want to avoid globals as much as possible. A good solution for this problem from another library that I'm using was like this:
gpbl/react-day-picker#73

[avin-kavish]

yeah sure whatever works for you. I use emotion for styling. The point is that this issue is not relevant to this repo and can be closed.

Edit: To put in better words, there is nothing that this library can do to affect this behaviour.

[marvson]

I'm ok with closing the issue, since it's working well here.

[berthj193]

@marvson How did you resolve this? In my case, suffixes are appended to styles.popup too.