fix(templates): invalid html for `spa-loading-icon`
dargmuesli opened this issue · comments
Environment
- Operating System: Linux
- Node Version: v16.20.0
- Nuxt Version: 3.6.5
- Nitro Version: 2.5.2
- Package Manager: npm@9.4.2
- Builder: vite
- User Config: app, devtools, modules, htmlValidator
- Runtime Modules: @nuxtjs/html-validator@1.5.2
- Build Modules: -
Reproduction
https://stackblitz.com/edit/github-7umkre?file=nuxt.config.ts
Describe the bug
The nuxt/assets/spa-loading-icon template's style tag is rendered inside a div tag by default, which is invalid html.
Run npm install && npm run generate in the linked reproduction and see @nuxtjs/html-validator's error.
Additional context
It could be a solution to provide a full html page with a properly placed <style> tag in nuxt/assets, but I'm not sure if that would keep the idea of the loading icon only being a loading icon.
Also, see nuxt-modules/html-validator#402.
Logs
ERROR HTML validation errors found for /200.html 9:45:28 PM
inline
6:250 error <style> element is not permitted as content under <div> element-permitted-content
✖ 1 problem (1 error, 0 warnings)
More information:
https://html-validate.org/rules/element-permitted-content.html
@danielroe what do you think about my proposed solution? I could try to contribute to the solution but don't want to do so without hearing your thoughts first 🙌
The template ends up within the empty <div id="__nuxt"></div>.
It will require more custom handling if we want to support placing the styles elsewhere in the HTML, which might be worthwhile but it would require a different solution.
This is not an issue anymore starting with nuxt 3.7.0: https://stackblitz.com/edit/github-7umkre-ie2xhs?file=package.json