CSS Nesting Syntax Not Working

[CaperAsDev]

Hi,

This is my first time reporting an issue, so I hope this is the right place to do it.

Issue:
After including compress in my project, I noticed that some styles using CSS nesting syntax stopped working. I tried setting CSS to false in the integration config, but it didn't resolve the issue. Eventually, I removed the integration, and the styles worked correctly again.

This is just an example of some of the nesting styles that did't work.

[lewisakura]

I recently encountered this issue myself and found (after some brainstorming with Astro support <3) that the csso compressor seems to be way too out of date to understand what nested rules are. LightningCSS seems to be fine however, so you can just disable csso and force LightningCSS and things should work properly:

compress({
	CSS: {
		csso: false,
		lightningcss: {
			minify: true,
		},
	},
}),

[aleksa-codes]

I recently encountered this issue myself and found (after some brainstorming with Astro support <3) that the csso compressor seems to be way too out of date to understand what nested rules are. LightningCSS seems to be fine however, so you can just disable csso and force LightningCSS and things should work properly:

compress({
CSS: {
csso: false,
lightningcss: {
minify: true,
},
},
}),

This also fixes a bug related to Astro 7, where Tailwind CSS media query breakpoints would not work in production after upgrading from Astro 6. Thanks.

[nlxdodge]

I recently encountered this issue myself and found (after some brainstorming with Astro support <3) that the csso compressor seems to be way too out of date to understand what nested rules are. LightningCSS seems to be fine however, so you can just disable csso and force LightningCSS and things should work properly:
compress({
CSS: {
csso: false,
lightningcss: {
minify: true,
},
},
}),

This also fixes a bug related to Astro 7, where Tailwind CSS media query breakpoints would not work in production after upgrading from Astro 6. Thanks.

I indeed had the same problem in my project. Eventually I found out compress was removing the media queries. But the fix from lewisakura works for now.

Maybe it's a good idea to make lightning CSS the new default?

Edit: I checked CSSO and it didn't have any update for over 3 years on GitHub and over 4 years on NPM. Compress uses 5.0.5, which is also the latest (4 year old) version.