[Vue3][JSX] Vue Fails to Track Dynamically Computed Class Names in JSX, Causing CSS Processor to Ignore Styles (Two Instances)

[Misaka299]

Related plugins

• [ ] plugin-vue

• [x] plugin-vue-jsx

Describe the bug

I am making a configuration file editor. But I encountered two problems,

1. The class generated by jsx is not captured by vue, which causes the style of
2. Tailwind believes that the class generated by jsx calculation does not exist, so it does not correctly generate the corresponding style. I can only stop using tailwind and switch to inline style

<template>
  <ConfigFrom/>
</template>

<script setup lang="jsx">
import {ref, computed, watch, reactive} from 'vue'

const props = defineProps({
  configData: {
    type: Object,
    required: true
  },
  configDesc: {
    type: Object,
    required: true
  }
})

const configDescMap = reactive(new Map(Object.entries(props.configDesc)))

const rainbowColor = [
  "rc1",
  "rc2",
  "rc3",
  "rc4",
  "rc5",
  "rc6",
  "rc7",
]

const LevelCard = (title, desc, content, level) => {
  const colorLevel = level % 7;
  return <>
    <div class="flex flex-col">
      // bug1: rc1-rc7 's style not generate
      <div class={`flex flex-row ${rainbowColor[colorLevel]}`}>
        // bug2: pl-[${level * 2}px] 's style not generate
        <h3 class={`pl-[${level * 2}px]`}>{title}</h3>
        <div>{content}</div>
      </div>
      <div>
        {content}
      </div>
    </div>
  </>;
}

function Xx(data, pKey = '', level = 0) {
  // console.error(data);
  let node = [];
  for (const key in data) {
    if (!data.hasOwnProperty(key)) {
      return <></>;
    }
    // console.warn(key);
    const value = data[key];
    let isNode = node.isArray(value) ? false : typeof value === 'object';

    const indent = '  '.repeat(level);
    const keyLink = pKey + key;
    if (isNode) {
      node.push(LevelCard('node: =>' + keyLink, keyLink + "'s desc", keyLink + "'s content", level))
      node.push((Xx(value, '.' + key, level + 1)));
    } else {
      node.push(<pre>{indent}{`item: => ${pKey} ${key}`}</pre>)
    }
  }
  return (node);
}

for (const key in props.configData.rules) {
  console.log(typeof props.configData.rules);
  console.warn(`${key}`);
}

const ConfigFrom = () => {
  return (Xx(props.configData))
}

</script>

<style scope>
.rc1 {
  border: 2px solid #FFD1D1;
}

.rc2 {
  border: 2px solid #FFE8C9;
}

.rc3 {
  border: 2px solid #FFF9C4;
}

.rc4 {
  border: 2px solid #D8F5D1;
}

.rc5 {
  border: 2px solid #D1E5FF;
}

.rc6 {
  border: 2px solid #E3D1FF;
}

.rc7 {
  border: 2px solid #F5D1FF;
}
</style>

Reproduction

https://github.com/Misaka299/configedit.git

Steps to reproduce

No response

System Info

PS C:\configedit> npx envinfo --system --npmPackages '{vite,@vitejs/*}' --binaries --browsers

  System:
    OS: Windows 10 10.0.19045
    CPU: (6) x64 Intel(R) Core(TM) i5-9600KF CPU @ 3.70GHz
    Memory: 11.86 GB / 31.94 GB
  Binaries:
    Node: 18.20.5 - C:\Program Files\nodejs\node.EXE
    npm: 10.8.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: bookmarks.html
initial_preferences
    Edge: Chromium (127.0.2651.74), ChromiumDev (127.0.2610.3)
    Internet Explorer: 11.0.19041.4355
  npmPackages:
    @vitejs/plugin-vue: ^5.2.1 => 5.2.3 
    @vitejs/plugin-vue-jsx: ^4.1.2 => 4.1.2 
    vite: ^6.2.0 => 6.2.6 

PS C:\configedit>

Used Package Manager

npm

Logs

No response

Validations

• [x] Follow our Code of Conduct
• [x] Read the Contributing Guidelines.
• [x] Read the docs.
• [x] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [x] Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• [ ] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• [x] The provided reproduction is a minimal reproducible example of the bug.