Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

CSS not on the HTML #579

Closed
ineshbose opened this issue Dec 2, 2022 · 5 comments
Closed

CSS not on the HTML #579

ineshbose opened this issue Dec 2, 2022 · 5 comments

Comments

@ineshbose
Copy link
Collaborator

Version

@nuxtjs/tailwindcss: 6.1.3
nuxt: 3.0.0(-rc.13 onwards)

Reproduction Link

https://stackblitz.com/edit/nuxt-starter-rnulzp

Steps to reproduce

  1. Run npm i -D nuxt@3.0.0-rc.12 @nuxtjs/tailwindcss@6.1.3 (yarn resolved faster for me)
  2. Update nuxt.config.ts to remove the nuxt-config import, change buildModules to modules, and paste the following in app.vue
<template>
  <div class="bg-indigo-300 flex justify-center">
    <p class="p-2 text-xl">Hello world</p>
  </div>
</template>
  1. Run npm run build && npm run start with devtools open (and see networks tab) and look for the HTML. This is the output:

image

<!DOCTYPE html>
<html >
<head><script src="/.localservice@runtime.7be9d91f4fa417255277bc69bed77e6ac8201aa1.js"></script><meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"><link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.1105cecb.js"><link rel="prefetch" as="script" crossorigin href="/_nuxt/error-component.3645d024.js"><link rel="prefetch" as="style" href="/_nuxt/entry.c09139ae.css"><style>/*! tailwindcss v3.2.4 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:""}html{-webkit-text-size-adjust:100%;font-feature-settings:normal;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{color:inherit;font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]{display:none}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.flex{display:flex}.justify-center{justify-content:center}.bg-indigo-300{--tw-bg-opacity:1;background-color:rgb(165 180 252/var(--tw-bg-opacity))}.p-2{padding:.5rem}.text-xl{font-size:1.25rem;line-height:1.75rem}</style><link rel="stylesheet" href="/_nuxt/entry.c09139ae.css" media="print" onload="this.media='all'; this.onload=null;"></head>
<body ><div id="__nuxt"><div class="bg-indigo-300 flex justify-center"><p class="p-2 text-xl">Hello world</p></div></div><script>window.__NUXT__={data:{},state:{},_errors:{},serverRendered:true,config:{public:{},app:{baseURL:"\u002F",buildAssetsDir:"\u002F_nuxt\u002F",cdnURL:""}}}</script><script type="module" src="/_nuxt/entry.1105cecb.js" crossorigin></script></body>
</html>
  1. Run npm i -D nuxt@3.0.0-rc.13 (update to RC-13 or higher) and then run npm run build && npm run start again with devtools open and look for the HTML. This is the output:

image

<!DOCTYPE html>
<html >
<head><script src="/.localservice@runtime.7be9d91f4fa417255277bc69bed77e6ac8201aa1.js"></script><meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"><link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.e6bc4875.js"><link rel="preload" as="style" href="/_nuxt/entry.c09139ae.css"><link rel="prefetch" as="script" crossorigin href="/_nuxt/error-component.a7ef5175.js"><link rel="stylesheet" href="/_nuxt/entry.c09139ae.css"></head>
<body ><div id="__nuxt"><div class="bg-indigo-300 flex justify-center"><p class="p-2 text-xl">Hello world</p></div></div><script>window.__NUXT__={data:{},state:{},_errors:{},serverRendered:true,config:{public:{},app:{baseURL:"\u002F",buildAssetsDir:"\u002F_nuxt\u002F",cdnURL:""}}}</script><script type="module" src="/_nuxt/entry.e6bc4875.js" crossorigin></script></body>
</html>

Description

I'm not sure of the API changes in Nuxt, but it seems that the CSS is no longer inline with the HTML which I wouldn't prefer. Is this by design or perhaps needs updating?
@ineshbose ineshbose added the bug Something isn't working label Dec 2, 2022
@Atinux Volta.net
Copy link
Collaborator

Atinux commented Dec 7, 2022

Can you confirm with Nuxt 3.0 stable please?

@ineshbose
Copy link
Collaborator Author

Hi @Atinux,

Thanks for getting on this. The issue continues with stable 3.0.
Here's a reproduction - https://stackblitz.com/edit/nuxt-starter-64daee?file=package.json

@ineshbose
Copy link
Collaborator Author

You can also preview the same for any 3.0.0 app in production. :)

Here's the Content Wind link - https://content-wind.nuxt.space/ (see Networks tab of devtools)

@Atinux Volta.net
Copy link
Collaborator

Atinux commented Dec 7, 2022

Oh I see what you mean, this choice is by design indeed: nuxt/framework#8666

This reduces the HTML size and allow caching for the CSS entry file as well.

@ineshbose
Copy link
Collaborator Author

Thank you very much! That answers it, and I'll close the issue!

@ineshbose ineshbose mentioned this issue May 11, 2023
Closed
@ineshbose ineshbose removed the bug Something isn't working label May 11, 2023
@ineshbose ineshbose mentioned this issue Oct 22, 2023
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@Atinux @ineshbose