-
-
Notifications
You must be signed in to change notification settings - Fork 965
Closed
Labels
Description
UnoCSS version
0.53.5
Describe the bug
theme: {
"containers": {
"xs": "(min-width: 480px)",
"sm": "(min-width: 640px)",
"1sm": "(min-width: 640px)",
"lg": "(min-width: 1024px)",
"2lg": "(min-width: 1024px)",
"md": "(min-width: 768px)",
"xl": "(min-width: 1280px)",
"xxl": "(min-width: 1440px)",
"2xl": "(min-width: 1536px)",
"xxxl": "(min-width: 1920px)",
"4xl": "(min-width: 2560px)"
}
}
will generate this output whereby CSS for both lg and 2lg breakpoints come before sm one, thus they get overriden when container size exceeds lg breakpoint
@container (min-width: 1024px) {
.\@2lg\:border-blue {
--un-border-opacity: 1;
border-color: rgba(96, 165, 250, var(--un-border-opacity));
}
}
@container (min-width: 640px) {
.\@1sm\:border-black {
--un-border-opacity: 1;
border-color: rgba(0, 0, 0, var(--un-border-opacity));
}
}
as can be observed in the playground link (black border instead of blue). This feels similar to #784 but for container queries instead.
Reproduction
System Info
No response
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.
Reactions are currently unavailable