Version

3.1.0-beta.3

Reproduction link

https://github.com/wenfangdu/vue-3-style-vars-tsx-repro

Steps to reproduce

Please see App.vue.

What is expected?

Works with TSX

What is actually happening?

Not working with TSX

compiler-sfc: support tsx in setup script (#3825) (01e8ba8), closes #3808

@yyx990803 I've tried v3.1.0-beta.4, still reproducible.

Repro: https://github.com/wenfangdu/vue-3-style-vars-tsx-repro

Can anyone reopen this 🙏?

I will check it later

@wenfangdu Can't reproduce, maybe you need to reinstall the deps to make sure you really update the deps

@HcySunYang I've tried deleting node_modules and package.json and updated vue to v3.1.0-beta.5, still reproducible.

I've updated repro to reflect this:

<!-- 👇 works -->
<script lang="ts">
  import { defineComponent, h } from 'vue'

  export default defineComponent({
    data() {
      return {
        color: 'red',
        font: {
          size: '2em',
        },
      }
    },
    setup() {
      return () => h('div', { class: 'text' }, 'hello')
    },
  })
</script>

<!-- 👇 works -->
<script>
  import { defineComponent } from 'vue'

  export default defineComponent({
    data() {
      return {
        color: 'red',
        font: {
          size: '2em',
        },
      }
    },
    setup() {
      return () => <div class='text'>hello</div>
    },
  })
</script>

<!-- 👇 does not work -->
<script lang="tsx">
  import { defineComponent } from 'vue'

  export default defineComponent({
    data() {
      return {
        color: 'red',
        font: {
          size: '2em',
        },
      }
    },
    setup() {
      return () => <div class='text'>hello</div>
    },
  })
</script>

<style>
  body {
    background: #000;
    text-align: center;
  }

  .text {
    color: v-bind(color);

    /* expressions (wrap in quotes) */
    font-size: v-bind('font.size');
  }
</style>

Just a black screen:

If it works, it should show:

@wenfangdu you should also update @vue/compiler-sfc

@edison1105 Thanks for the tip!