Comments (9)
@ZeroPie thanks for the good-natured response to my thoughts. Yes, I'll add a note to the docs as you're not the first one thinking to use clsx
here.
React is a mysterious and wonderful beast. I feel like they gave everyone a gift in pushing forward a way of doing web development based around components. But at the same time, I feel they also introduced a lot of conventions that were necessary at the time but now are no longer necessary (and a little awkward, like writing style classes using using camelCase) as Vue, Svelte, and a bunch of others have smoothed off a lot of rough edges. Everyone is now innovating and copying each others' best work in step. It's pretty neat to see.
from unocss.
I've only ever seen clsx
used in Svelte by people coming from the React way of writing things. As I see it, it's a misunderstanding of how to write Svelte code. The Svelte way is to write conditional css classes is class:text-red-500={flag}
and not class={clsx(flag && "text-red-500")}
. Svelte-Scoped supports all the encouraged ways of writing classes. As well, even though I personally don't recommend it because it makes code harder to read, we also support using inline expressions like class="bg-red {flag ? 'text-white' : 'text-yellow'}"
. Svelte's ability to simply throw anything inside of brackets obviates the need for clsx
.
I'm closing this as we do not need to nor want to encourage use of clsx
in Svelte projects. Please do continue the conversation here however, if you have a compelling use case for something you can do using clsx
that is not possible using any of the normal Svelte class writing methods nor using a simple style block for the extremely complicated scenarios. What I mean is something like this:
<div
class:one-set={flag}
class:the-other-set={!flag} />
<style>
.one-set {
--at-apply: bg-red-100 underline font-semibold and twenty more classes...;
}
.the-other-set {
--at-apply: bg-blue-100 text-xs opacity-50;
}
</style>
from unocss.
@jacob-8 i laughed, i do indeed come from the React world.
The more you know :)
Is this a very obvious thing?
Because a bunch of tutorials/results on google and even some libraries do include and recommend clsx usage.
Maybe losing a line in the docs would help someone in the future?
Thank you.
from unocss.
Svelte is still missing a good way to have multiple classes for a certain condition though, class:
for each class is kind of clunky and it doesn't work at all if you want the same class for different conditions, at which point you need to edit the condition like {a && b}
which is just annoying.
I would personally like something like `classes:"utilities separated by spaces here"={condition}. Hopefully something like this can be added sometime in Svelte 5.
from unocss.
I don’t know if this is a problem with unocss. It seems to be caused by Svelte’s class processing rules. Static classes will be processed, but dynamic classes will be retained. The resulting difference
from unocss.
Do you get the same result in recent (not 5) Svelte?
from unocss.
I do, i updated to svelte 4.2.12 and it's still there
https://stackblitz.com/edit/unocss-unocss-jzqdzz?file=package.json
from unocss.
I would personally like something like `classes:"utilities separated by spaces here"={condition}. Hopefully something like this can be added sometime in Svelte 5.
You could try creating an RFC proposal for such if you want. It may get traction.
For others following @henrikvilhelmberglund pointed out in a prior issue that the svelte-multicssclass Vite plugin can help with this in lieu of it being provided by the framework: #2322
from unocss.
@henrikvilhelmberglund @jacob-8
Thank you for the exchange.
I have something to share now that i have been using {$$props.class} to pass classes from parent to child.
I have run into a problem at times, which is ${props.class} won't necessarily have higher prio than the tailwind classes already present in the children component. So i have to prefix them with ! in order to override children utility classes.
How do you guys deal with it?
from unocss.
Related Issues (20)
- Chaining arbitrary values doesn't seem to work
- Unocss is not working on iOS below 16.4 as it doesn`t support lookbehind regexp
- Vscode unocss not working HOT 4
- css not working properly (UnoCSS/Storyblok) HOT 1
- Icons Preset Causes Large CSS Bundle - Need Solution for On-Demand CSS for Vue Components HOT 1
- 【Feature】Select alternative versions with playground support. HOT 7
- !:flex-grow-0 and important:flex-grow-0 not working
- 【Bug? => Next.js & Transformers: Directives, VariantGroup, CompileClass, presetAttributify!】 Insufficient coverage About `presetAttributify` using `AttributifyAttributes` on JSX Element? HOT 5
- VSCode extension autocomplete not working HOT 1
- mb-14px 不生效?写mb14px才生效?
- @unocss/runtime icons disappear randomly. HOT 2
- it doesn't work when I use unocss to set some antd component style HOT 2
- failed to load icon for `vue key word: for, if, return, ...` HOT 1
- UnoCSS SvelteKit Configuration HOT 2
- Unocss Interactive Docs is freezing HOT 3
- Not support multiple `:not` HOT 2
- Subcomponents are not effective HOT 1
- uni-ui的内部样式被意外转换
- feat: add ignorePrefix
- svg解析出错 HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from unocss.