nuxt-icon polluting entry.css even if it is not used #1182
Description
Environment
- Operating System: Linux
- Node Version: v18.18.0
- Nuxt Version: 3.9.0
- CLI Version: 3.10.0
- Nitro Version: 2.8.1
- Package Manager: [email protected]
- Builder: -
- User Config: modules
- Runtime Modules: @nuxt/[email protected]
- Build Modules: -
Version
2.11.1
Reproduction
https://stackblitz.com/edit/nuxt-ui-ex9u9g?file=app.vue
Description
This simple application has one icon. When the application is built with npx nuxi generate and served, the frontend loads entry.css that has the following content:
.icon[data-v-bd832875] {
display: inline-block;
vertical-align: middle
}
But the icon <UIcon name="i-heroicons-light-bulb" /> doesn't need that css, as it is not dynamic. This becomes a problem when all other css is in-inlined with, for example, Tailwind, and the only entry in the entry.css is that text.
npx nuxi analyze also reveals the culprit. nuxt-icon Icon.vue is included in the build because nuxt-ui Icon now refers directly to it even if dynamic icon loading is not used.
This change: v2.10.0...v2.11.1#diff-7884e23a1a8f4f258c1c1c63694ffa32490c554252a82a3d4c8a1376c29afa13R2
Additional context
No response
Logs
No response