Hugo: Keep single/double quotes in `--minify`

[h-enk]

--minify strips out all superfluous quotes. This breaks Netlify Forms handling, which is checking for name="field-name", and fails on name=field-name.

Yes, Netlify should be able to process valid HTML. But, it would be nice to have a setting in Hugo to keep single/double quotes, OR change the defaults to have 'em.

In my opion, minifying HTML should be less aggressive, and be just about removing unnecessary white spaces and comments.

See also: https://github.com/tdewolff/minify#html

[bep]

If the minify library have such options, we can fix it here, but as I'm not about to write a new HTML minifie from scratch, you need to take it with the upsream library if that does not support it.

[h-enk]

Ah, I see now it is not an option - I thought it was, since it mentioned strip superfluous quotes, or uses single/double quotes whichever requires fewer escapes.

I will take it upstream. Thanks

[davidsneighbour]

Isn't the bug, that Netlify is not parsing HTML right?

[h-enk]

@bep: the option is there now: https://github.com/tdewolff/minify/commit/316bf2a5aa4d1c9136053603ced0664abd75e5b5

[apoorvmote]

Any updates on this. I am building amp website. When I build with hugo --minify the Amp validator is saying this is not valid amp website. And when I build without --minify just using hugo it is a valid amp website.
Now the option is available on minify how do we use it with hugo??

[apoorvmote]

I got tired of waiting around. I had already installed go for go modules. So installed minify in go dir.
go get github.com/tdewolff/minify/cmd/minify
Then I have to manually minify after hugo build
minify -r -o output/ .\public\ --html-keep-quotes --html-keep-document-tags
-r is for recursive. So any file in public & any file in subfolder of public
-o is for output dir output/
--html-keep-document-tags Preserve html, head and body tags
--html-keep-quotes Preserve quotes around attribute values
Its working (valid amp page) but its manual process that can be automated somehow.

[hithismani]

This is a huge problem for me too. The --minify command makes the quotations around the OG tags on my sites go missing, rendering them useless for social sharing platforms. I've solved it temporarily by using an npm package called htmlminifier, but it now increases by build time :(

[apoorvmote]

quotations around the OG tags on my sites go missing

That's interesting.
Because I was using html-minifier and I have tons of JSON-ld structured data for search engines. html-minifier doesn't support JSON minify. It leaves huge chunks of blank space & with tdewolff minify I am reducing to half of its original file size (just the json snippet).
I started with html-minifier because 2 million weekly downloads. I mean who can resist that.
I havn't started adding OG tags. I may go back to html-minifier when I do.

[hithismani]

It leaves huge chunks of blank space & with tdewolff minify I am reducing to half of its original file size (just the json snippet).

That's sadly true. I forgot to bring that up. The closest I think you could reach towards resolving this is to set "Preserve line-breaks" into 'false' within the script options. (View this sandbox) if you're struggling to find the sweet spot of options that work for you.

Do feel free to reach out to me if you'd like help with the settings that worked for me.

I havn't started adding OG tags.

I haven't used tdewolff minify yet, but if you could test how the OG Tags are minified and let me know that'd be great!

What you're looking for (example) is your og:image tag not being stripped off of its quotation marks:

<meta property="og:image" content="http://example.com/img.jpg" />

should not become:

<meta property=og:image content=http://example.com/img.jpg />

If that works for you, then tdewolff minify is the perfect replacement
😁

Also worth pointing out this other recommendation.

[apoorvmote]

<meta property="og:image" content="http://example.com/img.jpg">

I tested it for you with tdewolff minify. This is the output after minify.

I am kind of speed snob. tdewolff minify will minify in less than 1 second (probably less than 100ms). It feels like realtime. I hate it when you have to wait 2 whole second or more for html-minifier. And tdewolff minify keeps double quotes on all tags.

[hithismani]

That's fantastic! I'm going to give this a shot now. Would you mind sharing the resource/config you used? Hosting my sites on Netlify! :)

[apoorvmote]

Would you mind sharing the resource/config you used?

I am not sure what you mean?. I host everything on AWS. I have few things with other companies like vimeo because the AWS alternative is too expensive. Otherwise from domain to dns to hosting & everything else is AWS.

[h-enk]

In summary, Netlify Forms, Google Structured Data and AMP (and most likely other parties) fail with having stripped out all superfluous quotes.

Yes, these parties should be able to process valid HTML. But, since that is not the case, I think you should manage your environments. So, that's why I raised an issue with @tdewolff and he implemented the option.

Now, we could incorporate this option: e.g. with no stripping as a default, or e.g. with no stripping as an option.

@bep: what's your opinion on how to go forward with this? Thanks!

[apoorvmote]

This is probably not the right place to post this. But tdewolff/minify is removing my robots.txt and all of my favicon png files stored at root of the project. And I don't see option to keep those while minifying. I have made issue with tdewolff git repository.

So assuming hugo adds --html-keep-quotes. It's still not enough.

[apoorvmote]

Problem was that I had older version of minify. Make sure you have latest version with

go get -u github.com/tdewolff/minify/cmd/minify

Unfortunately minify --version shows you minify version master and not actual number

But in previous command add --sync option and it will work.

minify -r -o output/ .\public\ --html-keep-quotes --html-keep-document-tags --sync

[Edvinas01]

One more thing to add, if you're using Goldmark and have enabled xHTML option:

markup:
  goldmark:
    renderer:
      xHTML: true

The removal of quotes from tags will make your output HTML a non-valid XHTML when using the --minify flag.

[tdewolff]

That's true @Edvinas01 because XHTML is not HTML. Instead it is built on XML and thus the XML minifier should be used. The xHTML flag should change the mimetype to application/xhtml+xml so that the XML minifier is used (which does not remove quotes).

[apoorvmote]

@bep I tested out new minify feature but there are no quotes around href, name, rel, type and other values.

<meta name=generator content="Hugo 0.68.0">
<meta charset=utf-8>
<meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1">
<meta name=description content="Test for minify">
<link rel=apple-touch-icon sizes=180x180 href=./apple-touch-icon.png>
<link rel=icon type=image/png sizes=32x32 href=./favicon-32x32.png>
<link rel=icon type=image/png sizes=16x16 href=./favicon-16x16.png>
<link rel=manifest href=./site.webmanifest>

I have put all of them on different line for better readability but otherwise everything is in single line that is desirable.

And my minify config at config.yaml

minify:
  tdewolff:
    html:
      keepDocumentTags: true
      keepQuotes: true

I know browsers are getting better at understanding without quotes. I tested on Chrome, Firefox and Microsoft Edge based on Chromium. They all seem to add quotes automatically at the right places. So no crashes so far. But if tdewolff has added --keep-quotes option then why not use it.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. The resources of the Hugo team are limited, and so we are asking for your help.
If this is a bug and you can still reproduce this error on the master branch, please reply with all of the information you have about it in order to keep the issue open.
If this is a feature request, and you feel that it is still relevant and valuable, please tell us why.
This issue will automatically be closed in the near future if no further activity occurs. Thank you for all your contributions.