CSS inlining, by definition, will already remove unused rules by virtue of them simply... not being inlined. However, media queries and other @-rules can't be inlined.
Take, for example, the following document:
<html>
<head>
<style>
h1 { color: blue; }
h2 { color: green; }
@media (prefers-color-scheme: dark) {
h1 { color: orange !important; }
h2 { color: yellow !important; }
}
</style>
</head>
<body>
<h1>Big Text</h1>
</body>
</html>This gets optimized to the following:
<html>
<head>
<style>
@media (prefers-color-scheme: dark) {
h1 { color: orange !important; }
h2 { color: yellow !important; } /* not necessary! target for removal */
}
</style>
</head>
<body>
<h1 style="color: blue;">Big Text</h1>
</body>
</html>Note that the h2 declaration is completely unused here, and can be stripped. This would allow developers to import full(er) CSS libraries and have things intelligently removed.
CSS inlining, by definition, will already remove unused rules by virtue of them simply... not being inlined. However, media queries and other @-rules can't be inlined.
Take, for example, the following document:
This gets optimized to the following:
Note that the
h2declaration is completely unused here, and can be stripped. This would allow developers to import full(er) CSS libraries and have things intelligently removed.