[🐞] cn() helper from @qwik-ui/utils bundles css-tree, which is only used for the theme helpers

[maiieul]

Which package is affected?

Headless Kit

Describe the bug

This means that the css-tree code (~60kb) will go into one bundle and will be shipped to the client.

Reproduction

🙅‍♂️

Steps to reproduce

create new empty qwik project
init qwik-ui
add button component
Consume it in main route with:

export default component$(() => {
  const switchSig = useSignal(false);
  return (
    <>
      <h1>Hi 👋</h1>
      <div>
        Can't wait to see what you build with qwik!
        <br />
        Happy coding.
      </div>
      <div>
        <Button size="sm" onClick$={() => (switchSig.value = !switchSig.value)}>
          Click Me
        </Button>
        {isBrowser && (
          <div class={cn(switchSig.value ? "bg-red-500" : "bg-blue-500")}>
            Browser
          </div>
        )}
      </div>
    </>
  );
});

System Info

🙅‍♂️

Additional Information

Two ideas to fix it:

1. move the theme helpers into a separate nx package
2. remove the cn() helper altogether with the use of @layer