add multiple class toggles example

[CreaturesInUnitards]

This answers the immediate question I had when I first saw the class:foo syntax.

[codecov-io]

Codecov Report

Merging #2517 into master will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##           master    #2517   +/-   ##
=======================================
  Coverage   91.83%   91.83%           
=======================================
  Files           1        1           
  Lines          49       49           
=======================================
  Hits           45       45           
  Misses          4        4

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update e7885f2...644c02e. Read the comment docs.

[Conduitry]

class:is-admin isn't a good example, as this generates code that sets the class according to the value is-admin - i.e., is minus admin. The compiler should actually be throwing an exception in that case.

[CreaturesInUnitards]

@Conduitry
Oh interesting. Because of course this works...

<script>
	let name = 'world';
</script>

<style>
	.foo-bang { color: red }
	.bar { color: blue }
</style>

<h1 class:foo-bang={name} class:bar={!name}>Hello {name}!</h1>

Generates this JS:

...
p(changed, ctx) {
	if (changed.name) {
		toggle_class(h1, "foo-bang", name);
		toggle_class(h1, "bar", !name);
	}
}
...

[Conduitry]

Right, the class names themselves can be any valid class name - it's when you don't have the ={whatever} part that the compiler assumes the variable name is the same as the class name.

class:is-admin is equivalent to class:is-admin={is-admin}, which is technically valid, but is almost certainly not something you'd want to do.

[CreaturesInUnitards]

Ah, gotcha, duh. Camelcased it, thanks!

[Rich-Harris]

nice improvement, thank you