[ENCH] Plugin adds unused quasar classes/css to generated html file

[OkanPinar]

Checks

• [X] I have searched the existing issues for a similar bug and it does not exist!

Environment

• Operating System: Darwin
• Node Version: v21.2.0
• Nuxt Version: 3.8.2
• CLI Version: 3.10.0
• Nitro Version: 2.8.0
• Package Manager: npm@10.2.3
• Builder: -
• User Config: devtools, runtimeConfig, modules, routeRules, css, quasar, pinia, nitro, vite, image
• Runtime Modules: nuxt-quasar-ui@2.0.6, @pinia/nuxt@0.5.1, @nuxt/image@1.1.0, nuxt-icon@0.6.6, @nuxtjs/device@3.1.1
• Build Modules: -

Quasar version

2.14.1

Browsers

Firefox

Description

When adding Quasar to the Nuxt project via this extension and using it with ssr mode, the HTML file includes every style definition belonging to Quasar, therefore the size of documents is getting bigger enormously. It can be easily observed from the playground example. Is there any way to get rid of this situation?

Reproduction steps

1. Go to 'https://stackblitz.com/edit/github-g9bzsz?file=nuxt.config.ts'
2. Copy the generated HTML file
4. See the style section.

Screenshots

No response

Logs

No response

[Maiquu]

I will work on this when I have the time. However, since Quasar only provides the bundled CSS file, achieving this will be possible only when the user installs the sass package.

[PabloFX]

Hi @Maiquu any progress? is there any current workaround?

[Maiquu]

I don't think this is possible due to how quasar's runtime code is tightly integrated with its style definitions. Quasar concatenates strings with user provided props to build class strings. This will cause tools like PurgeCSS to make incorrect assumptions about what classes are unused. Even if you manage to make it work with PurgeCSS via safelist options, the gain will be minimal.

Only style definitions I can safely remove at module side are the ones belonging to unused components. This can maybe achieved by piggy-backing the rollup's tree-shaking process. But the gain from it may not be too great.