Apply css rules based on html data attribute

[mtt-artis]

I'm using Radix-UI and i'd like to apply css rules based on html data attribute.

Is there a syntax or a variant to do so ?

something like this:

const A = ({state}: {state: "active" | "error"}) => (
  <button
    data-state={state}
    className='[data-state="active"]:bg-blue [data-state="error"]:bg-red'
  >
    my button
  </button>
)

[therealokoro]

Hmmmmmm 🤔, this could be very useful you know. I guess this should fall under custom selectors

[mtt-artis]

so i made a custom variant in my unocss config

import react from '@vitejs/plugin-react';
import Unocss from 'unocss/vite';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(), 
    Unocss({
      variants: [
        (matcher) => {
          const [, attribute = '', value = ''] = matcher.match(/^\[([^\/]+)\/?(.*)\]:/) ?? []
          if (!attribute) {
            return { matcher }
          }
          const attributeValue = value ? `="${value}"` : value;
          return {
            matcher: matcher.replace(/^\[.+\]:(.*)$/, '$1'),
            selector: (s) => `[${attribute}${attributeValue}]${s}`,
          }
        }
      ]
    }),
  ]
})

and use it like this

const A = ({state}: {state: "active" | "error"}) => (
  <button
    data-state={state}
    className='[data-state/active]:bg-blue [data-state/error]:bg-red'
  >
    my button
  </button>
)

i had some issues if i kept the = so i replaced it with a /, i wish someone could make a = version
and I removed the quotes as they might interact with the class string

PS: is there a discord community ?

[zyyv]

const A = ({state}: {state: "active" | "error"}) => (
  const className = state === 'active' ? 'bg-blue' : 'bg-red'
  <button className='{className}'>
    my button
  </button>
)

Excuse me for not knowing Radix-UI, but wouldn't it be simpler?

ps: here is UnoCSS discord community. https://discord.gg/xagTXneNHd

[chu121su12]

The latest tailwind release contains 2 useful variants: aria and data. I'm unsure how this will interact with attributify but they are quite useful

[mtt-artis]

i do not know how Radix works under the hood but
it applies data-attributes on html element and they are not accessible from the tsx.

moreover, it's easier if you have multiple attributes to check

[mtt-artis]

@chu121su12 Are these variants already implemented in preset-wind?

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[sibbng]

This feature is added in #1816