[Feature] Make use of CSS Nesting capabilities

[mfranzke]

Problem Description

The resulting CSS code becomes quite large and might be possible to get further reduced.

Proposed Solution

As CSS Nesting is a thing for quite a while now and supported by all major browsers, we could as well transform the declarations to a nested @media or @supports declaration instead of duplicating the CSS rule with the same selector. This would further simplify the resulting CSS code.

CSS Example

Currently

.responsive {
	width: 50%;
}
@media (max-width: 768px) {
	.responsive {
		width: 100%;
	}
}

Optimized

.responsive {
	width: 50%;

	@media (max-width: 768px) {
		width: 100%;
	}
}

Alternatives Considered

No response

Impact Level

Medium - Would improve workflow

Breaking Change

• This feature would require breaking changes to existing API
• This feature could be implemented without breaking changes

Use Cases

No response

Additional Context

No response

Checklist

• I have searched the existing issues to make sure this is not a duplicate
• I have reviewed the project roadmap and this feature is not already planned
• I would be willing to contribute to implementing this feature

[mfranzke]

we should wait with implementing this until macOS 13 (Ventura) becomes EOL at approx. the end of October 2025, as this was still providing support for Safari < version 16.5. Firefox extended EOL of ESR 115 version is expected in March 2026, so that's the earliest to release this.