[Bug]: CSS variables under nested media queries get purged

[fongandrew]

Describe the bug

With native CSS nesting, this is now valid CSS:

:root {
    --mobile-font-size: 1.5rem;
}

.selector {
    @media (max-width: 768px) {
        font-size: var(--mobile-font-size);
    }
}

If you enable variable purging however, the CSS variable definition will be purged, even though it is present in the file.

To Reproduce

Use a CSS variable / custom property as a direct descendant of a media query.

There is a repro available at https://github.com/fongandrew/purgecss-media-query-bug-repro.

Expected Behavior

The CSS variable definition should not be purged. That is, in the above example, var(--mobile-font-size) is a valid usage, so --mobile-font-size: 1.5rem should not be purged from the final output.

Environment

macOS, Node 23.5.0, PurgeCSS 7.0.2

Add any other context about the problem here

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[fongandrew]

As a partial workaround, you can add & to the safelist and do something like this:

.text {
  font-size: 1rem;

  @media (max-width: 768px) {
    & {
      font-size: var(--mobile-text-size);
    }
  }
}

However, this results in the variable always counting as used and never being purged, even if the class it is tied to is itself purged.