Some css styles are not created in production but work in development

Hello,

We are hitting an odd css/emotion issue in production, while the component works great in development. We’ve tried this on v2.0.0-v.2.2.0 and its the same issue with all of them.

The dynamic css rules for the outer divs never get created in the emotion stylesheet. They are, however, set on the divs in the DOM. The rest of the dynamic css rules (e.g. on the options when you click on the control) do get created in the emotion stylesheet. This only happens on a few pages in our app, while other parts work as expected. Here is a screenshot of the the DOM when the page loads.

You’ll notice that the select outermost div was assigned a classname of css-10nd86i, but that css rule does not actually exist in the DOM. Using the javascript console to dump out the emotion stylesheet, you’ll notice in this screenshot that the rules are totally empty in the stylesheet.

Now if you click on the select control to open it, the css rules for the options list all get created:

So the options get styled correctly, but the primary select component does not. I’ve tried various versions of emotion, react-select, react, etc., but the issue still persists. We’ve had to swap out this component in production for the time being, but would like to figure this out. Any help would be greatly appreciated.

[wegry]

This seems like it’s still present in react-select@4.2.1.

[NearHuscarl]

I managed to fix the issue by adding classNamePrefix which seems to force react-select to add the classNames to the sub-components in production

<Select
  classNamePrefix='select'
  {...}
/>

Before

<div class=" css-1hwfws3">
  ...
</div>

After

<div class="select__value-container select__value-container--is-multi select__value-container--has-value css-1hwfws3">
  ...
</div>