lukeed / lukeed/clsx

Add support for objects with `toString` methods

Open
#52 1 comment 10 reactions 0 assignees View on GitHub
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.