Certain CSS classes causes Typescript generic types to fail

[Pentadome]

Vue - Official extension or vue-tsc version

2.0.26

VSCode version

Version: 1.92.0-insider Commit: 82104a3a6cf8713b81e5bbd97960dbf5c82a816a Date: 2024-07-05T00:00:00.000Z Electron: 29.4.0 ElectronBuildId: 9728852 Chromium: 122.0.6261.156 Node.js: 20.9.0 V8: 12.2.281.27-electron.0 OS: Windows_NT x64 10.0.22631

Vue version

3.4.31

TypeScript version

5.5.3

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (16) x64 AMD Ryzen 7 7800X3D 8-Core Processor
    Memory: 20.36 GB / 31.22 GB
Binaries:
    Node: 22.4.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.22 - C:\Program Files\nodejs\yarn.CMD
    npm: 10.8.1 - C:\Program Files\nodejs\npm.CMD
Browsers:
    Edge: Chromium (126.0.2592.87)
    Internet Explorer: 11.0.22621.3527

Steps to reproduce

This works:

<script setup lang="ts" generic="T extends 'checkbox' | 'radio'">
defineProps<{
  type: T;
}>();

defineModel<boolean>({ required: true });
</script>

<template>
  <div class="relative size-5">

  </div>
</template>

This causes error:

<script setup lang="ts" generic="T extends 'checkbox' | 'radio'"> <-- Cannot find name T
defineProps<{
  type: T; <-- Cannot find name T
}>();

defineModel<boolean>({ required: true });
</script>

<template>
  <div class="relative size-5">

    <div
      aria-hidden="true"
      class="pointer-events-none absolute size-full border border-primary2 p-1 peer-checked:*:block peer-[&[type='radio']]:rounded-full peer-[&[type='radio']]:*:rounded-full">
      <div class="hidden size-full border border-primary2 bg-primary2" />
    </div>
  </div>
</template>

This causes another error:

<script setup lang="ts" generic="T extends 'checkbox' | 'radio'">
defineProps<{
  type: T;
}>();

defineModel<boolean>({ required: true });
</script>

<template>
  <div class="relative size-5">
    <input
      v-model="modelValue"
      :type="type" <- Error
      class="peer absolute left-0 top-0 size-full appearance-none" />
    
  </div>
</template>

Type '[{ type: PropType<T>; required: true; }] extends [Prop<infer V, infer D>] ? unknown extends V ? IfAny<V, V, D> : V : { type: PropType<T>; required: true; }' is not assignable to type 'InputTypeHTMLAttribute | undefined'.
  Type '{ type: PropType<T>; required: true; } | (unknown extends T ? unknown : T)' is not assignable to type 'InputTypeHTMLAttribute | undefined'.
    Type '{ type: PropType<T>; required: true; }' is not assignable to type 'InputTypeHTMLAttribute | undefined'.
      Type '[{ type: PropType<T>; required: true; }] extends [Prop<infer V, infer D>] ? unknown extends V ? IfAny<V, V, D> : V : { type: PropType<T>; required: true; }' is not assignable to type 'string & {}'.
        Type '{ type: PropType<T>; required: true; } | (unknown extends T ? unknown : T)' is not assignable to type 'string & {}'.
          Type '{ type: PropType<T>; required: true; }' is not assignable to type 'string & {}'.
            Type '{ type: PropType<T>; required: true; }' is not assignable to type 'string'.
              Type '[{ type: PropType<T>; required: true; }] extends [Prop<infer V, infer D>] ? unknown extends V ? IfAny<V, V, D> : V : { type: PropType<T>; required: true; }' is not assignable to type 'string'.
                Type '{ type: PropType<T>; required: true; } | (unknown extends T ? unknown : T)' is not assignable to type 'string'.
                  Type '{ type: PropType<T>; required: true; }' is not assignable to type 'string'.

This seems to be related to this issue which will be fixed in 3.5

What is expected?

All the other generic components work fine, but for some reason under this particular circumstance I get errors.

What is actually happening?

Generic type causes errors.

Link to minimal reproduction

https://github.com/Pentadome/vue-generic-error

Any additional comments?

No response

[Pentadome]

It seems that having an css class with 2 single quotes, (e.g. 'radio' or 'checkbox') in it causes it to fail.

<script setup lang="ts" generic="T"> <- Cannot find name 'T'.
defineProps<{
  type: T;
}>();

defineModel<boolean>({ required: true });
</script>

<template>
  <div class="['radio']"></div>
</template>

<style>
.\[\'radio\'\] {
  color: red
}

</style>

[dbssman]

Stumbled upon this today while trying to make a component generic.
At first I thought I might have been doing something wrong but then I realized that the issue, exactly as pointed out above was about a class containing single quotes.

In my case, I use tailwind so this would be a pretty common usage:
before:content-['+']

If someone else is facing the same issue with tailwind, remember you can always do something like this:

<div data-before="+" class="before:content-[attr(data-before)]" />