Styling discrepancies between dev and build

[dasdawidt]

Describe the bug

Just like the Vite docs, I use custom styles in the index.md file using <style module>. I also use custom components in which I use <style scoped>.

Since I updated from version 1.0.0 to the latest one (the one in the StackBlitz), the built page's styles are broken. In the dev preview everything looks like expected.

Reproduction

Open the StackBlitz Demo with this link.

If it does not run automatically, run npm install && npm run dev. It should look something like this:

Then run npm run docs:build && npm run docs:preview and it will look like this:

As you can see, the hero image and its background are different and the cards are different as well.

Expected behavior

I expected the built version to look just like the dev preview (or at least very close).

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (12) x64 AMD Ryzen 5 5500U with Radeon Graphics
    Memory: 6.45 GB / 15.35 GB
  Binaries:
    Node: 21.2.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.5.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.1.2 - ~\AppData\Roaming\npm\pnpm.CMD
  Browsers:
    Edge: Chromium (127.0.2651.74)
    Internet Explorer: 11.0.19041.4355
  npmPackages:
    vitepress: ^1.3.1 => 1.3.1

Additional context

No response

Validations

• Check if you're on the latest VitePress version.
• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

[brc-dd]

Not sure but it's happening on vitepress 1.0.0 too, at least on stackblitz.

[brc-dd]

Most likely caused by this - vitejs/vite#16588 (the order is wrong now - https://www.diffchecker.com/0EPXuHIs/)

Working fine till vite 5.3.0-beta.1

Please use npm/pnpm overrides till this is resolved.

[chenlei0608]

same problem, and pages built using GitHub Actions is normal.
how to resolve it? upgrade vite?

[dasdawidt]

same problem, and pages built using GitHub Actions is normal. how to resolve it? upgrade vite?

As @brc-dd mentioned, it is working fine till vite 5.3.0-beta.1, so you have to downgrade vite to that version by specifying an override in the package.json like this (for npm):

"overrides": {
  "vitepress": {
      "vite": "5.3.0-beta.1"
  }
},

Or like this (for pnpm):

"pnpm": {
  "overrides": {
      "vite": "5.3.0-beta.1"
  }
}

[chenlei0608]

I will try, thank you

same problem, and pages built using GitHub Actions is normal. how to resolve it? upgrade vite?

As @brc-dd mentioned, it is working fine till vite 5.3.0-beta.1, so you have to downgrade vite to that version by specifying an override in the package.json like this (for npm):

"overrides": {
  "vitepress": {
      "vite": "5.3.0-beta.1"
  }
},

Or like this (for pnpm):

"pnpm": {
  "overrides": {
      "vite": "5.3.0-beta.1"
  }
}

[ZackBz]

I will try, thank you

same problem, and pages built using GitHub Actions is normal. how to resolve it? upgrade vite?

As @brc-dd mentioned, it is working fine till vite 5.3.0-beta.1, so you have to downgrade vite to that version by specifying an override in the package.json like this (for npm):

"overrides": {
  "vitepress": {
      "vite": "5.3.0-beta.1"
  }
},

Or like this (for pnpm):

"pnpm": {
  "overrides": {
      "vite": "5.3.0-beta.1"
  }
}

Did this work for you? I am seeing this issue between dev preview and build preview and pinning vite to 5.3.0-beta.1 didn't work for me. I am using the latest version of vitepress 1.3.2.

I have this in my package.json. I am using Bun

"overrides": {
    "vite": "5.3.0-beta.1"
  }

[dasdawidt]

@ZackBz according to the bun docs, your solution should work. The one I proposed specifying that the override is for vitepress does not, as bun currently does not support nested overrides. In my case, the pnpm solution worked, maybe try it using npm or pnpm.

[chenlei0608]

@ZackBz , it worked, but i am using npm

[ZackBz]

@ZackBz according to the bun docs, your solution should work. The one I proposed specifying that the override is for vitepress does not, as bun currently does not support nested overrides. In my case, the pnpm solution worked, maybe try it using npm or pnpm.

Odd, I have added the override to my package.json. I ran npm install and then built and previewed the docs and they still look the same as if I was using Bun. I am also using WhyFrame for component isolation so could be something with that as well. I haven't really had time to look deeper into the issue.

[kmindi]

Most likely caused by this - vitejs/vite#16588 (the order is wrong now - https://www.diffchecker.com/0EPXuHIs/)

Working fine till vite 5.3.0-beta.1

Please use npm/pnpm overrides till this is resolved.

I also experienced the issue and could narrow it down to the redefined style definitions in index.md, which are done the same way as the style definition in the theme (src/client/theme-default/styles/vars.css), therefore the last defined one in the created style file takes precedence.

You can work around it if you don't do the styling in the markdown files but put the override of the theme styling in your custom.css (where you override the default theme).

Yet I'am curious if this is not a bug in vite now, because you cannot override with style definitions in the markdown files now anymore, except if this is only related to some names used for the files and the order can be influenced...

[yangmingshan]

This problem is caused by CSS order, so !important can save you.

:root {
  --vp-home-hero-name-color: transparent !important;
  --vp-home-hero-name-background: -webkit-linear-gradient(315deg, #42d392 25%, #647eff) !important;
  --vp-home-hero-image-background-image: linear-gradient(0deg, #42d39280 50%, #34485e80) !important;
  --vp-home-hero-image-filter: blur(40px) !important;
}

@media (min-width: 640px) {
  :root {
    --vp-home-hero-image-filter: blur(56px) !important;
  }
}

@media (min-width: 960px) {
  :root {
    --vp-home-hero-image-filter: blur(72px) !important;
  }
}