lukeed / clsx

A tiny (239B) utility for constructing `className` strings conditionally.
MIT License
8.28k stars 143 forks source link

strings should be trimmed? #31

Closed FDiskas closed 3 years ago

FDiskas commented 3 years ago

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

image

lukeed commented 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.

FDiskas commented 1 year ago

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.

Multiple spaces

var clsx = require("clsx")

clsx(' ', ' ', ' ', ' ', ' ');

Returns:

"         "

Same class name

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

lukeed commented 1 year ago

This utility does exactly what it should. It combines truthy values together.

FDiskas commented 1 year ago

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?

lukeed commented 1 year ago

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.

FDiskas commented 1 year ago

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