Adds class directive shortcut and encapsulate styles

[jacwright]

When no expression is used in a class directive the class name will be used to evaluate whether the class should be added/removed.

E.g. the following will add the class "active" when you call component.set({ active });.

<div class:active></div>

Also, classes added this way are encapsulated in the stylesheet.

Old

<div class="{active ? 'active' : ''}"></div>
<style>
.active {
  /* Will be removed from the stylesheet since the compiler can't know it is used */
}
</style>

New

<div class:active="active"></div>
<style>
.active {
  /* Will be kept and encapsulate styles */
}
</style>

[jacwright]

Addresses #1694

[jacwright]

Docs are written in sveltejs/v2.svelte.dev#351

[Conduitry]

I don't know how I feel about camel casing the class name to get the state field name. On the one hand, I can see how this would let you follow CSS class naming conventions more easily - but on the other, we're not doing this transformation anywhere else (on component prop names, etc.). I think I'm leaning towards saying that the class name and property name have to exactly match.

[jacwright]

We use it when setting dataset properties so I used it without considering. With dataset however, that is all "under the hood". I didn't think about it being a new convention, and I understand your point.

Considering it further, I believe it is a useful convention and would lean towards keeping it, but I'm not passionate about it. I can remove it from here and sveltejs/v2.svelte.dev#351 if it is decided to remove it.

[PaulMaly]

@jacwright Btw, every time I used old form, Svelte never remove that classes because of thinking them unused. Instead, it just switched off unused classes removal for that tag (or maybe even a component) to prevent any misunderstandings with dynamic data. I was very painful to me, because few times it happened in my Tailwind project, so whole TW styles included in the component.

That’s why I don’t use any dynamic in class attribute anymore.

[Rich-Harris]

Thanks!

Also, classes added this way are encapsulated in the stylesheet.

Err... you sure? 😎 It understands ternary expressions, and now that we're changing undefined attributes to be non-existent, we can add binary expressions as well. Here's a demo.

It could get smarter about classes that are concatenated — it doesn't know, for example, that an element with class="thing {active ? 'active' : ''}" could match .thing or .active or .thing.active, so it will just bail and keep all classes. I'll add an issue for that.

I'm inclined to agree with @Conduitry about the camel-casing — I understand the motivation for it but I think it's easier to grok if everything is more literal.

[jacwright]

I removed the camelcase (adding code to ensure dashed shorthand still works) and updated the docs PR to reflect this. I also recommended in the docs to avoid shorthand for dashed classes, but it is supported because you know people will try.

[Conduitry]

There's already a utility function that does this, quotePropIfNecessary.

[Rich-Harris]

awesome 🍻