svg/svgo

Error if a selector with `not([attribute-name])` is present in the `style`

what1s1ove opened this issue · 3 comments

Describe the bug
If a selector with :not([attribute-name]) is present in the style tag, an error occurs.

Example of SVG:

<svg width="242" height="167" xmlns="http://www.w3.org/2000/svg">
  <style>
    path:not([fill]) {
      fill: #000000;
    }
    @media (prefers-color-scheme: dark) {
      path:not([fill]) {
        fill: #ffffff;
      }
    }
  </style>
  <path fill="red" d="M196.9 70.1001C199.7 75.7001 207.6 76.2 210.9 70.8L229.3 41.4001C234.3 33.5001 237 23.5 233.6 14.8C232.4 11.8 228.2 6.80005 221.3 6.80005C210.9 6.80005 206.5 12.9001 204.6 17.7001C204.1 19.1001 202.1 19.2 201.5 17.8C199.3 12.9 194.3 6.80005 183.8 6.80005C178.9 6.80005 173.7 10.9 172 14.8C167.9 24.3 173.2 33.8001 178.5 41.2001C178.5 41.2001 189.7 58.8001 192.9 63.6001C194.5 65.9001 195.8 68.0001 196.9 70.1001Z"/>
  <path d="M80.7999 166.2C80.6999 166.2 80.6 166.2 80.5 166.2C78.1 166.1 76 164.7 75 162.6L0.699952 9.70002C-0.900048 6.50002 0.499967 2.6 3.69997 1C6.89997 -0.599997 10.7999 0.800003 12.3999 4L81.6 146.3L101.2 115C103.1 112 107.1 111 110.2 112.9C113.2 114.8 114.2 118.8 112.3 121.9L86.5 163.1C85.2 165.1 83.0999 166.2 80.7999 166.2Z" />
  <path d="M155.2 166.2C155.1 166.2 155 166.2 154.9 166.2C152.5 166.1 150.4 164.7 149.4 162.6L74.9998 9.70007C73.3998 6.50007 74.7998 2.60006 77.9998 1.00006C81.1998 -0.599939 85.0998 0.800061 86.6998 4.00006L155.9 146.3L186.5 97.4001C195.9 79.7001 193.1 75.5 187.6 67.3C184.5 62.6 174.3 46.7001 173.1 44.9001C169.4 39.7001 159.9 26.1001 166 12.2001C168.5 6.40007 175.9 0.300049 183.7 0.300049C192.5 0.300049 198.7 3.70007 202.7 8.10007C207.1 3.00007 213.5 0.300049 221.2 0.300049C230.6 0.300049 237.3 6.60006 239.5 12.5001C243.3 22.3001 241.5 34.1001 234.6 44.9001L197.6 103.9C197.6 103.9 197.6 103.9 197.6 104C197.4 104.3 197.3 104.5 197.1 104.8L160.5 163.1C159.5 165.1 157.4 166.2 155.2 166.2ZM183.8 13.4001C181.8 13.4001 178.7 15.7001 178 17.5001C175.8 22.6001 177.5 28.6001 183.9 37.6001C184 37.7001 184 37.8001 184.1 37.9001C184.2 38.1001 195.3 55.5001 198.4 60.1001C200.6 63.4001 202.6 66.5001 203.9 69.9001L223.8 38.1001C228.4 30.9001 229.8 23.1 227.6 17.3C227.3 16.5 225.3 13.5001 221.4 13.5001C211.3 13.5001 210 21.7001 209.9 24.2001C209.8 27.6001 207.1 30.3001 203.7 30.4001C200.3 30.6001 197.4 28.0001 197 24.7001C196.6 22.7001 194.7 13.4001 183.8 13.4001Z" />
</svg>

To Reproduce
Steps to reproduce the behavior:

  1. Use any SVG with default configuration (svgo.optimize(content).data)
  2. Try to optimize svg with :not([attribute-name]) in style tag.
  3. Then an error will appear: 'item doesn't belong to list.'

Expected behavior
There should be no errors as this is a valid selector.

Desktop (please complete the following information):

  • SVGO Version [3.0.4]
  • NodeJs Version [18.18.0]
  • OS: [MacOS 14]

Hey! Thanks for reporting the issue.
This has been resolved in main and will be included in the next release of SVGO.

SVGO v3.1.0 has just been released. If you run into any problems, feel free to let me know here!

Hey @SethFalco ! It works! Thank you so much!