[Bug]: minify with class and media merging wrongly

### Describe the bug

I'm using tailwindcss and a part of the generated CSS is the following:

```css
@layer utilities {
  .dark\:border-zinc-700 {
    @media (prefers-color-scheme: dark) {
      border-color: var(--color-zinc-700);
    }
  }
  .dark\:bg-black {
    @media (prefers-color-scheme: dark) {
      background-color: var(--color-black);
    }
  }
  .dark\:bg-neutralDark {
    @media (prefers-color-scheme: dark) {
      background-color: var(--color-neutralDark);
    }
  }
  .dark\:text-gray-200 {
    @media (prefers-color-scheme: dark) {
      color: var(--color-gray-200);
    }
  }
  .dark\:text-white {
    @media (prefers-color-scheme: dark) {
      color: var(--color-white);
    }
  }
}
```

but when I run `npm run build` to create the production assets, and I think that is when cssnano/postcss do it's magic, the generated CSS has the following output:
```css
.dark\:bg-black,.dark\:bg-neutralDark,.dark\:border-zinc-700,.dark\:text-gray-200,.dark\:text-white{@media (prefers-color-scheme:dark){color:var(--color-white)}}
```

The css.map seems correct:
```css
.dark\\:border-zinc-700 {\n    @media (prefers-color-scheme: dark) {\n      border-color: var(--color-zinc-700);\n    }\n  }\n  .dark\\:bg-black {\n    @media (prefers-color-scheme: dark) {\n      background-color: var(--color-black);\n    }\n  }\n  .dark\\:bg-neutralDark {\n    @media (prefers-color-scheme: dark) {\n      background-color: var(--color-neutralDark);\n    }\n  }\n  .dark\\:text-gray-200 {\n    @media (prefers-color-scheme: dark) {\n      color: var(--color-gray-200);\n    }\n  }\n  .dark\\:text-white {\n    @media (prefers-color-scheme: dark) {\n      color: var(--color-white);\n    }
```

So, it seems that it is merging by the `@media`, but messing with the right values.

### Expected behaviour

The expected CSS should be something like this:
```css
.dark\:border-zinc-700{@media (prefers-color-scheme:dark){border-color:var(--color-zinc-700);}}.dark\:bg-black{@media (prefers-color-scheme:dark){background-color:var(--color-black);}}.dark\:bg-neutralDark{@media (prefers-color-scheme:dark){background-color:var(--color-neutralDark);}}.dark\:text-gray-200{@media (prefers-color-scheme:dark){color:var(--color-gray-200);}}.dark\:text-white{@media (prefers-color-scheme:dark){color:var(--color-white);}}
```

### Steps to reproduce

Sorry, I'm not sure how to simple reproduce, but like I said, I have that css at my React project and when I run `npm run build` the build static css generated is the reported.

### Version

7.0.7

### Preset

(no preset)

### Environment

```shell
System:
  OS: macOS 14.2.1
  CPU: (8) x64 Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz
  Memory: 88.37 MB / 16.00 GB
  Shell: 5.9 - /bin/zsh
```

### Package details

