webpack-contrib/image-minimizer-webpack-plugin

SVGO config: deepmerge drop toString

dkrnl opened this issue · 2 comments

dkrnl commented

Hi!
thx for imagemin-webpack!

Example config from svgo#674

const imageminOptions = ['svgo', {
  plugins: [{
    cleanupIDs: {
      prefix: {
        toString() {
          this.counter = this.counter || 0;
          return `id-${this.counter++}`;
        }
      }
    }
  }],
}],

But after deepmerge -- toString removed :-(

alexander-akait commented

Thanks for issue 👍

alexander-akait commented

I think it is not bug in imagemin-webpack, i can't reproduce, all works fine, deepmerge doesn't drop toString()

Configuration:

plugins: [{
    cleanupIDs: {
      prefix: {
        toString() {
          this.counter = this.counter || 0;
          return `custom-id-${this.counter++}`;
        }
      }
    }
}],

Input:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <linearGradient id="gradient001">
      <stop offset="5%" stop-color="#F60"/>
      <stop offset="95%" stop-color="#FF6"/>
    </linearGradient>
    <text id="referencedText">
      referenced text
    </text>
    <path id="crochet" d="..."/>
    <path id="block" d="..."/>
    <path id="two" d="..."/>
    <path id="two" d="..."/>
  </defs>
  <g id="g001">
    <circle id="circle001" fill="url(#gradient001)" cx="60" cy="60" r="50"/>
    <rect fill="url('#gradient001')" x="0" y="0" width="500" height="100"/>
    <tref xlink:href="#referencedText"/>
  </g>
  <g>
    <tref xlink:href="#referencedText"/>
  </g>
  <animateMotion xlink:href="#crochet" dur="0.5s" begin="block.mouseover" fill="freeze" path="m 0,0 0,-21"/>
  <use xlink:href="#two"/>
</svg>

Output:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><linearGradient id="custom-id-6a"><stop offset="5%" stop-color="#F60"/><stop offset="95%" stop-color="#FF6"/></linearGradient></defs><circle fill="url(#custom-id-6a)" cx="60" cy="60" r="50"/><path fill="url('#custom-id-6a')" d="M0 0h500v100H0z"/><animateMotion xlink:href="#custom-id-2c" dur="0.5s" begin="custom-id-3d.mouseover" fill="freeze" path="m 0,0 0,-21"/><use xlink:href="#custom-id-4e"/></svg>

Remember it is change only definitions, not all id, you can find more information in svgo repo