Different size of icons because the styles are loaded in different order

[mitar]

Module version

The version of the module you're using: @nuxtjs/vuetify@1.9.1

Describe the bug

When running the app using npm run dev the styles are loaded in different order than when using npm run generate. This makes the icon be of different size.

To Reproduce

See: https://github.com/mitar/nuxt-vuetify-issue

Expected behavior

The GitLab icon should be of the same size in both cases.

Screenshots

[jpoep]

I'm having the same issue. Maybe it's related to nuxt/nuxt#4204 and/or nuxt/nuxt#4219?

[kevinmarrec]

It's cause with 1.x of module you have treeShake enabled by default only when doing build or generate.

There are inconsistencies when not using treeShake in dev, that's why in 2.0 of module it's always enabled : https://github.com/nuxt-community/vuetify-module/releases/tag/v2.0.0-alpha.1

The issue is that when not using treeShaking, full already compiled & minified vuetify CSS is used, meanwhile with treeShaking it extract only the CSS of components you're using. And cause of some CSS order behaviors around Vuetify CSS, that's why it could cause issues.

You should be able to fix your issue by setting treeShake always to true.

Take into account that the dev build will be slower. treeShake not enabled by default in dev mode was first considered better cause faster build (using already compiled Vuetify JS & CSS) to develop faster, but then we learn that there were CSS different behaviors in production.

[jpoep]

Wouldn't this leave me with the CSS order found in prod even in dev, though?

The CSS order after tree shaking seems to be wrong, take a look at this Codesandbox: https://codesandbox.io/s/xenodochial-cohen-88qir

If running yarn dev:

If running yarn build && yarn start:

The latter one doesn't look right at all. Making it look like that even in dev doesn't really fix the issue. 🙁

Edit: Even when using v2.0.0-alpha.1, it produces a different result in dev compared to prod. Maybe it's not a tree shaking issue after all?

[mitar]

You should be able to fix your issue by setting treeShake always to true.

I think the opposite is true: it seems enabling tree shake breaks things, because it does not use the right order of CSS. So yes, by enabling it during development, I would be able to see how it breaks things already during development, but I do not want things to be broken in the first place. I think that the order in which Veutify bundles CSS is the right one.

So what I see here is that tree shaking is buggy, it:

• Does not produce the order that it should.
• It is unclear even if the order it is producing is deterministic. I might enable tree shaking in development, see that things work well. And then just because I rename a component so that order of loading of components is different, tree shaking reorders CSS and things change. Now I have to go all around the app to see if anything changes (or use some visual regression CI to hope to detect that automatically).

I think the right solution here is to fix CSS tree shaking.

[kevinmarrec]

I think the right solution here is to fix CSS tree shaking.

If there any CSS tree shaking issue it is not something that can be done around the Nuxt module, it may be something around vuetify-loader.

[kpturner]

I am having the same issue with the stylng of the vuetify v-badge component.

In dev it looks fine:

In production its rubbish

and as I think was mentioned above, setting treeShake to true simply results in the end result being wrong in dev as well as prod - i.e. it makes matters worse. So I simply forced treeShake to be false in production as well as dev and it worked.....no idea what disasters that will cause elsewhere yet.

[mdaffan]

V-badge doesn't work for me