```shell
├─┬ @tailwindcss/postcss@4.1.11
│ └── postcss@8.5.6 deduped
├─┬ css-minimizer-webpack-plugin@7.0.2
│ ├── cssnano@7.0.7 deduped
│ └── postcss@8.5.6 deduped
├─┬ cssnano@7.0.7
│ ├─┬ cssnano-preset-default@7.0.7
│ │ ├─┬ css-declaration-sorter@7.2.0
│ │ │ └── postcss@8.5.6 deduped
│ │ ├─┬ cssnano-utils@5.0.1
│ │ │ └── postcss@8.5.6 deduped
│ │ ├─┬ postcss-calc@10.1.1
│ │ │ └── postcss@8.5.6 deduped
│ │ ├─┬ postcss-colormin@7.0.3
│ │ │ └── postcss@8.5.6 deduped
│ │ ├─┬ postcss-convert-values@7.0.5
│ │ │ └── postcss@8.5.6 deduped
│ │ ├─┬ postcss-discard-comments@7.0.4
│ │ │ └── postcss@8.5.6 deduped
│ │ ├─┬ postcss-discard-duplicates@7.0.2
│ │ │ └── postcss@8.5.6 deduped
│ │ ├─┬ postcss-discard-empty@7.0.1
│ │ │ └── postcss@8.5.6 deduped
│ │ ├─┬ postcss-discard-overridden@7.0.1
│ │ │ └── postcss@8.5.6 deduped
│ │ ├─┬ postcss-merge-longhand@7.0.5
│ │ │ ├── postcss@8.5.6 deduped
│ │ │ └─┬ stylehacks@7.0.5
│ │ │   └── postcss@8.5.6 deduped
│ │ ├─┬ postcss-merge-rules@7.0.5
│ │ │ └── postcss@8.5.6 deduped
│ │ ├─┬ postcss-minify-font-values@7.0.1
│ │ │ └── postcss@8.5.6 deduped
│ │ ├─┬ postcss-minify-gradients@7.0.1
│ │ │ └── postcss@8.5.6 deduped
│ │ ├─┬ postcss-minify-params@7.0.3
│ │ │ └── postcss@8.5.6 deduped
│ │ ├─┬ postcss-minify-selectors@7.0.5
│ │ │ └── postcss@8.5.6 deduped
│ │ ├─┬ postcss-normalize-charset@7.0.1
│ │ │ └── postcss@8.5.6 deduped
│ │ ├─┬ postcss-normalize-display-values@7.0.1
│ │ │ └── postcss@8.5.6 deduped
│ │ ├─┬ postcss-normalize-positions@7.0.1
│ │ │ └── postcss@8.5.6 deduped
│ │ ├─┬ postcss-normalize-repeat-style@7.0.1
│ │ │ └── postcss@8.5.6 deduped
│ │ ├─┬ postcss-normalize-string@7.0.1
│ │ │ └── postcss@8.5.6 deduped
│ │ ├─┬ postcss-normalize-timing-functions@7.0.1
│ │ │ └── postcss@8.5.6 deduped
│ │ ├─┬ postcss-normalize-unicode@7.0.3
│ │ │ └── postcss@8.5.6 deduped
│ │ ├─┬ postcss-normalize-url@7.0.1
│ │ │ └── postcss@8.5.6 deduped
│ │ ├─┬ postcss-normalize-whitespace@7.0.1
│ │ │ └── postcss@8.5.6 deduped
│ │ ├─┬ postcss-ordered-values@7.0.2
│ │ │ └── postcss@8.5.6 deduped
│ │ ├─┬ postcss-reduce-initial@7.0.3
│ │ │ └── postcss@8.5.6 deduped
│ │ ├─┬ postcss-reduce-transforms@7.0.1
│ │ │ └── postcss@8.5.6 deduped
│ │ ├─┬ postcss-svgo@7.0.2
│ │ │ └── postcss@8.5.6 deduped
│ │ ├─┬ postcss-unique-selectors@7.0.4
│ │ │ └── postcss@8.5.6 deduped
│ │ └── postcss@8.5.6 deduped
│ └── postcss@8.5.6 deduped
├── postcss@8.5.6
└─┬ react-scripts@5.0.1
  ├─┬ css-loader@6.11.0
  │ ├─┬ icss-utils@5.1.0
  │ │ └── postcss@8.5.6 deduped
  │ ├─┬ postcss-modules-extract-imports@3.1.0
  │ │ └── postcss@8.5.6 deduped
  │ ├─┬ postcss-modules-local-by-default@4.2.0
  │ │ └── postcss@8.5.6 deduped
  │ ├─┬ postcss-modules-scope@3.2.1
  │ │ └── postcss@8.5.6 deduped
  │ ├─┬ postcss-modules-values@4.0.0
  │ │ └── postcss@8.5.6 deduped
  │ └── postcss@8.5.6 deduped
  ├─┬ css-minimizer-webpack-plugin@3.4.1
  │ ├─┬ cssnano@5.1.15
  │ │ ├─┬ cssnano-preset-default@5.2.14
  │ │ │ ├─┬ css-declaration-sorter@6.4.1
  │ │ │ │ └── postcss@8.5.6 deduped
  │ │ │ ├─┬ cssnano-utils@3.1.0
  │ │ │ │ └── postcss@8.5.6 deduped
  │ │ │ ├─┬ postcss-calc@8.2.4
  │ │ │ │ └── postcss@8.5.6 deduped
  │ │ │ ├─┬ postcss-colormin@5.3.1
  │ │ │ │ └── postcss@8.5.6 deduped
  │ │ │ ├─┬ postcss-convert-values@5.1.3
  │ │ │ │ └── postcss@8.5.6 deduped
  │ │ │ ├─┬ postcss-discard-comments@5.1.2
  │ │ │ │ └── postcss@8.5.6 deduped
  │ │ │ ├─┬ postcss-discard-duplicates@5.1.0
  │ │ │ │ └── postcss@8.5.6 deduped
  │ │ │ ├─┬ postcss-discard-empty@5.1.1
  │ │ │ │ └── postcss@8.5.6 deduped
  │ │ │ ├─┬ postcss-discard-overridden@5.1.0
  │ │ │ │ └── postcss@8.5.6 deduped
  │ │ │ ├─┬ postcss-merge-longhand@5.1.7
  │ │ │ │ ├── postcss@8.5.6 deduped
  │ │ │ │ └─┬ stylehacks@5.1.1
  │ │ │ │   └── postcss@8.5.6 deduped
  │ │ │ ├─┬ postcss-merge-rules@5.1.4
  │ │ │ │ └── postcss@8.5.6 deduped
  │ │ │ ├─┬ postcss-minify-font-values@5.1.0
  │ │ │ │ └── postcss@8.5.6 deduped
  │ │ │ ├─┬ postcss-minify-gradients@5.1.1
  │ │ │ │ └── postcss@8.5.6 deduped
  │ │ │ ├─┬ postcss-minify-params@5.1.4
  │ │ │ │ └── postcss@8.5.6 deduped
  │ │ │ ├─┬ postcss-minify-selectors@5.2.1
  │ │ │ │ └── postcss@8.5.6 deduped
  │ │ │ ├─┬ postcss-normalize-charset@5.1.0
  │ │ │ │ └── postcss@8.5.6 deduped
  │ │ │ ├─┬ postcss-normalize-display-values@5.1.0
  │ │ │ │ └── postcss@8.5.6 deduped
  │ │ │ ├─┬ postcss-normalize-positions@5.1.1
  │ │ │ │ └── postcss@8.5.6 deduped
  │ │ │ ├─┬ postcss-normalize-repeat-style@5.1.1
  │ │ │ │ └── postcss@8.5.6 deduped
  │ │ │ ├─┬ postcss-normalize-string@5.1.0
  │ │ │ │ └── postcss@8.5.6 deduped
  │ │ │ ├─┬ postcss-normalize-timing-functions@5.1.0
  │ │ │ │ └── postcss@8.5.6 deduped
  │ │ │ ├─┬ postcss-normalize-unicode@5.1.1
  │ │ │ │ └── postcss@8.5.6 deduped
  │ │ │ ├─┬ postcss-normalize-url@5.1.0
  │ │ │ │ └── postcss@8.5.6 deduped
  │ │ │ ├─┬ postcss-normalize-whitespace@5.1.1
  │ │ │ │ └── postcss@8.5.6 deduped
  │ │ │ ├─┬ postcss-ordered-values@5.1.3
  │ │ │ │ └── postcss@8.5.6 deduped
  │ │ │ ├─┬ postcss-reduce-initial@5.1.2
  │ │ │ │ └── postcss@8.5.6 deduped
  │ │ │ ├─┬ postcss-reduce-transforms@5.1.0
  │ │ │ │ └── postcss@8.5.6 deduped
  │ │ │ ├─┬ postcss-svgo@5.1.0
  │ │ │ │ └── postcss@8.5.6 deduped
  │ │ │ ├─┬ postcss-unique-selectors@5.1.1
  │ │ │ │ └── postcss@8.5.6 deduped
  │ │ │ └── postcss@8.5.6 deduped
  │ │ └── postcss@8.5.6 deduped
  │ └── postcss@8.5.6 deduped
  ├─┬ postcss-flexbugs-fixes@5.0.2
  │ └── postcss@8.5.6 deduped
  ├─┬ postcss-loader@6.2.1
  │ └── postcss@8.5.6 deduped
  ├─┬ postcss-normalize@10.0.1
  │ ├─┬ postcss-browser-comments@4.0.0
  │ │ └── postcss@8.5.6 deduped
  │ └── postcss@8.5.6 deduped
  ├─┬ postcss-preset-env@7.8.3
  │ ├─┬ @csstools/postcss-cascade-layers@1.1.1
  │ │ └── postcss@8.5.6 deduped
  │ ├─┬ @csstools/postcss-color-function@1.1.1
  │ │ └── postcss@8.5.6 deduped
  │ ├─┬ @csstools/postcss-font-format-keywords@1.0.1
  │ │ └── postcss@8.5.6 deduped
  │ ├─┬ @csstools/postcss-hwb-function@1.0.2
  │ │ └── postcss@8.5.6 deduped
  │ ├─┬ @csstools/postcss-ic-unit@1.0.1
  │ │ └── postcss@8.5.6 deduped
  │ ├─┬ @csstools/postcss-is-pseudo-class@2.0.7
  │ │ └── postcss@8.5.6 deduped
  │ ├─┬ @csstools/postcss-nested-calc@1.0.0
  │ │ └── postcss@8.5.6 deduped
  │ ├─┬ @csstools/postcss-normalize-display-values@1.0.1
  │ │ └── postcss@8.5.6 deduped
  │ ├─┬ @csstools/postcss-oklab-function@1.1.1
  │ │ └── postcss@8.5.6 deduped
  │ ├─┬ @csstools/postcss-progressive-custom-properties@1.3.0
  │ │ └── postcss@8.5.6 deduped
  │ ├─┬ @csstools/postcss-stepped-value-functions@1.0.1
  │ │ └── postcss@8.5.6 deduped
  │ ├─┬ @csstools/postcss-text-decoration-shorthand@1.0.0
  │ │ └── postcss@8.5.6 deduped
  │ ├─┬ @csstools/postcss-trigonometric-functions@1.0.2
  │ │ └── postcss@8.5.6 deduped
  │ ├─┬ @csstools/postcss-unset-value@1.0.2
  │ │ └── postcss@8.5.6 deduped
  │ ├─┬ autoprefixer@10.4.21
  │ │ └── postcss@8.5.6 deduped
  │ ├─┬ css-blank-pseudo@3.0.3
  │ │ └── postcss@8.5.6 deduped
  │ ├─┬ css-has-pseudo@3.0.4
  │ │ └── postcss@8.5.6 deduped
  │ ├─┬ css-prefers-color-scheme@6.0.3
  │ │ └── postcss@8.5.6 deduped
  │ ├─┬ postcss-attribute-case-insensitive@5.0.2
  │ │ └── postcss@8.5.6 deduped
  │ ├─┬ postcss-clamp@4.1.0
  │ │ └── postcss@8.5.6 deduped
  │ ├─┬ postcss-color-functional-notation@4.2.4
  │ │ └── postcss@8.5.6 deduped
  │ ├─┬ postcss-color-hex-alpha@8.0.4
  │ │ └── postcss@8.5.6 deduped
  │ ├─┬ postcss-color-rebeccapurple@7.1.1
  │ │ └── postcss@8.5.6 deduped
  │ ├─┬ postcss-custom-media@8.0.2
  │ │ └── postcss@8.5.6 deduped
  │ ├─┬ postcss-custom-properties@12.1.11
  │ │ └── postcss@8.5.6 deduped
  │ ├─┬ postcss-custom-selectors@6.0.3
  │ │ └── postcss@8.5.6 deduped
  │ ├─┬ postcss-dir-pseudo-class@6.0.5
  │ │ └── postcss@8.5.6 deduped
  │ ├─┬ postcss-double-position-gradients@3.1.2
  │ │ └── postcss@8.5.6 deduped
  │ ├─┬ postcss-env-function@4.0.6
  │ │ └── postcss@8.5.6 deduped
  │ ├─┬ postcss-focus-visible@6.0.4
  │ │ └── postcss@8.5.6 deduped
  │ ├─┬ postcss-focus-within@5.0.4
  │ │ └── postcss@8.5.6 deduped
  │ ├─┬ postcss-font-variant@5.0.0
  │ │ └── postcss@8.5.6 deduped
  │ ├─┬ postcss-gap-properties@3.0.5
  │ │ └── postcss@8.5.6 deduped
  │ ├─┬ postcss-image-set-function@4.0.7
  │ │ └── postcss@8.5.6 deduped
  │ ├─┬ postcss-initial@4.0.1
  │ │ └── postcss@8.5.6 deduped
  │ ├─┬ postcss-lab-function@4.2.1
  │ │ └── postcss@8.5.6 deduped
  │ ├─┬ postcss-logical@5.0.4
  │ │ └── postcss@8.5.6 deduped
  │ ├─┬ postcss-media-minmax@5.0.0
  │ │ └── postcss@8.5.6 deduped
  │ ├─┬ postcss-nesting@10.2.0
  │ │ └── postcss@8.5.6 deduped
  │ ├─┬ postcss-opacity-percentage@1.1.3
  │ │ └── postcss@8.5.6 deduped
  │ ├─┬ postcss-overflow-shorthand@3.0.4
  │ │ └── postcss@8.5.6 deduped
  │ ├─┬ postcss-page-break@3.0.4
  │ │ └── postcss@8.5.6 deduped
  │ ├─┬ postcss-place@7.0.5
  │ │ └── postcss@8.5.6 deduped
  │ ├─┬ postcss-pseudo-class-any-link@7.1.6
  │ │ └── postcss@8.5.6 deduped
  │ ├─┬ postcss-replace-overflow-wrap@4.0.0
  │ │ └── postcss@8.5.6 deduped
  │ ├─┬ postcss-selector-not@6.0.1
  │ │ └── postcss@8.5.6 deduped
  │ └── postcss@8.5.6 deduped
  ├── postcss@8.5.6 deduped
  ├─┬ resolve-url-loader@4.0.0
  │ └── postcss@7.0.39
  └─┬ tailwindcss@3.4.17
    ├─┬ postcss-import@15.1.0
    │ └── postcss@8.5.6 deduped
    ├─┬ postcss-js@4.0.1
    │ └── postcss@8.5.6 deduped
    ├─┬ postcss-load-config@4.0.2
    │ └── postcss@8.5.6 deduped
    ├─┬ postcss-nested@6.2.0
    │ └── postcss@8.5.6 deduped
    └── postcss@8.5.6 deduped
```

### Additional context

_No response_

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[Bug]: minify with class and media merging wrongly #1706

Describe the bug

Expected behaviour

Steps to reproduce

Version

Preset

Environment

Package details

Additional context

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Uh oh!

[Bug]: minify with class and media merging wrongly #1706

Description

Describe the bug

Expected behaviour

Steps to reproduce

Version

Preset

Environment

Package details

Additional context

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions