inlineStyles not capturing matching classes

[abejfehr]

Describe the bug
I've given many many paths in an Inkscape document classes so that I could style them similarly.

Unfortunately, the SVG renderer I'm using doesn't support stylesheets so I need to have them as inline styles.

Apparently the inlineStyles plugin is what I'm looking for, but it doesn't seem to be doing anything for my SVG. I can see that code in the inlineStyles plugin is executed and it fails to find matches at this point.

To Reproduce

Here's an SVG that it fails on:

<svg
  xmlns="http://www.w3.org/2000/svg"
  xml:space="preserve"
  id="svg5"
  width="1570.062"
  height="2730"
  version="1.1"
  viewBox="0 0 415.412 722.312"
>
  <style id="style771">
    .segment {
      stroke-width: 2.5;
      stroke: #0085b2;
      fill: none;
    }

    .segment.minor {
      stroke-width: 1.5;
      stroke: #15c6aa;
    }
  </style>
  <g id="layer1" transform="translate(200.662 362.87)">
    <path id="path254" d="M62.887-325.208h67.346" class="segment" />
    <path id="path1031" d="M163.502-303.979h3.762" class="segment minor" />
  </g>
</svg>

As you can see, there is a stylesheet with rules for both .segment and segment.minor, and there exist a path that matches each of those.

Here's the program I used to try to inline these:

const { optimize } = require("svgo");

const result = optimize(offendingSvgString,
  {
    multipass: true,
    plugins: [
      "removeRasterImages",
      {
        name: "preset-default", // this preset includes inlineStyles
      },
    ],
  }
);

Expected behavior
I expected my class definitions to be inlined as style attributes for all my paths.

Desktop (please complete the following information):

• SVGO Version: 3.0.2
• NodeJs Version: v19.1.0
• OS: macOS Ventura

[SethFalco]

I'm trying to reproduce this issue, but not having the same one as you.

This is the output when I use your file and config, with the SVGO v3.0.2 JavaScript API on Node v19.1.0:

<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="1570.062" height="2730" viewBox="0 0 415.412 722.312">
  <path d="M62.887-325.208h67.346" style="stroke-width:2.5;stroke:#0085b2;fill:none" transform="translate(200.662 362.87)"/>
  <path d="M163.502-303.979h3.762" class="minor" style="stroke-width:1.5;stroke:#15c6aa" transform="translate(200.662 362.87)"/>
</svg>

I do get a different issue, which is that the class minor hasn't been removed from the second path for some reason. But the styles themselves are being inlined correctly.

Can you still reproduce this?

[abejfehr]

It's been a while and I'm afraid this isn't really relevant to me anymore so I don't have a reproduction handy.

You can feel free to close the issue if you'd like and I can reopen it if this is ever a blocker for me again

[SethFalco]

You can feel free to close the issue if you'd like and I can reopen it if this is ever a blocker for me again

Sure! Sorry it took so long to come back to you on this, though.
Feel free to open another if anything else comes up. Ideally, it'll be looked at in a timely manner this time.