nano-css
nano-css copied to clipboard
"important" addon adds "!important" in the middle of a data url
Because it's just looking for a semicolon, it's inserting an "!important" in the middle of this url:
{
'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>")',
}
Result:
background-image:url("data:image/svg+xml !important;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>") !important;
Note that the part xml;utf8, got converted to xml !important;utf8