Svgo: inlineStyles loses styles

[GreLI]

Input (source):

<svg id="Layer_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1060 768">
    <style>
        .st0{fill:none;stroke:#e7eff3;stroke-width:.9552;stroke-linejoin:bevel;stroke-miterlimit:10}.st1{fill:#e7eff3}
    </style>
    <circle class="st0" cx="174" cy="96.2" r="2.8"/>
    <path class="st0" d="M474.7 311.7l60.1 60.1 60.2-60.1-60.2-60.2-60.1 60.2m270.6-90.2l-90.2 90.2h60.1l90.2-90.2zM625 161.3l-90.2 90.2H595l90.2-90.2zm240.6 180.4l-90.2 90.2v-60.1l90.2-90.2z"/>
    <path transform="rotate(-45.001 640.058 266.576)" class="st0" d="M618.8 224h42.5v85h-42.5z"/>
    <path transform="rotate(-45.001 850.52 296.645)" class="st0" d="M829.3 254.1h42.5v85h-42.5z"/>
    <path class="st0" d="M202.2 113.5L142 173.6l-30-30.1 30-30zM112 23.3L51.8 83.4l30.1 30.1L112 83.4zm422.8 348.5l60.2-60.1-30.1-30.1-30.1 30.1zM142 173.6L51.8 83.4l-30 30.1 60.1 60.1z"/>
    <path class="st0" d="M142 173.6L51.8 83.4l30.1-30.1 60.1 60.2zm603.3-12.3l90.2 90.2 30.1-30-60.2-60.2zm-60.1 60.2l90.2 90.2 30-30.1-60.1-60.1z"/>
    <path class="st0" d="M655.1 131.3l90.2 90.2-30.1 30-60.1-60.1zM595 311.7l-90.2-90.2 30-30.1 60.2 60.1z"/>
    <path class="st0" d="M534.8 251.5l90.2-90.2-30-30-60.2 60.1zm120.3 120.3l-90.2-90.2-30.1 30.1 60.2 60.1zm210.5-30.1l60.1 60.2v-60.2l-60.1-60.1zm0 0l-60.2 60.2v-60.2l60.2-60.1zM21.8 173.6l60.1 60.1v-60.1l-60.1-60.1z"/>
    <path transform="rotate(-45.001 901.964 670.654)" class="st0" d="M880.7 649.4h42.5v42.5h-42.5z"/>
    <path class="st0" d="M277.5 114.2l60.2 60.2 30-30.1-30-30.1zM1022.2 4.1L932 94.3l30.1 30.1 60.1-60.2zM841.8 640.6l90.2-90.2 30.1 30-60.1 60.2z"/>
    <path class="st0" d="M992.2 670.6L902 580.4l30-30 60.2 60.1zM902 64.2l90.2 90.2-30.1 30.1-60.1-60.1zm-534.3 20l90.2 90.2-30 30-60.2-60.1z"/>
    <path class="st0" d="M427.9 204.4l-90.2-90.2 30-30 60.2 60.1zM902 640.6v60.1m-30.1-150.3v60.1l30.1 30.1 30-30.1zM367.7 84.2h60.2l30-30.1-30-30.1z"/>
    <path class="st0" d="M307.6 84.2h60.1l30.1-30.1L367.7 24z"/>
    <circle class="st1" cx="367.7" cy="84.2" r="2.8"/>
    <circle class="st1" cx="902" cy="640.6" r="2.8"/>
    <path class="st0" d="M427.9 144.3h-60.2"/>
    <path transform="rotate(-45.001 66.869 571.51)" class="st0" d="M45.6 529h42.5v85H45.6z"/>
    <path class="st0" d="M112 586.5l90.2-90.2-30.1-30-60.1 60.1zm0 0l-90.2-90.2 30-30 60.2 60.1zm0 60.2l-60.2-60.2H112l60.1 60.2zm482.8 53.9l-60.2-60.1-30 30 30 30.1zm60.1-60.1l-90.2-90.2-30.1 30 60.2 60.2z"/>
    <path class="st0" d="M444.4 670.5l90.2-90.2-30-30-60.2 60.1zm-206.5-331l90.2 90.2 30-30.1-60.1-60.1z"/>
    <path class="st0" d="M328.1 429.7l-90.2-90.2-30.1 30 60.1 60.2z"/>
    <path class="st0" d="M388.2 489.8L298 399.6l30.1-30.1 60.1 60.2zm266.7 210.8l-90.2-90.2-30.1 30.1 60.2 60.1zm-30.1 30.1l-90.2-90.2-30 30 60.1 60.2z"/>
    <path class="st0" d="M654.9 640.5l-90.2 90.2 30.1 30 60.1-60.1zm60.1 0l-60.1 60.1v-60.1l60.1-60.2z"/>
    <path class="st0" d="M504.6 670.5v60.2h60.1z"/>
    <circle class="st1" cx="594.8" cy="700.6" r="2.8"/>
    <circle class="st1" cx="962.1" cy="124.4" r="2.8"/>
    <circle class="st1" cx="21.8" cy="113.5" r="2.8"/>
    <circle class="st1" cx="112" cy="586.5" r="2.8"/>
    <circle class="st1" cx="237.9" cy="339.5" r="2.8"/>
    <circle class="st1" cx="925.7" cy="341.7" r="2.8"/>
    <circle class="st1" cx="474.7" cy="311.7" r="2.8"/>
    <circle class="st1" cx="534.6" cy="580.2" r="2.8"/>
</svg>

[RTC1]

Also experiencing this issue.

[pavel-popov-jr]

+1

[hzlmn]

Have same problem :crying_cat_face:

[hzlmn]

@GreLI Do you have some time to look on it or i can try to submit a patch?

[strarsis]

@GreLI: So the original from designer.svg in the linked Gist is the input and
the SVG markup you put into this issue is the (inccorect) output?
A test would be great for further debugging.

@RTC1, @pavel-popov-jr, @hzlmn:
Input SVG samples would be great.

[pavel-popov-jr]

input https://gist.github.com/pavel-popov-jr/2a91d9e3145606dd245cbaf3886a5ea7
output https://gist.github.com/pavel-popov-jr/facb8a7322d805d472b7132c4d84e036

[pavel-popov-jr]

I'm using gulp-imagemin with default settings

[dartess]

and yet incorrect svg
input https://pastebin.com/raw/UKkP1m4H
output https://pastebin.com/raw/xJHVFZJN

[strarsis]

I wrote a test and found out that it is actually a quite different issue, by default the inlineStyles plugin option onlyMatchedOnce is true - which results in only inlining selectors that matched once (this feature had been discussed in the inlineStyles PR). Of course, this should not break the SVG - so the bug is rather that with onlyMatchedOnce enabled, the processing isn't completely skipped, the classes/ids are still stripped.

So if you want to inline _everything_ you should disable (set to false) the onlyMatchedOnce option anyway - this also skips the whole issue. It still has to be fixed though...

@GreLI: Would it be a good idea having the option onlyMatchedOnce turned off by default instead
– inlining everything that matches?

[strarsis]

@GreLI: Fix ready https://github.com/svg/svgo/pull/828.

[GreLI]

v1.0.2 with the fix has been just released.