Version

3.1.2

Reproduction link

https://github.com/vuejs/rfcs/pull/231#issuecomment-872314916

Steps to reproduce

I used the Js variable in the style tag. This feature is working in development mode but not in production mode. The reason is, the variable names created are different.

<template>
  <div class="Example">
    <div class="area">
      <div class="form">
        <label>Select Color</label>
        <input type="color" v-model="customTheme" />
      </div>
      <div class="preview">
        <span>{{ customTheme }}</span>
        <div class="customColor"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from "vue";

export default {
   setup() {
    const customTheme = ref('');
    return {
      customTheme
    };
  },
};
</script>

<style>

.Example {
  --custom-color: v-bind("customTheme");
}
.customColor {
  background: var(--custom-color);
  width: 100px;
  height: 50px;
}
</style>

For example,

--7ba5bd90-customTheme => The name of the variable that is bind to this element. var(--e8f15df8) => This is the name of the variable generated in the style.

What is expected?

I expected this feature run in production mode too.

What is actually happening?

This feature is working in development mode but not in production mode.

duplicate of https://github.com/vuejs/vue-next/issues/3921

Duplicate of #3921