Browser: Chrome (latest)
OS: Windows
URL: Cloudtunnel.dk (overriden with !important as temporary fix)
I’m using Bricks with custom utility classes (e.g. w-2--3, sm-w-full, etc.) instead of separate CSS components.
However, Bricks outputs the generated CSS in the wrong order, causing responsive classes to fail.
Here’s a snippet of the compiled CSS:
.w-1--3 {
width: 33.3333%;
}
@media (max-width: 478px) {
.sm-w-full {
width: 100%;
}
}
.aspect-square:not(.tag), .aspect-square img {
aspect-ratio: 1;
}
.object-cover:not(.tag), .object-cover img {
object-fit: cover;
}
.rounded-full {
border-radius: 99999px;
}
.w-full {
width: 100%;
}
.w-2--3 {
width: 66.666%;
}
As you can see, .w-2--3 is declared after the media query.
This means .w-2--3 { width: 66.666% } overrides .sm-w-full { width: 100% }, even on mobile, because it appears later in the cascade.
Expected behavior
- All responsive classes (
sm-,md-, etc.) should be placed after base utilities in the compiled CSS. - Ideally, media queries should be grouped like this — one media block per breakpoint, with all responsive utility classes inside it:
/* Base utilities (desktop first) */
.w-1--3 {...}
.w-2--3 {...}
.w-full {...}
/* Mobile overrides (comes last) */
@media (max-width: 478px) {
.sm-w-full {...}
.sm-w-1--2 {...}
/* etc. */
}
This preserves proper cascade behavior and keeps the output clean and predictable.
The current output causes responsive utility classes to randomly fail depending on generation order, which breaks the entire concept of atomic utility classes.
Suggested fix
- Move all breakpoint wrappers below base utilities in output order.
- Group all responsive utilities into a single media query per breakpoint instead of repeating multiple
@mediablocks for every class.
This would both improve performance and ensure expected behavior consistent with Tailwind / utility-first methodology.
This could be a duplicate of DUPLICATE: CSS Class Emission Order Breaks eq Specificity Overrides, i’m not sure.
I noticed that if there’s less of the sm-full classes being applied, it does appear in the correct order in the output, but if the class was applied equal amount of times as w-1–3 for example, then i get the bug. Not sure if it makes sense or helps.
I can provide access to a development site where you can test it if you want.
It happens in V 2.1.2 but i can’t select it as a tag.