Process CSS in SVGs

[thewilkybarkid]

↪️ Pull Request

SVGs can include CSS, this will see it processed.

Follows #6595 (currently unmerged, so those changes appear here too) and refs #2901 (comment).

Leaving in draft for the moment as there's definitely more tests to add (and probably changes to make).

💻 Examples

A SVG with CSS will have it processed, so:

<svg viewBox="0 0 240 80" xmlns="http://www.w3.org/2000/svg">
  <style>
    @import './test.css';
  </style>
  <text>Should be red</text>
</svg>

becomes

<svg viewBox="0 0 240 80" xmlns="http://www.w3.org/2000/svg">
  <style>
    :root {
      fill: red
    }
  </style>
  <text>Should be red</text>
</svg>

🚨 Test instructions

Integration test included.

✔️ PR Todo

• Added/updated unit tests for this change
• Filled out test instructions (In case there aren't any unit tests)
• Included links to related issues/PRs

[height]

Link Height tasks by mentioning a task ID in the pull request title or description, commit messages, or comments.

💡Tip: You can also use "Close T-X" to automatically close a task when the pull request is merged.

[thewilkybarkid]

The test failures seem to be that the packager (i.e. PostHTML) doesn't produce self-closing tags, which I assume the optimizer would handle anyway? Relates to #6743 (comment), in that it's probably better to compare XML documents rather than strings.

[thewilkybarkid]

Found some conflicts with SVGO (namely plugins that use computeStyle, e.g. removeHiddenElems), hitting Empty sub-selector.

(Had to turn off removeHiddenElems, minifyStyles, convertPathData and mergePaths to get it to build.)

[thewilkybarkid]

SVGO's inlineStyles seems to be problematic too, some selectors not working when used. Seems to be an SVGO problem (svg/svgo#1359).

[devongovett]

Thanks!