title: Classnames clashing in safari
body: <p>I got a very strange issue in safari. I am working on a project using nextjs, material-ui, jss.
  My css works fine in safari when i run local server using <code>npm run dev</code> . but after going to production or when i create production build on my machine by running <code>yarn build</code>, my css gets totally messed up. when i inspected in dev tools i found that after building, different classnames are resolving to same classenames for example :-</p>
  <p><a href="https://i.stack.imgur.com/it14e.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/it14e.png" alt="enter image description here" /></a></p>
  <p>refer the image above, we have 2 classnames i.e <code>.jss36</code> while in my code these 2 are different classnames</p>
  <p><a href="https://i.stack.imgur.com/7Apih.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7Apih.png" alt="enter image description here" /></a></p>
  <p>the same issue is throughout all the page and css is completely messed up. i have no idea why this is happening</p>
  <p>It works fine in chrome</p>
  <p><a href="https://i.stack.imgur.com/JYf4m.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JYf4m.png" alt="enter image description here" /></a></p>