Any idea why my Hugo published site is stripping quotation marks from some html tag attributes?

support
1

Link to my public repository: https://github.com/darrenaddy/mybootstrap5x.git

Looking at my Public/index.html source code (to diagnose a different problem) I find that quotation marks are stripped from LOTS of html tags. I can’t see any rhyme or reason for it. For example, my fingerprinted CSS tag looks like this:

<link rel=stylesheet href=./css/styles.779122179e73b54c91dfc70aecaf259dfba7d9983d58d641ee96696f8eb0ef73.css integrity="sha256-d5EiF55ztUyR38cK7K8lnfun2Zg9WNZB7pZpb46w73M=" media=screen>

In the case above, there are quotes around the integrity value, but not the values for: rel, href, or media.

A call to Google fonts in the head is published like this:
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel=stylesheet>
No quotation marks around the rel value but there IS around the href value.

Quotation marks stripped from all values like this:

<form method=post><input type=email name=email><input type=submit value=Subscribe>

This is all over the index.html.

<div class="social-links mt-3">
  <a href=# class=twitter><i class="bx bxl-twitter"></i></a>
  <a href=# class=facebook><i class="bx bxl-facebook"></i></a>
  <a href=# class=instagram><i class="bx bxl-instagram"></i></a>
  <a href=# class=google-plus><i class="bx bxl-skype"></i></a>
  <a href=# class=linkedin><i class="bx bxl-linkedin"></i></a></div>

My css is being generated and post processed with this code in the head partial:

{{ $options := (dict "transpiler" "libsass" "targetPath" "css/styles.css" "outputStyle" "expanded") }}
    {{ $scss := resources.Get "sass/main.scss" }}
    {{ $style := $scss | resources.ToCSS  $options | fingerprint }}
    <link rel="stylesheet" href="{{ $style.RelPermalink }}" {{ if hugo.IsProduction }}integrity="{{ $style.Data.Integrity }}" {{ end }}media="screen">

I do have html comments in my partials. Could that be causing the issue?
Thanks in advance for any help.

2

Are you building your site with the minify option?

3

Thanks for the reply. Add’l info:

I’ve determined that this problem does NOT happen when I use the simple hugo command to build the site. However, I’ve been following some instructions that I found online to use NPM scripts to build the site. I’m currently doing: npm run build and here is what the scripts section of my package.json looks like:

"scripts": {
    "clean": "rimraf public",
    "devsass": "sass --no-source-map assets/sass/main.scss assets/css/styles.css",
    "prodsass": "sass --no-source-map assets/sass/main.scss assets/css/styles.css --style=expanded",
    "start": "NODE_ENV=development npm-run-all clean devsass --parallel dev:*",
    "build": "NODE_ENV=production npm-run-all clean prodsass prod:hugo",
    "dev:sass": "npm run devsass -- --watch",
    "dev:hugo": "hugo server --disableFastRender --gc",
    "build:hugo": "hugo --gc --cleanDestinationDir",
    "prod:hugo": "hugo --gc --minify --cleanDestinationDir"
  },```

Does anyone see something in there that would lead to the npm script build stripping the quotation marks???
4

Also, not sure if it means anything, but here is the section of my package.json listing the dependencies. I’m not sure why sass and sass-embedded are only listed as devDependencies. I don’t remember doing anything different to install them via npm.

"dependencies": {
    "@fortawesome/fontawesome-free": "^6.1.1",
    "@fullhuman/postcss-purgecss": "^4.1.3",
    "autoprefixer": "^10.4.7",
    "bootstrap": "^5.1.3",
    "boxicons": "^2.1.2",
    "cssnano": "^5.1.7",
    "npm-run-all": "^4.1.5",
    "pixrem": "^5.0.0",
    "postcss": "^8.4.13",
    "postcss-cli": "^9.1.0",
    "rimraf": "^3.0.2"
  },
  "devDependencies": {
    "sass": "^1.51.0",
    "sass-embedded": "^1.50.1"
  }
5

The script being run in my package.json when I do npm run build was running LibSass “compressed”. But I changed it to “expanded” to make the resulting css easier to read and the problem remains. Not using “minify” pipe (that I know of).

6

The minify option does a number of things, including the removal of quotation marks that are not required.

1 Like
7

Here you do a minify.

8

Ah. Thanks. I did not follow the processing chain of the scripts calling scripts.

9

If you still want to use it, you can set in your config file the following:

  [minify.tdewolff.html]
    keepQuotes = true																	# default: false

More info available here: Configure Hugo | Hugo

10

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.