22

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: enter image description here

PROD: enter image description here

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.

beerwin
  • 9,813
  • 6
  • 42
  • 57
Josef Jura
  • 522
  • 6
  • 22
  • 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: https://github.com/vuetifyjs/vuetify/issues/3583 I'm not sure what causes this problems yet, or how to deal with it except overriding styles manually... – Traxo Nov 30 '18 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 Nov 30 '18 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 Dec 01 '18 at 00:41

2 Answers2

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.

Ovenwand
  • 45
  • 8
  • 1
    This looks like it could be the reason and I definitively suspected the minification. I ended up just hacking it together with some !important overrides. Sadly, it's from application I worked on a long time ago (more than 2 years) and I no longer have the source code available. So there's no way to verify this. But thanks anyway. – Josef Jura May 12 '21 at 14:08
  • 1
    Woops.. You could see if there is a way to exclude that part (file?) from your minification. Don't think there are many other possibilities. Good luck! – Ovenwand May 12 '21 at 14:24
0

This seems to be a problem of text direction by language

element.style {
    direction: ltr;
}
Yoel Diamant
  • 1
  • Could you elaborate a bit please? I can't think of a reason why would the direction of text be different on multiple environments after build. My hypothesis was that there is something problem with the build process. Overwand's answer seems to be onto something. Thanks – Josef Jura May 12 '21 at 14:11