nuxt-windicss
nuxt-windicss copied to clipboard
windicss
Nuxt bridge - On ssr no css is inlined which causes page style flicker
Describe the bug A clear and concise description of what the bug is.
To Reproduce Steps to reproduce the behavior:
- Clone repository windicss-nuxt-bridge-reproduction
- Run commands
yarn install
yarn build
yarn start
- See error on http://localhost:3000
Expected behavior Used css should be inlined on server side to prevent styles flickering on html rendering. You'll see a red page, in center white text and three colored boxes without flickering.
Screenshots
Initial paint:
After windi styles injected:
Additional context package.json deps versions
"dependencies": {
"core-js": "^3.19.3",
"nuxt-edge": "latest",
"vue": "^2.6.14",
"vue-server-renderer": "^2.6.14",
"vue-template-compiler": "^2.6.14",
"webpack": "^4.46.0"
},
"devDependencies": {
"@nuxt/bridge": "npm:@nuxt/bridge-edge",
"@nuxt/types": "^2.15.8",
"@nuxt/typescript-build": "^2.1.0",
"nuxt-windicss": "^2.2.4"
}
SSR generated html ( no injected windi styles )
<!DOCTYPE html>
<html lang="en" data-n-head="%7B%22lang%22:%7B%22ssr%22:%22en%22%7D%7D">
<head >
<title>windi-bridge-reproduction</title>
<meta data-n-head="ssr" charset="utf-8">
<meta data-n-head="ssr" name="viewport" content="width=device-width, initial-scale=1">
<meta data-n-head="ssr" data-hid="description" name="description" content="">
<meta data-n-head="ssr" name="format-detection" content="telephone=no">
<link data-n-head="ssr" rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="preload" href="/_nuxt/1f241e1.js" as="script">
<link rel="preload" href="/_nuxt/4505b07.js" as="script">
<link rel="preload" href="/_nuxt/687fcb5.js" as="script">
<link rel="preload" href="/_nuxt/c61538a.js" as="script">
<link rel="preload" href="/_nuxt/556693f.js" as="script">
<link rel="prefetch" href="/_nuxt/b2f682b.js">
<link rel="prefetch" href="/_nuxt/eb76f2f.js">
<style data-vue-ssr-id="20c5f194:0,2838a372:0">.nuxt-progress{position:fixed;top:0;left:0;right:0;height:2px;width:0;opacity:1;transition:width .1s,opacity .4s;background-color:#000;z-index:999999}.nuxt-progress.nuxt-progress-notransition{transition:none}.nuxt-progress-failed{background-color:red}
body,html{height:100%}
</style>
</head>
<body >
<div data-server-rendered="true" id="__nuxt">
<!---->
<div id="__layout">
<div class="bg-red-300 w-full flex flex-col h-screen items-center justify-center px-4 py-4">
<p class="text-white text-2xl">Should be initially white</p>
<div class="flex mt-4">
<div class="h-8 w-8 bg-green-400 mr-2"></div>
<div class="h-8 w-8 bg-blue-400 mr-2"></div>
<div class="h-8 w-8 bg-yellow-400"></div>
</div>
</div>
</div>
</div>
<script>window.__NUXT__=(function(a,b,c){return {layout:"default",data:[{}],fetch:{},error:c,serverRendered:true,routePath:a,config:{_app:{basePath:a,assetsPath:b,cdnURL:c,buildAssetsDir:b,baseURL:a},app:{basePath:a,assetsPath:b,cdnURL:c,buildAssetsDir:b,baseURL:a}},_asyncData:{},_errors:{}}}("\u002F","\u002F_nuxt\u002F",null))</script><script src="/_nuxt/1f241e1.js" defer></script><script src="/_nuxt/4505b07.js" defer></script><script src="/_nuxt/687fcb5.js" defer></script><script src="/_nuxt/c61538a.js" defer></script>
</body>
</html>
Hey, we need this PR merged and it should fix it https://github.com/nuxt/framework/pull/7160
@harlan-zw the PR was merged but I still see the issue when nitro is enabled. My info
Nuxt project info:
------------------------------
- Operating System: `Windows_NT`
- Node Version: `v16.14.0`
- Nuxt Version: `2.16.0-27711384.54e852f`
- Package Manager: `[email protected]`
- Builder: `webpack`
- User Config: `alias`, `autoImports`, `bridge`, `build`, `buildModules`, `componen
ts`, `head`, `modules`, `plugins`, `polyfill`, `privateRuntimeConfig`, `publicRuntimeCon
fig`, `pwa`, `router`, `screen`, `storybook`, `svgSprite`, `windicss`, `serverHandlers`,
`devServerHandlers`- Runtime Modules: `@nuxtjs/[email protected]`, `vue-screen/nuxt`
- Build Modules: `()`, `[email protected]`, `@pinia/[email protected]`, `@vueuse/[email protected].
0`, `@nuxt/[email protected]`
------------------------------
Im facing similar issue with Nuxt3. I have ran an experiment with similar page being ran under two nuxt versions: v3.x (latest), v.2.15.8 v3.6.5 has issue with inlining scss on ssr so it causes the page to flicker
