Prop value inconsistent in dev preview and after build in build preview

[soulsam480]

Describe the bug
A clear and concise description of what the bug is.
Prop value is inconsistent in dev preview and prod build in latest release. Was working perfectly fine in previous release.

/// EBtn.vue
<script setup lang="ts">
withDefaults(
  defineProps<{
    label?: string;
    unelevated?: boolean;
    noCaps?: boolean;
    outline?: boolean;
    rounded?: boolean;
    icon?: string;
    color?: string;
    round?: boolean;
    size?: string;
    stretch?: boolean;
    type?: 'a' | 'submit' | 'button' | 'reset';
    padding?: string;
    to?: string;
    disable?: boolean;
    dense?: boolean;
  }>(),
  {
    unelevated: true,
  }
);

defineEmits<{ (e: 'click'): void }>();
</script>

<template>
  <q-btn
    v-bind="{ ...$props, color: disable ? 'light-grey' : color }"
    @click="$emit('click')"
    :padding="padding || (round || dense ? undefined : `8px 16px 8px ${!!icon ? '8px' : '16px'}`)"
  >
    <slot />
  </q-btn>
</template>

In the above component, the padding prop value should be undefined when

• no padding prop is passed
• round prop is true

This works as expected in dev preview, but after building, the value changes to 8px 16px 8px 16px when the above props are passed

Codepen/jsFiddle/Codesandbox (required)
Fork a Codepen (https://codepen.quasar.dev) or a jsFiddle (https://jsfiddle.quasar.dev) or a Codesandbox (https://codesandbox.quasar.dev) and hit save then copy-paste link here.

To Reproduce
Steps to reproduce the behavior:

1. copy the above component
2. Use it this way

        <e-btn
          size="xs"
          round
          icon="mdi-bell"
          color="grey"
          unelevated
          class="q-ml-sm"
        />

3. run the dev server and inspect the element
4. the element has proper padding
5. see the padding value
   
   
   as you can see the padding is undefined
6. build the project
7. serve it quasar serve
8. inspect the element
9. the button has different padding
   
   

Expected behavior
A clear and concise description of what you expected to happen.

• The padding prop should be undefined

Screenshots
If applicable, add screenshots to help explain your problem.

Platform (please complete the following information):
Quasar Version: 2.1.1
@quasar/app Version: 3.1.3

Quasar mode:

• SPA
• SSR
• PWA
• Electron
• Cordova
• Capacitor
• BEX

Tested on:

• SPA
• SSR
• PWA
• Electron
• Cordova
• Capacitor
• BEX

OS: Linux ubuntu
Node: LTS
NPM: NA
Yarn: 1.x
Browsers: Chrome, Edge, Safari
iOS:NA
Android:NA
Electron: NA

Additional context
Add any other context about the problem here.

[MilosPaunovic]

What first comes to mind is that some parts of your CSS are being overwriten in the build process and aren't loaded during DEV; have you ruled that one out?

[soulsam480]

My css is coming from app.scss only, which is loaded by quasar by default, also there are no other CSS/scoped CSS in that specific page

[soulsam480]

What first comes to mind is that some parts of your CSS are being overwriten in the build process and aren't loaded during DEV; have you ruled that one out?

I have another assumption, this might be a vue compiler bug, but not sure as it works in dev and not in prod after build. Also this was working perfectly fine in the last release

[rstoenescu]

Downgrade the q/app (only) to what you were previously using and check if it works or not. If "yes" then it's a vue bug.

[soulsam480]

Downgrade the q/app (only) to what you were previously using and check if it works or not. If "yes" then it's a vue bug.

I went all the way back to 3.1.0 but it's not working. But it used to work, after I upgraded to q/app 3.1.3 ans quasar 2.1.1 about 4 days ago this started happening

[rstoenescu]

Can you also downgrade the "quasar" dep pls?

[soulsam480]

Can you also downgrade the "quasar" dep pls?

I went back to the previous version before this issue happened

   "@quasar/extras": "^1.11.2",
   "quasar": "^2.1.0",
   "@quasar/app": "^3.1.2",

I'm surprised, the issue is still there. But i totally remember this was not an issue before the upgrade
I also tried q/app -> 3.1.1 and 3.1.0 but same results

[pdanpdan]

It's not the right way to downgrade. Change only @quasar/app to the previous version

"@quasar/app": "=3.1.2",

[soulsam480]

It's not the right way to downgrade. Change only @quasar/app to the previous version

"@quasar/app": "=3.1.2",

Oh sorry, let me do it again.

[soulsam480]

It's not the right way to downgrade. Change only @quasar/app to the previous version

"@quasar/app": "=3.1.2",

Thanks @pdanpdan , I can see that downgrading to "@quasar/app": "=3.1.2", fixed the issue. CC @rstoenescu

[soulsam480]

Related vue bug vuejs/core#4783, fix PR: vuejs/core#4790

[rstoenescu]

Thanks for the follow-up. Since it's a confirmed external issue, let's close this ticket.

[soulsam480]

Hii @rstoenescu , the above PR got merged yesterday and also released under 3.2.22.

[rstoenescu]

@soulsam480 Vue has been upgraded to v3.2.22 in "@quasar/app" v3.2.3