ben-rogerson / twin.macro

🦹‍♂️ Twin blends the magic of Tailwind with the flexibility of css-in-js (emotion, styled-components, solid-styled-components, stitches and goober) at build time.
MIT License
7.92k stars 183 forks source link

DaisyUI 3.x Tooltip dynamic variant not working #807

Open fini opened 1 year ago

fini commented 1 year ago

Sorry for the vague title, but I am not entirely sure what causes this error.

In DaisyUI 3.x the tooltip color variants are set by changing two css variables. .tooltip-success for example sets them like this, overriding the default colors:

.tooltip& {
  --tooltip-color: hsl(var(--su));
  --tooltip-text-color: hsl(var(--suc));
}

My code used to work in DaisyUI 2.x, but I think it used a different approach, here is a snippet of the code I use:

const variantTooltipStyles = {
  default: tw``,
  primary: tw`tooltip-primary`,
  info: tw`tooltip-info`,
  success: tw`tooltip-success`,
  warning: tw`tooltip-warning`,
  error: tw`tooltip-error`,
}

const StyledToolTip = styled.div(() => [
  tw`tooltip tooltip-bottom`,
  ({ variant }) => variantTooltipStyles[variant],
  // Workaround to force warning variant.
  `& {
    --tooltip-color: hsl(var(--wa));
    --tooltip-text-color: hsl(var(--wac));
  }`,
])

The variant styles are not being injected. I have included the workaround code, which works, but is not dynamic.

Note: even hardcoding the first style line like so, will not work:

tw`tooltip tooltip-success tooltip-bottom`,