lvjiaxuan / unocss-transformer-attribute-values-group

Attribute values group transformer for UnoCSS.

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>
// ...
</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 usages.

References

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