Incorrect Combining of CSS classes with Media Queries in Bundled/Minified main.css file during Production Build

[nicholasmead93]

Describe the bug

I have the following styles in my style sheet:

.another-test {
    @media (width > 768px) {
      display: none !important;
    }
  }
  .nick-test {
    @media (width < 48rem) {
      color: red;
    }
  }
  .tw\:max-md\:\!hidden {
    display: none !important;
  }
  .tw\:max-md\:hidden {
    @media (width < 48rem) {
      display: none;
    }
  }
  .tw\:max-md\:w-48 {
    @media (width < 48rem) {
      width: calc(var(--tw-spacing) * 48);
    }
  }
  .tw\:max-md\:flex-col {
    @media (width < 48rem) {
      flex-direction: column;
    }
  }
  .tw\:max-md\:overflow-hidden {
    @media (width < 48rem) {
      overflow: hidden;
    }
  }
  .tw\:max-md\:\!border-none {
    @media (width < 48rem) {
      --tw-border-style: none !important;
      border-style: none !important;
    }
  }
  .tw\:max-md\:\!px-1 {
    @media (width < 48rem) {
      padding-inline: calc(var(--tw-spacing) * 1) !important;
    }
  }
  .tw\:max-md\:\!py-2 {
    @media (width < 48rem) {
      padding-block: calc(var(--tw-spacing) * 2) !important;
    }
  }
  .tw\:max-md\:pt-6 {
    @media (width < 48rem) {
      padding-top: calc(var(--tw-spacing) * 6);
    }
  }
  .tw\:max-md\:pb-4 {
    @media (width < 48rem) {
      padding-bottom: calc(var(--tw-spacing) * 4);
    }
  }
  .tw\:max-md\:text-lg {
    @media (width < 48rem) {
      font-size: var(--tw-text-lg);
      line-height: var(--tw-leading, var(--tw-text-lg--line-height));
    }
  }
  .tw\:md\:hidden {
    @media (width >= 48rem) {
      display: none;
    }
  }
  .tw\:md\:inline {
    @media (width >= 48rem) {
      display: inline;
    }
  }
  .tw\:md\:flex-1 {
    @media (width >= 48rem) {
      flex: 1;
    }
  }
  .tw\:md\:p-12 {
    @media (width >= 48rem) {
      padding: calc(var(--tw-spacing) * 12);
    }
  }
  .tw\:md\:pb-8 {
    @media (width >= 48rem) {
      padding-bottom: calc(var(--tw-spacing) * 8);
    }
  }

What seems to be generated in the bundled/minified css file when react-scripts build is ran is

.another-test,.nick-test{@media (max-width:47.999rem){color:red}}
.tw\:max-md\:\!hidden{display:none!important}
.tw\:max-md\:\!border-none,.tw\:max-md\:\!px-1,.tw\:max-md\:\!py-2,.tw\:max-md\:flex-col,.tw\:max-md\:hidden,.tw\:max-md\:overflow-hidden,.tw\:max-md\:pb-4,.tw\:max-md\:pt-6,.tw\:max-md\:text-lg,.tw\:max-md\:w-48,.tw\:md\:flex-1,.tw\:md\:hidden,.tw\:md\:inline,.tw\:md\:p-12,.tw\:md\:pb-8{@media (min-width:48rem){padding-bottom:calc(var(--tw-spacing)*8)}}

Notice that when a class with a media query is come accross, the stylings will get combined all the way to the last class's styling and ignore the styling of the previous classes. Is there any particular reason why media queries are causing this behavior?