Nuxt•7d ago

Prevent CSS minify / parsing?

Hi folks 👋 When Nuxt (Vite? Nitro?) parses and compresses my CSS—which makes heavy use of nesting, including nested @container queries—it gets very confused and incorrectly groups some selectors together, sharing commands between them that should not be shared. (It all works fine in dev, but prod is where the less-than-smart minification kicks in.) I’ve tried so many flags in nuxt.config.ts to prevent this, but nothing actually works. Anyone know the magic trick to keep Nuxt’s damn hand off my CSS? 😅

Node  18.17.0
Nuxt  3.8.0-28284309.b3d3d7f4
Nitro 2.7.0-28295243.3e9302a

Node  18.17.0
Nuxt  3.8.0-28284309.b3d3d7f4
Nitro 2.7.0-28295243.3e9302a

2 Replies

kapa.ai•7d ago

Hi @Stewart. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To address your issue with CSS minification and parsing in Nuxt 3 production builds, there are a few approaches you can try. Based on the knowledge sources provided, here are some potential solutions: 1. Disable CSS optimization: You can try disabling CSS optimization in your nuxt.config.ts file. According to the Nuxt Configuration documentation (https://nuxt.com/docs/api/nuxt-config#optimizecss), you can set the optimizeCSS option to false:

export default defineNuxtConfig({
  webpack: {
    optimizeCSS: false
  }
})

export default defineNuxtConfig({
  webpack: {
    optimizeCSS: false
  }
})

2. Configure PostCSS: Nuxt comes with PostCSS built-in, and you can configure it in your nuxt.config.ts file. You might want to adjust the PostCSS plugins or their options to prevent unwanted transformations. As mentioned in the Nuxt documentation on styling (https://nuxt.com/docs/getting-started/styling#using-postcss), you can configure PostCSS like this:

export default defineNuxtConfig({
  postcss: {
    plugins: {
      // Adjust or remove plugins as needed
      'postcss-nested': {},
      'postcss-custom-media': {}
    }
  }
})

export default defineNuxtConfig({
  postcss: {
    plugins: {
      // Adjust or remove plugins as needed
      'postcss-nested': {},
      'postcss-custom-media': {}
    }
  }
})

3. Disable specific PostCSS plugins: If you suspect that certain PostCSS plugins are causing issues, you can try disabling them. For example, you might want to disable cssnano, which is responsible for minification. According to the Nuxt Configuration documentation (https://nuxt.com/docs/api/nuxt-config#postcss), you can configure cssnano options or potentially disable it:

export default defineNuxtConfig({
  postcss: {
    plugins: {
      cssnano: false // or adjust its options
    }
  }
})

export default defineNuxtConfig({
  postcss: {
    plugins: {
      cssnano: false // or adjust its options
    }
  }
})

4. Use the inlineStyles feature: Nuxt 3 offers an inlineStyles feature that might help preserve your CSS structure. As mentioned in the Nuxt Features documentation (https://nuxt.com/docs/guide/going-further/features), you can enable this feature in your nuxt.config.ts:

export default defineNuxtConfig({
  features: {
    inlineStyles: true
  }
})

export default defineNuxtConfig({
  features: {
    inlineStyles: true
  }
})

Keep in mind that this feature is currently only available when using Vite. If none of these solutions work, you might need to investigate further or consider reporting this as a potential bug to the Nuxt team. As suggested in the Nuxt documentation on reporting bugs (https://nuxt.com/docs/community/getting-help#could-there-be-a-bug), you can search through open issues or create a new one if necessary. Remember to test each solution carefully in both development and production environments to ensure it resolves your specific issue with nested selectors and @container queries. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7d ago

<@572587462568968192> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

Prevent CSS minify / parsing?