scss v-bind variables not working inside q-dialog SFC

[vandelpavel]

What happened?

Hi, i'm trying to use v-bind css variables for SFC.
While this feature works on normal components it won't work while using q-dialogs.

What did you expect to happen?

The dialog should have a red background.

Reproduction URL

https://codesandbox.io/s/laughing-agnesi-ctskso?file=/src/components/MyDialog.vue

How to reproduce?

Here it is the same component using <script setup> feature:

<template>
  <q-dialog ref="dialogRef" :model-value="modelValue" @update:model-value="$emit('update:model-value', $event)">
    <q-card class="container-card reactive-backgroud-color">  
      <q-card-section class="text-h6"> This dialog should have a red background </q-card-section>

      <q-separator />

      <q-card-section>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed turpis lectus, condimentum in eros quis, congue condimentum eros. In maximus ex
        arcu, laoreet suscipit lectus eleifend sit amet. Donec metus purus, porta eu iaculis sed, ullamcorper quis risus. Pellentesque facilisis felis
        eget ornare suscipit. Nulla felis lorem, euismod eu lacinia vitae, condimentum vitae leo. Aliquam tincidunt gravida urna a pharetra. Etiam mi
        ex, aliquet placerat purus nec, dictum tristique sem. Maecenas a mi quis enim lacinia porta. Sed eget velit vel est hendrerit tristique
        bibendum vitae nunc. Maecenas a velit ut nisl volutpat efficitur ut quis dolor. Maecenas vel justo malesuada, tempus neque vel, ornare ex.
        Fusce felis est, volutpat ut vehicula vitae, imperdiet ut libero. Nunc ex massa, cursus in suscipit a, finibus quis nisl. Sed vel gravida
        massa, et consequat urna. Duis orci ligula, maximus ac tristique venenatis, venenatis in diam.
      </q-card-section>

      <q-separator />

      <q-card-actions align="right">
        <q-btn label="close" v-close-popup />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script setup lang="ts">
defineEmits({
  "update:model-value": (payload: boolean) => payload === true || payload === false,
});

defineProps({
  modelValue: {
    type: Boolean,
    required: true,
  },
});

const theme = {  
  color: "red",
};
</script>

<style lang="scss" scoped>
.reactive-backgroud-color {
  background-color: v-bind("theme.color");  
}
</style>

Then change it's model to true and you will see that the bakground color isn't set.
Then if you try to remove the q-dialog tags and v-model related logic and import it as plain component the background is actually red.

Flavour

Quasar CLI with Webpack (@quasar/cli | @quasar/app-webpack)

Areas

Components (quasar), Style & Identity (quasar)

Platforms/Browsers

Chrome

Quasar info output

No response

Relevant log output

No response

Additional context

If you go to the developer console inside the browser you will see this:

background-color: var(--ba9b6fa2-tmp);

And hovering it this message will show up: --ba9b6fa2-tmp is not defined

WORK AROUND:

Abstract that reactive portion of code that needs to use the css variable into a different component and import it.
Not the best but works for now. (see linked repo)

[wb-wenbei]

I also encountered the same problem

[howbizarre]

I have the same problem. No CSS variables are loaded.