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 ponent:

<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.

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 ponent:

<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.

• javascript
• css
• vue.js
• vuetify.js
• vuetify-1

• 2 I had similar issue with earlier versions, asked on discord if someone encountered similar issue, but no response. Later I encountered issues with importing stylus: github./vuetifyjs/vuetify/issues/3583 I'm not sure what causes this problems yet, or how to deal with it except overriding styles manually... – Traxo Commented Nov 30, 2018 at 22:03
• 4 I've been burned by CSS order before. Now I never assume that webpack guarantees any kind of CSS order for styles across different files, and I use CSS specificity instead. – Decade Moon Commented Nov 30, 2018 at 22:52
• 3 @DecadeMoon I try to stick to that too with my CSS, but these are third party styles and to be honest it feels kind of stupid to override them. – Josef Jura Commented Dec 1, 2018 at 0:41

2 Answers 2

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.

This seems to be a problem of text direction by language

element.style {
    direction: ltr;
}