proposal: cumbersome css class API.

[joerdav]

I've been using templ to build some web pages, and am using bulma.io for styling. Most css frameworks like this work using thin css classes, so it's not strange to have around 5 classes on an element in some cases.

Currently the templ classes API makes it tough to do this kind of thing dynamically.

If the classes are all static then the following works:

templ Template() {
    <span class="c1 c2 c3 c4"></span>
}

As soon as you want to include a templ css class you need to use templ.Classes:

css customClass() {
    background-color: black;
}

templ Template() {
    <span class={templ.Classes(templ.Class("c1"), templ.Class("c2"), templ.Class("c3"), templ.Class("c4"), customClass())}></span>
}

Proposal 1 - Support 2 class attributes.

Allow strictly one static class attribute and one dynamic (this doesn't work at the moment):

css customClass() {
    background-color: black;
}

templ Template() {
    <span class="c1 c2 c3 c4" class={templ.Classes(customClass())}></span>
}

Proposal 2 - Support spaces in a templ.Class

Allow spaces in a templ.Class this goes against the type as it isn't plural (this doesn't work at the moment):

css customClass() {
    background-color: black;
}

templ Template() {
    <span class={templ.Classes(templ.Class("c1 c2 c3 c4"), customClass())}></span>
}

Proposal 3 - Create an alternative to templ.Classes that takes a string as first parameter.

A new function that supports static classes as a string then variadic templ.Class.

css customClass() {
    background-color: black;
}

templ Template() {
    <span class={templ.SplitClasses("c1 c2 c3 c4", customClass())}></span>
}

[a-h]

In https://reactjs.org/docs/faq-styling.html React recommends this package to deal with the same sort of problem - https://www.npmjs.com/package/classnames#usage-with-reactjs

[joerdav]

It looks like to implement that in templ, it would require templ.Classes to have the signature func(c ...any) templ.CSSClasses.
So you could pass in either, string, map[string]bool or templ.Class.

Or continue with the implementation we have now but use . import notation to make it less verbose:

import . "github.com/a-h/templ"

css customClass() {
    background-color: black;
}

templ Template() {
    <span class={Classes(Class("c1"), Class("c2"), Class("c3"), Class("c4"), customClass())}></span>
}

[nics]

Hi, any progress on this? I'm in a similar situation with many small classes.

I'm now using this cumbersome helper (is there an alternative way?):

func sidebarClass(c *ctx.Ctx) templ.CSSClasses {
	classes := []templ.CSSClass{templ.Class("c-sidebar"), templ.Class("d-none"), templ.Class("d-lg-flex")}
	if c.User != nil {
		classes = append(classes, templ.Class("c-sidebar--dark-gray"))
	}
	return templ.Classes(classes...)
}

[a-h]

No, haven't made any progress on this. I wanted to decide the best way to proceed in terms of design. I'm thinking that allowing multiple class attributes might be the best way, and would fit with allowing if statements in the attribute list as per #65

templ Template(u User) {
    <span class="c1 c2" class="c3"
    if u.IsLoggedIn() {
       class="c4"
    }
   class={ getUserClasses(u) }>Content</span>
}

[a-h]

It looks like to implement that in templ, it would require templ.Classes to have the signature func(c ...any) templ.CSSClasses.

Absolutely! And once that's done (see branch linked above), the syntax is a lot less verbose.

templ Button(text string) {
	<button class={ templ.Classes(className(), "&&&unsafe", "safe") } type="button">{ text }</button>
}

To do optional attributes, you can use a map expression, which is a bit ugly, but in the branch above it works.

templ MapCSSExample() {
	<div class={ templ.Classes(map[string]bool{ "a": true, "b": false, "c": true }) }></div>
}

The templ.Classes function's variadic nature could be used (abused?) to support the concept of a string followed by a boolean expression or value as being a map entry, so the following would render "a b c d" as classes.

templ MapCSSExample() {
	<div class={ templ.Classes("a", true, "b", "c", "d") }></div>
}

Thoughts?

[joerdav]

This is looking much cleaner for more complex cases. The last example could be useful but could also be prone to developer error.

I wonder if we could use generics some way to constrain what can be entered at compile time.

If not I suppose there's the benefit that this code passes through the templ generate command, so the command could error if the wrong types are passed in.

[a-h]

I don't think there's a way to constrain with generics without proper union types.

I have updated the syntax in the branch above to support an even less verbose mechanism at the cost of reduced type safety in the class Go expression. Because the class attribute now expects a slice of any, you can put something in the slice that isn't supported, and it will be a runtime issue instead of a compile time error. In this case templ will include a new CSS class name called "--templ-css-class-unknown-type" so that it can be identified.

So now, instead of:

templ MapCSSExample() {
	<div class={ templ.Classes("a", "b", "c", cssExpression()) }></div>
}

You can now do this. In addition, the previous syntax is still supported.

templ MapCSSExample() {
	<div class={ "a", "b", "c", cssExpression() }></div>
}

Since in Go, iterating map keys is not ordered by insertion, I've ordered the keys in map[string]bool maps.

templ MapCSSExample() {
	<div class={ map[string]bool{ "a": true, "b": false, "c": true } }></div>
}

I've also added a KV type which can be used instead, which ensures order:

templ MapCSSExample() {
	<div class={ templ.KV("a", true), templ.KV("b": false) } }></div>
}

I think there's one more change to go... in that it's possible to forget to call a templ CSS expression as a function, for example, here, I've missed the brackets.

templ MapCSSExample() {
	<div class={ templ.Classes("a", "b", "c", cssExpression) }></div>
}

In this case, the CSS class handling code needs to call the function too.

[a-h]

Right, I think that's it. Once this PR is merged, you can do this...

templ MapCSSExample() {
	<div class={ "a", "b", "c", cssExpression, templ.KV("c", false) }></div>
}