Skip to content

Custom container variants are sorted alphabetically instead of as given #2913

@cheshirecode

Description

@cheshirecode

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

https://uno.antfu.me/play/?html=DwEwlgbgBAFgtARgAxKgFwKYA81wMYYB2mATlAGYA22UAzhtXroQPaEZQCGllAXGiU6FaYNGDZwALCgBQUKHkqdatALwAiAOYkwIfC0q04AbU4BXNCwD6CciRt2H985YC6UYwDIAfL1ZoACl4lWlw8GDBKEABKV14AgCMWEhAMEjgAJigklLS4ASFaAAdOEiI0bOTU9IS4MpBK3PTKOATKMwxo9Tkobx7QSAUQtXUAdzhyMx5YRFQEzTgATwZKFlH1b3lgAHpwCD6tvaHlEfHJ6fhkbIXlnjWNrd3IA6gB6EUTjTOpyhmr%2BaWK3um1eT32-SOHxUXwmPz%2BcxuQPWIJ2ez6qOeMje1zqGAa8AyqHGGQArKgoSMAAJ4NhoThgdgkDYQwYUjQ5apQSmUTTxDl5NodaJc2gAWz5VQFSjwAGthfCoON-gtRhFMOooNt0WD0UdOAlaAYLBwkmhLKK4CSoDpNDBcKhqOR7ehsGFymkoCwigBmVDkUa%2BpAvCSpUVCBoAdqgDNCQgqUfOlEWCjMoRYorAAC99dQsTqgA&config=JYWwDg9gTgLgBAbwFBzgEwKYDNgDsMDCEuOA5gDQpxhQYDOGMAgjDFMAEYCuMwWAnpVQ16jAJIBjYnSHVaDGAFVcEWWwCGuOlmggMUAGrr2mmAHEoELmCQBfOFksg4Aci4qJdOi6RIMAD0hYdGx1LgAbeEwcfCISYFIACmRUKAj6AC44AG0qVGyXCS46GAgQAFo08IwXckQ4KXDoLJdaNBc4WwBdKi7ZOgALaBgimDoslNRXIpKy8sHh0ZcWmACYcvDSOFX-dehNUgw4IYA3fQyd9dX1cJ9UW1kRBXGcvLlRJRVEgEpZYXlGCw2JweHx%2BD8-u8FJJpMk3qg6BIbhgsgBGAB0ACZIagJGhcC0BqwwOMAPSk%2BggdGDUl3Ka2X69NRQTTaXT6F7ZDRaHRQPSGYzAUwWKxgH59KgwAYYPQTN5SXAwdR4Dly1D%2BF4uRIgPDlADuwDQUqyABYABwABjA-m%2BtSodBALW1uoNRoGWQAbCarTbaqgqJsnTrcPrDca4KiLZiTdbbbIQGggy6w%2B64AB2D1m2N29XhJMh13h1GYy3Z2T%2Bfx51zOgsptEm71lqguTGV5bV4Oht1ogCsAGYPU31RWq1rO4XU6iAJyYn1x5smtv5rvhzE9j1zu22Xz3OzfJBAA&css=Q&options=N4IgTgpgzgDg9gOygSwG4RALgGYEMA2UEANCAC5i5LZxgC2WehEAvkA

System Info

No response

Validations

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions