DaisyUI - Cannot combine more than one daisyUI classname

[Ian Christopher B. de Jesus]

DaisyUI works but anytime I include more than one DaisyUI classname, the second classname won't work

For example

 <button tw="btn btn-outline loading">adfa</button>

should display a button with an outline and a loading spinner inside. However, I only see an opaque button which corresponds to btn classname only.

I have forked the twin.example repo and tested this out inside next-emotion-typescript example. Here is the relevant code
https://github.com/iandjx/twin.examples/blob/f58899e78ef0a68c7501f270c641d8a10fe937ab/next-emotion-typescript/pages/index.tsx#L15

interestingly, I've found a codesandbox wherein it is working properly but on lower version of twin.macro and daisyui
https://codesandbox.io/s/twin-macro-daisyui-forked-kjprgg

i tried copying the .babelrc file from the codesandbox project to the twin.example project but to no avail.

[Ben Rogerson]

DaisyUI works with twin but unfortunately quite a few selectors are written for use in a class="x" attribute.

Here's part of what's generated with btn:

tw`btn`

// ↓ ↓ ↓ ↓ ↓ ↓

({
  // ...
  "&.loading,&.loading:hover": {
    "pointerEvents": "none"
  },
  "&.loading:before": {
    "marginRight": "0.5rem",
    "height": "1rem",
    "width": "1rem",
    "borderRadius": "9999px",
    "borderWidth": "2px",
    "animation": "spin 2s linear infinite",
    "content": "\"\"",
    "borderTopColor": "transparent",
    "borderLeftColor": "transparent",
    "borderBottomColor": "currentColor",
    "borderRightColor": "currentColor"
  },
  "@media (prefers-reduced-motion: reduce)": {
    "&.loading:before": {
      "animation": "spin 10s linear infinite"
    }
  },
  // ...
});

The loading class is specified in the selector itself.
A limitation is that twin can only add styles to current element, but not another.
As twin doesn't play a part in class creation, it's unable to apply these types of styles to another element.

So the fix is: We need to additionally add the variants to the className attribute to add those styles.

I know this isn't great news - best we can do here though.

[Ian Christopher B. de Jesus]

Thanks @ben-rogerson i think this is fine :)