hue-... does not work with variants

[silveltman]

The following examples do not work

[&_.button]:hue-primary
sm:hue-primary

While the following does work:

[&_.button]:hue-red9
sm:hue-red9

[endigma]

Does hue-primary ever work? This might be an issue with aliases/hues interop rather than anything to do with the variant.

[endigma]

Just confirmed, hues aliases do interop normally. I'll have to look at the generated CSS.

[endigma]

Fixed in 2.5.4

[silveltman]

Still not working on my end, see no styling applied whatsoever.

I forgot to mention, but hue-primary is one of my defined aliases. I also tested without aliases, still not working

[endigma]

I tested with hover:hue-red hue-blue, Does that work on your end?

For the input .[&_.button]:hue-testb (testb aliases to amber) I'm seeing:

.\[\&_\.button\]\:hue-testb .button {
  --un-preset-radix-hue1: var(--un-preset-radix-amber1);
  --un-preset-radix-hue1A: var(--un-preset-radix-amber1A);
  --un-preset-radix-hue2: var(--un-preset-radix-amber2);
  --un-preset-radix-hue2A: var(--un-preset-radix-amber2A);
  --un-preset-radix-hue3: var(--un-preset-radix-amber3);
  --un-preset-radix-hue3A: var(--un-preset-radix-amber3A);
  --un-preset-radix-hue4: var(--un-preset-radix-amber4);
  --un-preset-radix-hue4A: var(--un-preset-radix-amber4A);
  --un-preset-radix-hue5: var(--un-preset-radix-amber5);
  --un-preset-radix-hue5A: var(--un-preset-radix-amber5A);
  --un-preset-radix-hue6: var(--un-preset-radix-amber6);
  --un-preset-radix-hue6A: var(--un-preset-radix-amber6A);
  --un-preset-radix-hue7: var(--un-preset-radix-amber7);
  --un-preset-radix-hue7A: var(--un-preset-radix-amber7A);
  --un-preset-radix-hue8: var(--un-preset-radix-amber8);
  --un-preset-radix-hue8A: var(--un-preset-radix-amber8A);
  --un-preset-radix-hue9: var(--un-preset-radix-amber9);
  --un-preset-radix-hue9A: var(--un-preset-radix-amber9A);
  --un-preset-radix-hue10: var(--un-preset-radix-amber10);
  --un-preset-radix-hue10A: var(--un-preset-radix-amber10A);
  --un-preset-radix-hue11: var(--un-preset-radix-amber11);
  --un-preset-radix-hue11A: var(--un-preset-radix-amber11A);
  --un-preset-radix-hue12: var(--un-preset-radix-amber12);
  --un-preset-radix-hue12A: var(--un-preset-radix-amber12A);
  --un-preset-radix-hue-fg: var(--un-preset-radix-amber-fg);
}

Which looks right to me. If that's not the output you want it's likely a problem with your variant not with the preset.

[endigma]

And

<div class="[&_.button]:hue-red">
  <div class="button h-5 w-5 bg-hue9"></div>
</div>

Makes

Which is what I'd expect here.

[endigma]

If you still can't get this working I'd appreciate a reproduction on GitHub.

[silveltman]

Will do that 👌

[endigma]

Actually, this is probably my fault for messing with releases. Try 2.5.5. Good thing is now releases are automated so probably won't see bugs like this anymore.