Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

inlineStyles plugin keeps unused style when onlyMatchedOnce: false #1761

Closed
mahnunchik opened this issue Apr 6, 2023 · 8 comments
Closed
Labels

Comments

@mahnunchik
Copy link

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:

  1. Set onlyMatchedOnce to false
  2. 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.

@mahnunchik mahnunchik added the bug label Apr 6, 2023
@mahnunchik
Copy link
Author

Maybe there is another way to clean unused classes?

@mahnunchik
Copy link
Author

It seems it is related #1743

@mahnunchik
Copy link
Author

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

@SethFalco
Copy link
Member

SethFalco commented Sep 25, 2023

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 borked
Original 1.631 KiB
v3.0.2 31 ms 12.9% 1.42 KiB
main (b15da27) 27 ms 28.8% 1.161 KiB

@mahnunchik
Copy link
Author

It is fixed! Looking forward for the release 😉

@mahnunchik
Copy link
Author

@SethFalco when is the release planned?

@SethFalco
Copy link
Member

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:

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

@SethFalco
Copy link
Member

@mahnunchik

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants