Strange behavior with css class not applied on a react-app

Hi everyone,

I will try to be the most clear as possible. 

I face a weird issue regarding one of my css classes not applied only on production (hosted on github pages of course).

Here is the link of my app : https://vince0382.github.io/react-horizontal-timeline/

All classes are applied properly except this one : ItemsGrid_ItemsGrid__3lCP3 ( you can find it by focusing one of the colored bars element).

Here is the content of the class : 

.ItemsGrid {
    display: grid;
    position: relative;
    top: 0;
    left: 0;
    transition: all 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940);
    margin-top: 70px;
    user-select: none;
}

and the jsx code that use it : 

<div
            className={classes.ItemsGrid}
            style={{...style, ...props.style}}
        >
            {gridItems}
        </div>

What I noticed :

  • The css generated  well reference the class and with the correct name. 
  • The class name assigned to the html element is correct.
  • No problem in my development environment. 
  • The problem appears on all tested browsers (Chrome, firefox, safari).

I don’t think the problem is related to React or webpack cause all other classes work as exepected.

I use CSS-Modules inside my project (in case it could help to figure out the problem).

I really don’t understand what happens. 

Many thanks in advance for your help.

I found the problem … 

The CSS file generated during the build process had an extra “;” character before the name of the non working class.

I really don’t know where it comes from given that the build is entirely automated.

I also have a similar problem with my CSS class to react build
opacity: 60%; was replaced by opacity: 1%;

I don’t know how it happened