Invalid markup generated when combined with html-loader about svg-url-loader HOT 6 CLOSED

@ubnt-marc-khouri I have to check if everything works fine with the new recent version of css-loader and noquotes=true option.
If everything will be fine, I'd like to drop noquotes option, however I also don't want to break someone's code with the new version.
My very preliminary thoughts (after Friday 🍺) are to publish a new version which will log a warning if noquotes option is used. After some time publish a major version where noquotes will be removed.

Not sure if I'll have a time for open-source this days, but I'll work on that at some point during next week.

from svg-url-loader.

Apparently, this seems not to work, cause somehow something swallows surrounding quotes of single valued attributes, such for example src attribute for <img> tags.

See this project sample at commit 2b81598, what has html-loader and svg-url-loader.

If you inspect the template index.html, you'll see an <img> tag like:

        <img id="logo" src="../assets/img/spinner.svg" alt="Loading">

After building, the output index.html has this <img> tag with an unquoted inline svg value at its src attribute, like this:

<img id=logo src=data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='

Some may say this is a bug from svg-url-loader, but the ugly truth is that you may disable svg-url-loader and the quotes still disappear.

from svg-url-loader.

I see your point.
Have you tried to use noquotes option? Will it fix your issue?

from svg-url-loader.

Hi :-)

Yeah noquotes fixes the issue, however it feels like it shouldn't be something that consumers have to know/use to result in valid markup.

I've dug into this some more, and I think the real issue here is that svg-url-loader should never wrap in quotes, and the only reason it has to for the CSS url() use-case is that css-loader is incorrectly stripping quotes for these style of data URIs.

As such I've filed webpack-contrib/css-loader#615, and hopefully once that's fixed, svg-url-loader can stop adding quotes entirely and the noquotes option/complexity can just be removed :-)

from svg-url-loader.

Hi @bhovhannes, I believe the issue is fixed in css-loader (webpack-contrib/css-loader#627), so modules such as this one don't need to be wrapping their data urls in quotes. Would you consider dropping the noquotes option, or defaulting it to true instead?

Thank you for your work on the plugin!

from svg-url-loader.

Apparently, this seems not to work, cause somehow something swallows surrounding quotes of single valued attributes, such for example src attribute for <img> tags.

See this project sample at commit 2b81598, what has html-loader and svg-url-loader.

If you inspect the template index.html, you'll see an <img> tag like:

        <img id="logo" src="../assets/img/spinner.svg" alt="Loading">

After building, the output index.html has this <img> tag with an unquoted inline svg value at its src attribute, like this:

<img id=logo src=data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='

Some may say this is a bug from svg-url-loader, but the ugly truth is that you may disable svg-url-loader and the quotes still disappear.

As a possible workaround, setting removeAttributeQuotes to false in the minimize options object, may work.

from svg-url-loader.