Nuxt.js: li tags don't close with nuxt generate

Created on 11 Aug 2018  路  4Comments  路  Source: nuxt/nuxt.js

Version

v1.4.2

Reproduction link

https://codesandbox.io/s/vue

Steps to reproduce

Add a ul > li in index.vue (with the basic start kit)

<template>
  <section class="container">
    <div>
      <app-logo/>
      <h1 class="title">
        test
      </h1>
      <h2 class="subtitle">
        Nuxt.js project
      </h2>
      <div class="links">
        <a
          href="https://nuxtjs.org/"
          target="_blank"
          class="button--green">Documentation</a>
        <a
          href="https://github.com/nuxt/nuxt.js"
          target="_blank"
          class="button--grey">GitHub</a>
          <ul>
            <li>
              Documentation
            </li>
            <li>Github</li>
          </ul>
      </div>
    </div>
  </section>
</template>

When npm run generate is executed, the output in dist folder looks like,

<div class="links">
  <a class="button--green" href="https://nuxtjs.org/" target="_blank">Documentation</a>
  <a class="button--grey" href="https://github.com/nuxt/nuxt.js" target="_blank">GitHub</a>
  <ul>
    <li>Documentation
    <li>Github</ul>
</div>

What is expected ?

Tags should close correctly

What is actually happening?

Tags isn't closing properly

Additional comments?

Issue observed only with ul > li for now. Not sure how I can provide a reproduction link for a nuxt generate example - apologies in advance.

This bug report is available on Nuxt community (#c7538)
bug-report
Source
picture painotpi

Most helpful comment

It's the behavior from options removeOptionalTags of HTML minifier.
Per HTML W3C specification:

An li element鈥檚 end tag may be omitted if the li element is immediately followed by another li element or if there is no more content in the parent element.

You can try in HTML minifier site
Input:

<!DOCTYPE html>
<html>

<head>
  <title>Minify Test</title>
</head>

<body>
  <div class="main">
    <ul>
      <li>demo</li>
      <li>Design from</li>
    </ul>
  </div>
</body>

</html>

Output:

<!doctype html><title>Minify Test</title><div class=main><ul><li>demo<li>Design from</ul></div>
picture clarkdo on 11 Aug 2018
👍2

All 4 comments

Can reproduce this with latest nuxt-edge

manniL picture manniL on 11 Aug 2018

This is intended, as HTML is minified (see the docs). The HTML is also valid, as the </li> tag is optional in your case (source).

manniL picture manniL on 11 Aug 2018

It's the behavior from options removeOptionalTags of HTML minifier.
Per HTML W3C specification:

An li element鈥檚 end tag may be omitted if the li element is immediately followed by another li element or if there is no more content in the parent element.

You can try in HTML minifier site
Input:

<!DOCTYPE html>
<html>

<head>
  <title>Minify Test</title>
</head>

<body>
  <div class="main">
    <ul>
      <li>demo</li>
      <li>Design from</li>
    </ul>
  </div>
</body>

</html>

Output:

<!doctype html><title>Minify Test</title><div class=main><ul><li>demo<li>Design from</ul></div>
clarkdo picture clarkdo on 11 Aug 2018
👍2

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

lock[bot] picture lock[bot] on 1 Nov 2018
Was this page helpful?
0 / 5 - 0 ratings

Related issues

nassimbenkirane picture nassimbenkirane  路  3Comments
vadimsg picture vadimsg  路  3Comments
gary149 picture gary149  路  3Comments
bimohxh picture bimohxh  路  3Comments
lazycrazy picture lazycrazy  路  3Comments