"kebab" method improperly used on style value in data URL

[TheBosZ]

This is related to #203, but slightly different.

We stopped using the "important" addon because we finally excised all SASS files, but this is causing issues.

We have a style definition of this:

{
  'background-image': 'url("data:image/svg+xml;utf8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' xmlns:xlink=\'http://www.w3.org/1999/xlink\' width=\'48\' height=\'36\' viewBox=\'0 0 48 36\' fill=\'rgb(28,28,28)\'%3E%3Crect x=\'16\' y=\'12\' width=\'16\' height=\'2\' /%3E%3Crect x=\'16\' y=\'17\' width=\'16\' height=\'2\' /%3E%3Crect x=\'16\' y=\'22\' width=\'16\' height=\'2\' /%3E%3C/svg>")',
}

It generates the following style:

background-image:url("data:image/svg+xml;utf8,%3-csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='48' height='36' viewBox='0 0 48 36' fill='rgb(28,28,28)'%3E%3Crect x='16' y='12' width='16' height='2' /%3E%3Crect x='16' y='17' width='16' height='2' /%3E%3Crect x='16' y='22' width='16' height='2' /%3E%3C/svg>");

Notice how the characters "utf8,%3Csvg" got converted to "utf8,%3-csvg". That breaks the XML and causes the rule to be dropped by the browser.

The correct rule is:

background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='48' height='36' viewBox='0 0 48 36' fill='rgb(28,28,28)'%3E%3Crect x='16' y='12' width='16' height='2' /%3E%3Crect x='16' y='17' width='16' height='2' /%3E%3Crect x='16' y='22' width='16' height='2' /%3E%3C/svg>");

Note: I'm assuming that kebab is to blame here, but I don't really know. It's quite possible that kebab shouldn't be run on url() values.

[TheBosZ]

Turns out it's the prefixer plugin. I've submitted #208 to fix it.

[streamich]

:tada: This issue has been resolved in version 3.4.0 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: