SASS Styles from other pages overriding current page styles

[ivoilic]

I have a project where I'm using SASS modules for all the styles. There are two pages that share a button component with default styles. On page A the button component has some of it's styles modified with a class. However, if I hover over the link to page B, in production, Next fetches the JS for page B including the styles. When this happens the styles from page B override those from page A and the button style is reset to the default.

A workaround for me would be to use greater specificity to protect the styles on page A.

However, it's an unexpected behavior to have styles from one page impact another page like this. Especially being the only interaction needed to trigger this is hovering over a link. This only happens in production. I wouldn't be surprised if there are other people out there with the same issue who haven't realized it yet.