Css gets broken on cloudflare because of minification

[ertucode]

Describe the bug

Auto minify feature of cloudflare was breaking css that had the @layer declarations. This is not really an issue on the primeng side, but It's been broken on our testing environment for 6 months and I've only been able to figure out this issue. So, I thought I would post it here to help. Maybe a warning in the docs could be useful as well. You can check if your css is minified by looking at the response headers.

Environment

"primeng": "^17.9.0"
"primeflex": "^3.3.0",

Reproducer

No response

Angular version

17.2.3

PrimeNG version

17.9.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

22.2.0

Browser(s)

No response

Steps to reproduce the behavior

1. Run locally everything is fine
2. Deploy on cloudflare and your site gets broken sometimes
3. Check response headers to see if they contain Cf-Bgj:minify

Expected behavior

Cloudflare doesn't break the css

[qwadrox]

Isn't it possible to disable the auto minify stuff?

1. Log into the Cloudflare dashboard with your Cloudflare account
2. Select your domain name
3. Navigate to Speed → Optimization → scroll down a bit and you will see the section “Auto Minify” - there should be the button to toggle it on/off

Seems like you're not the only one: https://community.cloudflare.com/t/auto-minify-css-problems/560873

[ertucode]

It is possible and we have already disabled it but I just wanted to give a heads up to people who might have the same issue.