Closed FDiskas closed 3 years ago
Nope, it accepts what's given. Only truthiness is checked, as your " "
could have been any other lengthy string.
This is by design as it also matches classnames
behavior & clsx
is a drop-in replacement, if desired.
Maybe it is supposed to be in the discussion section, but there is no such thing in this repo.
I just wanted to have an opinion on the following cases.
var clsx = require("clsx")
clsx(' ', ' ', ' ', ' ', ' ');
Returns:
" "
clsx('foo', 'foo', 'foo', 'foo', 'foo');
and in this case it returns
"foo foo foo foo foo"
End result is usually used in HTML and applying multiple CSS class names does not affect the end result and the sorting also does not matter here. I'm checking what the browser's javascript gets.
And it gets rid of all the mess - probably some sort of Set
is used.
https://jsbin.com/hivagotoko/edit?html,js,output
This utility does exactly what it should. It combines truthy values together.
so I suppose I should use
const classNames = [
true && 'foo',
false && 'buzz',
true && 'foo'
].filter(Boolean).join(' ');
instead of this lib? Any ideas for a better solution?
Yes, a DOMTokenList
implements a token set, which employs normal Set
behaviors. The string isn't manipulated until the DOMTokenList
is manipulated, so if you did classList.add("foo")
you'd see your HTML change to class="foo buz"
Beyond that, I'm not sure what you're doing or asking.
Let's imagine that I am building a web app to build layouts using tailwind CSS. There will be many configuration items on particular element and the outcome should be good-looking prettified source code of HTML elements with utility classes. So no repeated class names or extra spaces are allowed here. And first I was thinking to use this library to toggle class names on and off, but outcome is not good enough
If my string has space in it - I would like to be trimmed all incomming strings. It does not make sense to have them here