Suggestion for modification to generated cx function

[Hecatron]

Hi,
I'm currently using panda css to write my own components library.
It's the best option for css-in-js I've seen so far.

One of the things I've done is split my library into two parts.
One package containing SystemStyleObject definitions like this for the css (in typescript)

import type { SystemStyleObject } from '@pandacss/types'

export const active: SystemStyleObject = {
  boxShadow: '0 10px 20px -10px rgba(var(--vs-color),1)',
  transform: 'translateY(-3px)'
}

And a second package containg vue controls.

<template>
  <div :class="test1">
    Active
  </div>
</template>
<script setup lang="ts">
import { css, cx } from '~pandacss/css'
import { nbutton } from 'neon-ui-css/components'
const test1 = cx(css(nbutton.vars), css(nbutton.common), css(nbutton.button), css(nbutton.active))
</script>

The general idea is that I can create seperate packages for things like react or other frameworks using the same css later on.

The current cx function only takes strings however and I can't use the css function within the css package
as both the css and cx function are locally scoped within the vue package inside the styled-system directory
This means I'd end up wrapping everything that's pulled from my css package with a css function.

As a workaround I implemented my own short implementation of the cx function
The only difference is that it checks to see if the input is an object, then wraps it in a css() function call if so.

import { css } from '~pandacss/css'
import type { SystemStyleObject } from '@pandacss/types'

type Argument = string | boolean | null | undefined | SystemStyleObject

/** Conditionally join classNames into a single string */
export function cx(...args: Argument[]): string {
  let str = '', i = 0, arg

  for (; i < arguments.length; ) {
    arg = arguments[i++]

    if (arg && typeof arg === 'string') {
      str && (str += ' ')
      str += arg
    }

    // Assume it's a SystemStyleObject
    if (arg && typeof arg === 'object') {
      str && (str += ' ')
      str += css(arg)
    }
  }
  return str
}

I just thought to ask would this be a good idea for the cx function generated by panda css?
It's only possible to check the type of the object within typescript though (can only check at build time but not runtime)

[astahmer]

hey, the cx is now smarter (#1195) in the latest release (v.0.11.1)