css: Support arguments in CSS components

[tonilogbo]

I am attempting build dynamic pie charts using CSS where the percentage would be controlled by a CSS variable calculated on the server. I'm not sure if this can currently be achieved in templ because style attributes do not allow for templ expressions.

[joerdav]

There is some flexibility in styles at the moment: https://templ.guide/syntax-and-usage/css-style-management/#css-expressions

However, I think what you are asking for is for css functions to allow the passing of parameters?

Currently this is invalid:

package main

css myStyle(color string) {
	color: {color};
}

templ myComponent() {
	<p class={myStyle("blue")}>Hello, blue.</p>
	<p class={myStyle("red")}>Hello, red.</p>
}

[tantalic]

Allowing CSS expressions to take parameters would be extremely helpful in creating components which maximize re-use/flexibility. As a matter of fact, I found this discussion after trying code using the exact syntax @joerdav shows above and working my way back from the error to the cssExpressionParser that currently returns an error when parameters are included.

Would the maintainers be open to such a feature?

[joerdav]

I think it's a valuable feature, seems ergonomic for css functions to support this. I think we just haven't got round to it yes as it's not high up on the priority list :)

[lukpank]

For me most use cases would be covered if css components
would interpolate integers (as opposed to strings in templ components)
(there could be special handling for specific css properties, such
as background-image, see issue #261).

If having different interpolation meaning between templ and css components would be a problem, maybe one could introduce some prefix such as {# x} to mean integer interpolation (as opposed to string interpolation) and in css components only allow integer interpolation and leave string interpolation for later decision. (I think integer interpolation could be considered safe).

Example usage:

css square(size int) {
    width: { size }px;
    height: { size }px;
}

templ useAsClass() {
    <div class={ square(100) }/>
}

should render to something like

<style type="text/css">
 .className_f179{width:100px;height:100px}
</style>
<div class="className_f179"></div>

And having parameterized css components it would also be useful to
allow using css components interpolated as value for style attribute

templ useAsStyle() {
    <div style={ square(100) }/>
}

which should render as

<div style="width:100px;height:100px"></div>

[a-h]

@joerdav just implemented CSS arguments. There's a few good improvements in the main branch for the next release.