Feature query overrides print media query colors in Wind4 preset
Author: thasmoCreated Jul 9, 2025Updated Aug 25, 2026
UnoCSS version
66.3.3
Describe the bug
When styling an element like this:
<div class="bg-gray print:bg-transparent"></div>UnoCSS/Wind4 generates this CSS:
.bg-gray {
background-color:color-mix(in srgb, var(--colors-gray-DEFAULT) var(--un-bg-opacity), transparent);
}
@media print {
.print\:bg-transparent{background-color:transparent;}
}
@supports (color: color-mix(in lab, red, red)) {
.bg-gray{background-color:color-mix(in oklab, var(--colors-gray-DEFAULT) var(--un-bg-opacity), transparent);}
}When printing the document (and enabling printing background colors), the printed background is gray not transparent.
When swapping the queries order in the generated CSS, print styles are working correctly:
.bg-gray {
background-color:color-mix(in srgb, var(--colors-gray-DEFAULT) var(--un-bg-opacity), transparent);
}
@supports (color: color-mix(in lab, red, red)) {
.bg-gray{background-color:color-mix(in oklab, var(--colors-gray-DEFAULT) var(--un-bg-opacity), transparent);}
}
@media print {
.print\:bg-transparent{background-color:transparent;}
}
Also this only seems to happen for certain scenarios e.g. `print:bg-transparent` - for `print:bg-white` it works correctly.Reproduction
Print the frame with background colors enabled: https://unocss.dev/play/#version=66.3.3&html=DwEwlgbgBAxgNgQwM5ILwCIAWBaAZgVzjigHc9DiAjAc22oCcEBPKAB3rADsAXALhuzdGnJKwT0Apj3QA%2BYAHpwEGUA&config=JYWwDg9gTgLgBAbwFBzgEwKYDNgDsMDCEuOA5gDQpxhQYDOGMA6nmgCyUC%2BcWUEIcAOQBXXBADGdOoKRIMAD0ix02AIbCANvEw58REsFIAKZKhr1GdAFxwA2lTO0GzVmyMBKSqgC6Xd0iA&css=Q&options=N4XyA
System Info
Browser: Firefox
Validations
- Read the Contributing Guidelines.
- Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
- The provided reproduction is a minimal reproducible example of the bug.
Source: unocss/unocss