Add support for objects with `toString` methods
- Dominant language
- JavaScript
- Stars
- 9.8k
- Forks
- 185
- PR merge metrics
- No merged PRs in 30d
Description
Hi there, I'm using a css-in-js library ([stitches](https://github.com/stitchesjs/stitches)) which returns class names as objects with custom `toString` methods. This requires calling `toString` before passing the "class names" to `clsx`- otherwise `clsx` assumes the object is a config/mapping object.
```js
// Current usage
const pink = css({ color: "pink" });
clsx(pink().toString())
```
I currently have a patch package which adds an additional check to the `toVal` function, checking to see if a `mix` object has it's own `toString` method and calls/returns that if so.
```js
// General idea
if (mix.hasOwnProperty("toString")) {
str += mix.toString();
}
```
I noticed that `classnames` has a [condition for this](https://github.com/JedWatson/classnames/blob/main/index.js#L32) ([original PR](https://github.com/JedWatson/classnames/pull/170)). React also calls `toString` if you pass an object to `className`. I'm wondering if it might be useful to include this behavior in `clsx`? I can contribute a PR if so.
Contributor guide
No contributing guide indexed for this repository
Research direction
Start by locating the `toVal` function and reviewing how it handles object values. Confirm the intended behavior for objects with their own `toString` method, then add coverage for that case; done means `clsx` uses the returned string instead of treating the object as a mapping.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100