3

Problem

I use Nuxt3 + UnoCSS + DaisyUI community preset. When running npx nuxi dev, everything works well. However, when running npx nuxi generate && npx serve dist, UnoCSS works well but some of the DaisyUI preset styles are incorrect:

Reproduce

I create a small online demo to illustrate this problem:

https://stackblitz.com/edit/nuxt-starter-5h7iuh

This is in dev:

while this is in deployment:

My try

I spent almost the whole day debugging but still did not find the reason... The only thing I found is that some styles in the daisyUI preset are not correct. Here's an example:

This is the styles of btn-sm class defined in @kidonng/daisyui/utilities/styled/button.css:

.btn-sm {
    @apply h-8 px-3 min-h-8;
    font-size: 0.875rem;
  }

and this is what I see in chrome dev tool when running dev server (h-8 means height: 2rem):

But this is what I see in chrome dev tool in deployment preview:

And this is the corresponding CSS file generated by Nuxt (entry.7b197c61.css):

.btn-md,
.btn-sm {
  height: 3rem;
  min-height: 3rem;
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 0.875rem;
}

The correct style should be height: 2rem, but the generated CSS is height: 3rem. This is really weird... I don't know what causes this and how to fix it. Hope someone may help me. Thanks in advance!

why
  • 59
  • 4

1 Answers1

0

Working daisyUI in dev & production https://stackblitz.com/edit/github-gxjzue-1jzxtn

enter image description here

Seems to be related to how UnoCSS + cssnano interact.

normalizeWhitespace and @apply don't play well toghether:

https://github.com/unocss/unocss/discussions/2227#discussioncomment-5064858

cssnano: {
  preset: [
    'default',
    {
      mergeRules: false,
      normalizeWhitespace: false,
    },
  ],
},
Martin Meixger
  • 2,547
  • 24
  • 26