CSS Minification with @container rule

Hi,

I’ve just managed to discover that Cloudflare has been the cause of a minor but very frustrating CSS issue on my website.

I have some CSS that looks like:

.filter-bar .filter-group .filter-group-inner {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@container (min-width: 600px) {
  .filter-bar .filter-group .filter-group-inner {    // A
    grid-template-columns: repeat(2, 1fr);
  }
}

This CSS was getting minified by Cloudflare and the line marked “// A” above was being converted to:

.filter-bar.filter-group.filter-group-inner {

This makes it a completely different selector, therefore causing the style rules to not be applied. I’m assuming this is a bug in your minification technique due to the relatively new @container rule.

Please can this be fixed?

Thanks

1 Like

Can confirm. Mine ends up looking like:

@import "fonts.css";@container(min-width:600px){.filter-bar.filter-group.filter-group-inner{//Agrid-template-columns:repeat(2,1fr);}}

It’s removed all the spaces.

Please open a ticket and post the ticket # here, so we can escalate. If you’re on a free plan and can’t open a ticket, let us know.

1 Like

Hi, Yep, on a free plan. I did try to submit a ticket but then posted here due to not being allowed.

I’ll most likely end up minifying myself anyway.

1 Like

Please can you update here when this issue has been resolved?

1 Like

I’ve submitted a request.

There’s now an internal engineering ticket to support this. I don’t expect I’ll get an update when it’s done, as there’s no ETA.