solid-start icon indicating copy to clipboard operation
solid-start copied to clipboard

[Bug?]: Latest Vinxi (>= 0.3.11) causes layout shifts in dev

Open ersinakinci opened this issue 1 year ago • 4 comments

Duplicates

  • [X] I have searched the existing issues

Latest version

  • [X] I have tested the latest version

Current behavior 😯

If you create a new project using npm init solid@latest, there's a lot of jank on the screen when loading any page on dev (npm run dev). Running perf tools suggests that CSS isn't getting loaded right away.

I found through experimentation that downgrading to [email protected] or earlier fixes the issue. As of writing, npm init solid@latest installs [email protected].

Prod builds (npm run build && npm run start) are unaffected regardless of version.

Expected behavior 🤔

There shouldn't be massive layout shifts on the screen in dev while running the latest Vinxi.

Steps to reproduce 🕹

Steps:

  1. npm init solid@latest
  2. npm run dev
  3. Visit the home page.

Context 🔦

No response

Your environment 🌎

2021 M1 MacBook Pro, macOS Sonoma 14.4.1
Chrome 123.0.6312.87
node v21.7.1

`package.json`


{
  "name": "example-with-tailwindcss",
  "type": "module",
  "scripts": {
    "dev": "vinxi dev",
    "build": "vinxi build",
    "start": "vinxi start"
  },
  "dependencies": {
    "@solidjs/router": "^0.13.1",
    "@solidjs/start": "^1.0.0-rc.0",
    "autoprefixer": "^10.4.14",
    "postcss": "^8.4.26",
    "solid-js": "^1.8.16",
    "tailwindcss": "^3.3.3",
    "vinxi": "^0.3.10"
  },
  "engines": {
    "node": ">=18"
  }
}```

ersinakinci avatar Mar 29 '24 01:03 ersinakinci

can you give example of what css files are not being loaded. In v0.3.11 we added a feature where we didn't scrape node_modules for css files. Maybe this is what changed

nksaraf avatar Mar 29 '24 19:03 nksaraf

app.css from the project directory, I guess. The screen flashes very clearly when you spin up a new instance using the solid cli tool.

ersinakinci avatar Mar 29 '24 20:03 ersinakinci

The CSS gets loaded, it's just not loaded right away, hence the jank.

ersinakinci avatar Mar 29 '24 20:03 ersinakinci

Related PR: #1423

katywings avatar Mar 30 '24 15:03 katywings