unocss-transformer-attribute-values-group

Installation

pnpm add -D unocss-transformer-attribute-values-group

Usage:

// uno.config.ts
import { defineConfig } from 'unocss'
import transformerAttrValuesGroup from 'unocss-transformer-attribute-values-group'

export default defineConfig({
  // ...
  transformers: [
    transformerAttrValuesGroup(),
  ],
})

<script setup lang="ts">
const type = ref<'number' | 'text'>()
const name = ref<'jack' | 'tom'>()

function changeTypeAndName() {
  // ......
}
</script>

<template>
  <input
    :type="type"
    class="[&[type=(number text)]]:c-red"
  >
  <div
    :data-name="name"
    class="data-[name=(jack tom)]:c-red"
  />
</template>

transformed like:

<input class="[&[type=number],&[type=text]]:c-red" />
<div class="data-[name=jack]:c-red data-[name=tom]:c-red" />

tests for more details.

References

• using-arbitrary-variants
• the better arbitrary-variants of unocss