Vuetify CSS change order during webpack build

Question

I am creating a web app using Vue (3.1.3) and Vuetify (1.3.8). All seems to be fine, but when I do production build, Vue somehow changes the CSS order.

The problem is with classes .v-list__tile__content and .align-end.

In vuetify.css, they are on lines 4844 and 7236 respectively, but after npm run build in dist/css/chunk-vendors.*.css they are on positions 108929 and 100729. This means, that the order in which the styles are applied is switched and this div:

<div class="v-list__tile__content align-end">...</div>

then looks differently on dev server and production.

DEV:

PROD:

The div is generated by this component:

<v-list-tile-content class="align-end">{{ dish.price }}</v-list-tile-content>

The problem is with the align-items: flex-start/flex-end;

Is there some system solution to this? I guess I can override it by directly setting the style, but it might happen again.

Answer 1

Since the order of your CSS is changing during the build (and assuming there is no difference in your code between environments), it seems the order of your css is changed due to minification. Some tools will group selectors by property value, so that:

.foo {
  align-items: flex-start;
}

.bar {
  align-items: flex-start;
}

Can be turned into:

.foo, .bar {
  align-items: flex-start;
}

This could cause the order of your css to change.

It could be useful to share your build configuration as it appears that's where the issue lies.