inlineStyles plugin keeps unused style when onlyMatchedOnce: false #1761

mahnunchik · 2023-04-06T10:07:48Z

Describe the bug

I've faced with strange side effect that inlineStyles plugin keeps unused style when option onlyMatchedOnce: false.

To Reproduce
Steps to reproduce the behavior:

Set onlyMatchedOnce to false
Optimize svg image

Expected behavior
All styles inlined and removed from <style> element.

Actual behavior
Unused style present in <style> element.

Original svg

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 26.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 120.1 138.8" style="enable-background:new 0 0 120.1 138.8;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#002D74;}
	.st1{fill:url(#SVGID_1_);}
	.st2{fill:url(#SVGID_00000061444671184501762360000006264132297249298069_);}
</style>
<path class="st0" d="M60.1,0L0,34.7v69.4l60.1,34.7l60-34.7V34.7L60.1,0z M102.3,93.8l-42.3,24.4L17.8,93.8V45l42.3-24.4L102.3,45
	V93.8z"/>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="90.1166" y1="1.0868" x2="90.1166" y2="70.4884" gradientTransform="matrix(1 0 0 -1 0 139.8898)">
	<stop  offset="0" style="stop-color:#002D74"/>
	<stop  offset="1" style="stop-color:#002D74;stop-opacity:0"/>
</linearGradient>
<path class="st1" d="M60.1,138.8l60-34.7V34.7L60.1,0v20.6L102.3,45v48.9l-42.3,24.4V138.8z"/>
<linearGradient id="SVGID_00000034064843000503835000000005854543727190432132_" gradientUnits="userSpaceOnUse" x1="30.0233" y1="139.8898" x2="30.0233" y2="70.4884" gradientTransform="matrix(1 0 0 -1 0 139.8898)">
	<stop  offset="0" style="stop-color:#002D74"/>
	<stop  offset="1" style="stop-color:#002D74;stop-opacity:0"/>
</linearGradient>
<path style="fill:url(#SVGID_00000034064843000503835000000005854543727190432132_);" d="M60,0L0,34.7v69.4l60,34.7v-20.6L17.8,93.8
	V44.9L60,20.6V0z"/>
<path class="st0" d="M88.1,85.6l-28,16.2L32,85.6V53.2L60.1,37l28,16.2L76.4,60l-16.4-9.5L43.7,60v18.9l16.4,9.5l16.4-9.5L88.1,85.6
	z"/>
</svg>

Optimized svg with onlyMatchedOnce: false

<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" id="Layer_1" x="0" y="0" style="enable-background:new 0 0 120.1 138.8" version="1.1" viewBox="0 0 120.1 138.8">
  <style>
    .st2{fill:url(#SVGID_00000061444671184501762360000006264132297249298069_)}
  </style>
  <path d="M60.1 0 0 34.7v69.4l60.1 34.7 60-34.7V34.7L60.1 0zm42.2 93.8L60 118.2 17.8 93.8V45l42.3-24.4L102.3 45v48.8z" style="fill:#002d74"/>
  <linearGradient id="SVGID_1_" x1="90.117" x2="90.117" y1="1.087" y2="70.488" gradientTransform="matrix(1 0 0 -1 0 139.89)" gradientUnits="userSpaceOnUse">
    <stop offset="0" style="stop-color:#002d74"/>
    <stop offset="1" style="stop-color:#002d74;stop-opacity:0"/>
  </linearGradient>
  <path d="m60.1 138.8 60-34.7V34.7L60.1 0v20.6L102.3 45v48.9L60 118.3v20.5z" style="fill:url(#SVGID_1_)"/>
  <linearGradient id="SVGID_00000034064843000503835000000005854543727190432132_" x1="30.023" x2="30.023" y1="139.89" y2="70.488" gradientTransform="matrix(1 0 0 -1 0 139.89)" gradientUnits="userSpaceOnUse">
    <stop offset="0" style="stop-color:#002d74"/>
    <stop offset="1" style="stop-color:#002d74;stop-opacity:0"/>
  </linearGradient>
  <path d="M60 0 0 34.7v69.4l60 34.7v-20.6L17.8 93.8V44.9L60 20.6V0z" style="fill:url(#SVGID_00000034064843000503835000000005854543727190432132_)"/>
  <path d="m88.1 85.6-28 16.2L32 85.6V53.2L60.1 37l28 16.2L76.4 60 60 50.5 43.7 60v18.9l16.4 9.5 16.4-9.5 11.6 6.7z" style="fill:#002d74"/>
</svg>

st2 class not used and already inlined but present in <styles> element.

Optimized svg with onlyMatchedOnce: true (default)

<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" id="Layer_1" x="0" y="0" style="enable-background:new 0 0 120.1 138.8" version="1.1" viewBox="0 0 120.1 138.8">
  <style>
    .st0{fill:#002d74}
  </style>
  <path d="M60.1 0 0 34.7v69.4l60.1 34.7 60-34.7V34.7L60.1 0zm42.2 93.8L60 118.2 17.8 93.8V45l42.3-24.4L102.3 45v48.8z" class="st0"/>
  <linearGradient id="SVGID_1_" x1="90.117" x2="90.117" y1="1.087" y2="70.488" gradientTransform="matrix(1 0 0 -1 0 139.89)" gradientUnits="userSpaceOnUse">
    <stop offset="0" style="stop-color:#002d74"/>
    <stop offset="1" style="stop-color:#002d74;stop-opacity:0"/>
  </linearGradient>
  <path d="m60.1 138.8 60-34.7V34.7L60.1 0v20.6L102.3 45v48.9L60 118.3v20.5z" style="fill:url(#SVGID_1_)"/>
  <linearGradient id="SVGID_00000034064843000503835000000005854543727190432132_" x1="30.023" x2="30.023" y1="139.89" y2="70.488" gradientTransform="matrix(1 0 0 -1 0 139.89)" gradientUnits="userSpaceOnUse">
    <stop offset="0" style="stop-color:#002d74"/>
    <stop offset="1" style="stop-color:#002d74;stop-opacity:0"/>
  </linearGradient>
  <path d="M60 0 0 34.7v69.4l60 34.7v-20.6L17.8 93.8V44.9L60 20.6V0z" style="fill:url(#SVGID_00000034064843000503835000000005854543727190432132_)"/>
  <path d="m88.1 85.6-28 16.2L32 85.6V53.2L60.1 37l28 16.2L76.4 60 60 50.5 43.7 60v18.9l16.4 9.5 16.4-9.5 11.6 6.7z" class="st0"/>
</svg>

As expected all styles used once was inlined.

Desktop (please complete the following information):

SVGO Version 3.0.2
NodeJs Version v18.14.2
OS: macOS 13.2.1

Additional context

// svgo.config.mjs
export default {
  multipass: true,
  js2svg: {
    indent: 2,
    pretty: true,
  },
  
  plugins: [
    {
      name: 'preset-default',
      params: {
        overrides: {
          inlineStyles: {
            onlyMatchedOnce: false,
          },
        },
      },
    },
  ],
};

Note: minifyStyles doesn't help too.

The text was updated successfully, but these errors were encountered:

mahnunchik · 2023-05-03T12:10:08Z

Maybe there is another way to clean unused classes?

mahnunchik · 2023-05-03T12:11:18Z

It seems it is related #1743

mahnunchik · 2023-09-25T22:27:42Z

@SethFalco could you please check is this issue is fixed by #1800

SethFalco · 2023-09-25T23:00:51Z

Ahh, thanks for pinging me. I think this might indeed be fixed as well. Can you confirm the results and close the issue if it's resolved?

svgo.config.js

module.exports = {
  multipass: true,
  js2svg: {
    indent: 2,
    pretty: true,
  },
  plugins: [
    {
      name: 'preset-default',
      params: {
        overrides: {
          inlineStyles: {
            onlyMatchedOnce: false,
          },
        },
      },
    },
  ],
};

I get this with main (b15da27):

<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="enable-background:new 0 0 120.1 138.8" viewBox="0 0 120.1 138.8">
  <path d="M60.1 0 0 34.7v69.4l60.1 34.7 60-34.7V34.7L60.1 0zm42.2 93.8L60 118.2 17.8 93.8V45l42.3-24.4L102.3 45v48.8z" style="fill:#002d74"/>
  <linearGradient id="a" x1="90.117" x2="90.117" y1="1.087" y2="70.488" gradientTransform="matrix(1 0 0 -1 0 139.89)" gradientUnits="userSpaceOnUse">
    <stop offset="0" style="stop-color:#002d74"/>
    <stop offset="1" style="stop-color:#002d74;stop-opacity:0"/>
  </linearGradient>
  <path d="m60.1 138.8 60-34.7V34.7L60.1 0v20.6L102.3 45v48.9L60 118.3v20.5z" style="fill:url(#a)"/>
  <linearGradient id="b" x1="30.023" x2="30.023" y1="139.89" y2="70.488" gradientTransform="matrix(1 0 0 -1 0 139.89)" gradientUnits="userSpaceOnUse">
    <stop offset="0" style="stop-color:#002d74"/>
    <stop offset="1" style="stop-color:#002d74;stop-opacity:0"/>
  </linearGradient>
  <path d="M60 0 0 34.7v69.4l60 34.7v-20.6L17.8 93.8V44.9L60 20.6V0z" style="fill:url(#b)"/>
  <path d="m88.1 85.6-28 16.2L32 85.6V53.2L60.1 37l28 16.2L76.4 60 60 50.5 43.7 60v18.9l16.4 9.5 16.4-9.5 11.6 6.7z" style="fill:#002d74"/>
</svg>

Metrics

SVG	time	% reduced	final size
Original			1.631 KiB
v3.0.2	31 ms	12.9%	1.42 KiB
main (`b15da27`)	27 ms	28.8%	1.161 KiB

mahnunchik · 2023-09-25T23:22:48Z

It is fixed! Looking forward for the release 😉

mahnunchik · 2023-09-29T18:02:06Z

@SethFalco when is the release planned?

SethFalco · 2023-09-29T18:07:42Z

I've messaged one of the other maintainers about it this week.

I don't have permissions to make releases yet. I just joined as maintainer last week, so as soon as they have time they'll review what I've done and either make the release or grant me permission to.

Reference:

Call for new maintainer(s) #1320 (comment)

While the release is pending, I'm working on revamping our documentation. 👍🏽

SethFalco · 2023-11-08T22:58:02Z

@mahnunchik

I've just released v3.0.3 on npm! Feel free to open a new issue if you run into any problems. 👍🏽

mahnunchik added the bug label Apr 6, 2023

SethFalco mentioned this issue Sep 25, 2023

fix(minifyStyles): pass empty arrays for usage #1800

Merged

mahnunchik closed this as completed Sep 25, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

inlineStyles plugin keeps unused style when onlyMatchedOnce: false #1761

inlineStyles plugin keeps unused style when onlyMatchedOnce: false #1761

mahnunchik commented Apr 6, 2023

mahnunchik commented May 3, 2023

mahnunchik commented May 3, 2023

mahnunchik commented Sep 25, 2023

SethFalco commented Sep 25, 2023 •

edited

mahnunchik commented Sep 25, 2023

mahnunchik commented Sep 29, 2023

SethFalco commented Sep 29, 2023

SethFalco commented Nov 8, 2023

inlineStyles plugin keeps unused style when onlyMatchedOnce: false #1761

inlineStyles plugin keeps unused style when onlyMatchedOnce: false #1761

Comments

mahnunchik commented Apr 6, 2023

mahnunchik commented May 3, 2023

mahnunchik commented May 3, 2023

mahnunchik commented Sep 25, 2023

SethFalco commented Sep 25, 2023 • edited

Metrics

mahnunchik commented Sep 25, 2023

mahnunchik commented Sep 29, 2023

SethFalco commented Sep 29, 2023

SethFalco commented Nov 8, 2023

SethFalco commented Sep 25, 2023 •

edited