CSS variables and media queries have been removed

[ahaoboy]

Describe the bug CSS variables and media queries have been removed

To Reproduce

svgo ./a.svg -o ./b.svg

<svg width="300" height="100">
<style>
@media (prefers-color-scheme: dark) {
    body {
        --text-color: white;
        --background-color: black;
    }
}

@media (prefers-color-scheme: light) {
    body {
        --text-color: black;
        --background-color: white;
    }
}

body {
    color: var(--text-color);
    background-color: var(--background-color);
}

</style>
    <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" id="helloWorldText">Hello World</text>
</svg>

Expected behavior Preserve CSS variables and media queries

Screenshots

<svg width="300" height="100"><text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">Hello World</text></svg>

Desktop (please complete the following information):

• SVGO Version 3.3.2
• NodeJs Version 22
• OS: win11

Additional context

Similar issues: https://github.com/svg/svgo/issues/1834

[johnkenny54]

In the example with this issue, it seems OK to remove the styles because they aren't used (they target the body element, and there is none).

The example file in issue #1834 still doesn't work in SVGO 4. There are a number of related issues which haven't been addressed.

I've been working on a spinoff of SVGO 4 which addresses some of the bugs and performance issues - https://www.npmjs.com/package/svgo-ll - that version handles the file in issue 1834 correctly.