ReviewOS

stacks/ts-svg

optimize: minifyStyles keeps unused rules, and inlined colors are not minified (SVGO parity)

#7
Open chris opened this 8 days ago ·
8 days ago

Comparing optimize() with SVGO 4 on stylesheet inputs turned up two differences. Both behave identically on @stacksjs/ts-css 0.1.0 and 0.3.8, so they predate the 0.1.4 dependency bump.

1. minifyStyles keeps rules that match no element

<svg xmlns="http://www.w3.org/2000/svg"><style>  .cls-1 { fill : #ff0000 ;  }  .unused { fill: blue }</style><path class="cls-1" d="M0 0h10v10z"/></svg>
  • ts-svg: <style>.unused{fill:blue}</style><path d="M0 0h10v10z" style="fill:red"/>
  • SVGO: <path d="M0 0h10v10z" style="fill:red"/>

SVGO's minifyStyles drops rules that select nothing in the document (its usage option), and then removes the empty <style>.

2. Colors inlined by inlineStyles are not minified

<svg xmlns="http://www.w3.org/2000/svg"><style>.a{fill:red} #b{stroke:blue}</style><rect class="a" width="10" height="10"/><circle id="b" r="5"/></svg>
  • ts-svg: <circle r="5" style="stroke:blue"/>
  • SVGO: <circle r="5" style="stroke:#00f"/>

SVGO shortens the color once the declaration lands in a style attribute.

Test coverage

test/svgo-fixtures.test.ts would catch both, but it skips itself unless SVGO_FIXTURES_DIR points at a checkout of SVGO's repository, and its default path doesn't exist on current machines. Pointing CI at a pinned SVGO checkout would make it a real gate. test/css-plugins.test.ts (added in 0.1.4) covers the cases that already match.

Sign in to comment on this issue.