-
-
Notifications
You must be signed in to change notification settings - Fork 4.6k
feat: allow objects/arrays for class attribute #14714
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
Changes from all commits
Commits
Show all changes
21 commits
Select commit
Hold shift + click to select a range
48d2e83
WIP
dummdidumm 2082920
Merge branch 'main' into class-enhancements
dummdidumm 485dd9b
missed
dummdidumm 0ccf5b2
fix
dummdidumm 5358491
fix
dummdidumm 7664aee
rename, smooth over incompatibilities
dummdidumm 922c544
spread support + test
dummdidumm 343bef1
docs
dummdidumm 449f0a5
Merge branch 'main' into class-enhancements
dummdidumm 9a28106
types
dummdidumm 7840a2c
implement CSS pruning for array/object expressions
dummdidumm 9f2a257
beefier static analysis
Rich-Harris 2c2ef11
Merge branch 'main' into class-enhancements
Rich-Harris 1a860e0
lint
Rich-Harris c43f406
rename doc
Rich-Harris 14d8a1f
move class after all directive docs
Rich-Harris f78cde8
tweak docs - clarify top-level falsy values, stagger examples, demons…
Rich-Harris 9a90b89
changeset
Rich-Harris 9dabf44
fix
Rich-Harris 39687b4
Update documentation/docs/03-template-syntax/18-class.md
Rich-Harris 7650bb4
Apply suggestions from code review
dummdidumm File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
--- | ||
'svelte': minor | ||
--- | ||
|
||
feat: allow `class` attribute to be an object or array, using `clsx` |
This file was deleted.
Oops, something went wrong.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,90 @@ | ||
--- | ||
title: class | ||
--- | ||
|
||
There are two ways to set classes on elements: the `class` attribute, and the `class:` directive. | ||
|
||
## Attributes | ||
|
||
Primitive values are treated like any other attribute: | ||
|
||
```svelte | ||
<div class={large ? 'large' : 'small'}>...</div> | ||
``` | ||
|
||
> [!NOTE] | ||
> For historical reasons, falsy values (like `false` and `NaN`) are stringified (`class="false"`), though `class={undefined}` (or `null`) cause the attribute to be omitted altogether. In a future version of Svelte, all falsy values will cause `class` to be omitted. | ||
|
||
### Objects and arrays | ||
|
||
Since Svelte 5.16, `class` can be an object or array, and is converted to a string using [clsx](https://github.com/lukeed/clsx). | ||
|
||
If the value is an object, the truthy keys are added: | ||
|
||
```svelte | ||
<script> | ||
let { cool } = $props(); | ||
</script> | ||
|
||
<!-- results in `class="cool"` if `cool` is truthy, | ||
`class="lame"` otherwise --> | ||
<div class={{ cool, lame: !cool }}>...</div> | ||
``` | ||
|
||
If the value is an array, the truthy values are combined: | ||
|
||
```svelte | ||
<!-- if `faded` and `large` are both truthy, results in | ||
`class="saturate-0 opacity-50 scale-200"` --> | ||
<div class={[faded && 'saturate-0 opacity-50', large && 'scale-200']}>...</div> | ||
``` | ||
|
||
Note that whether we're using the array or object form, we can set multiple classes simultaneously with a single condition, which is particularly useful if you're using things like Tailwind. | ||
|
||
Arrays can contain arrays and objects, and clsx will flatten them. This is useful for combining local classes with props, for example: | ||
|
||
```svelte | ||
<!--- file: Button.svelte ---> | ||
<script> | ||
let props = $props(); | ||
</script> | ||
|
||
<button {...props} class={['cool-button', props.class]}> | ||
{@render props.children?.()} | ||
</button> | ||
``` | ||
|
||
The user of this component has the same flexibility to use a mixture of objects, arrays and strings: | ||
|
||
```svelte | ||
<!--- file: App.svelte ---> | ||
<script> | ||
import Button from './Button.svelte'; | ||
let useTailwind = $state(false); | ||
</script> | ||
|
||
<Button | ||
onclick={() => useTailwind = true} | ||
class={{ 'bg-blue-700 sm:w-1/2': useTailwind }} | ||
> | ||
Accept the inevitability of Tailwind | ||
</Button> | ||
``` | ||
|
||
## The `class:` directive | ||
|
||
Prior to Svelte 5.16, the `class:` directive was the most convenient way to set classes on elements conditionally. | ||
|
||
```svelte | ||
<!-- These are equivalent --> | ||
<div class={{ cool, lame: !cool }}>...</div> | ||
<div class:cool={cool} class:lame={!cool}>...</div> | ||
``` | ||
|
||
As with other directives, we can use a shorthand when the name of the class coincides with the value: | ||
|
||
```svelte | ||
<div class:cool class:lame={!cool}>...</div> | ||
``` | ||
|
||
> [!NOTE] Unless you're using an older version of Svelte, consider avoiding `class:`, since the attribute is more powerful and composable. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.