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?

[KanthTS]

/* FIX NOTE (for GitHub history):

The previous version used nested @media queries inside class selectors, e.g.:

.nick-test {
  @media (width < 48rem) {
    color: red;
  }
}

This is NOT valid CSS. It only works if PostCSS nesting plugin is present, but during react-scripts build, cssnano/minifier merged rules incorrectly and dropped earlier declarations.

FIX: Converted all nested media queries into valid top-level @media blocks. This ensures production builds keep all styles without collapsing.

*/

/* Default styles (apply always) / .another-test { / only has rule in desktop media */ }

.nick-test { /* only has rule in mobile media */ }

.tw:max-md:!hidden { display: none !important; /* unconditional */ }

/* ---------- Mobile-first: max-width 48rem ---------- */ @media (max-width: 48rem) { .nick-test { color: red; }

.tw:max-md:hidden { display: none; }

.tw:max-md:w-48 { width: calc(var(--tw-spacing) * 48); }

.tw:max-md:flex-col { flex-direction: column; }

.tw:max-md:overflow-hidden { overflow: hidden; }

.tw:max-md:!border-none { --tw-border-style: none !important; border-style: none !important; }

.tw:max-md:!px-1 { padding-inline: calc(var(--tw-spacing) * 1) !important; }

.tw:max-md:!py-2 { padding-block: calc(var(--tw-spacing) * 2) !important; }

.tw:max-md:pt-6 { padding-top: calc(var(--tw-spacing) * 6); }

.tw:max-md:pb-4 { padding-bottom: calc(var(--tw-spacing) * 4); }

.tw:max-md:text-lg { font-size: var(--tw-text-lg); line-height: var(--tw-leading, var(--tw-text-lg--line-height)); } }

/* ---------- Desktop and up: min-width 48rem ---------- */ @media (min-width: 48rem) { .another-test { display: none !important; }

.tw:md:hidden { display: none; }

.tw:md:inline { display: inline; }

.tw:md:flex-1 { flex: 1; }

.tw:md:p-12 { padding: calc(var(--tw-spacing) * 12); }

.tw:md:pb-8 { padding-bottom: calc(var(--tw-spacing) * 8); } }