Inline Styles

[ainsleyclark]

Hi,

I'm struggling to understand inline styles.
I would like to apply a width property aka `style="width: 50%"

type FormGroupProps struct {
	Width       *int
}

func width(percent *int) string {
	return fmt.Sprintf("%d%%", percent)
}

templ FormGroup(props FormGroupProps) {
	<fieldset
		if props.Width != nil {
			style={ templ.SafeCSSProperty(width(props.Width)) }
		}
	>
}

I'm unsure why the docs indicate I need to use class names for styling?

[joerdav]

As of now yes, the correct way to do what you are trying is:

type FormGroupProps struct {
	Width       *int
}

css width(percent *int) {
	width: { fmt.Sprintf("%d%%", percent) };
}

templ FormGroup(props FormGroupProps) {
	<fieldset
		if props.Width != nil {
			class={ width(props.Width) }
		}
	>
}

And this can be taken further with KV:

type FormGroupProps struct {
	Width       *int
}

css width(percent *int) {
	width: { fmt.Sprintf("%d%%", percent) };
}

templ FormGroup(props FormGroupProps) {
	<fieldset
		class={ templ.KV(width(props.Width), props.Width != nil) }
	>
}

[joerdav]

It was originally a security concern, however we are reconsidering it, we may open up the style attr so your original solution would work.

[JWTappert]

Do the css components allow params? I am trying to pass in a couple params similar to your examples and get parse errors.

[ainsleyclark]

@joerdav do you know when this will be likely be incorporated into prod?

[joerdav]

@JWTappert Yes they do support params, they must be strings: https://templ.guide/syntax-and-usage/css-style-management#css-component-arguments

[joerdav]

@ainsleyclark there currently hasn't been any work done to relax the rules around style attributes. The wider css discussion is happening here: #740

But I believe that a PR to accept strings in the style tag would be accepted. It would involve removing this code and any tests that lock ensure it:

templ/parser/v2/types.go

Lines 489 to 496 in 485465e

	// Validate that style attributes are constant.
	for _, attr := range e.Attributes {
	if exprAttr, isExprAttr := attr.(ExpressionAttribute); isExprAttr {
	if strings.EqualFold(exprAttr.Name, "style") {
	msgs = append(msgs, "invalid style attribute: style attributes cannot be a templ expression")
	}
	}
	}

And updating the docs to remove mentions of it:

templ/docs/docs/10-security/01-injection-attacks.md

Line 34 in 485465e

Style attributes cannot be expressions, only constants, to avoid escaping vulnerabilities. templ style templates (`css className()`) should be used instead.

[JWTappert]

These examples are extremely helpful. Commenting so I can follow updates as I am trying to do something similar.

[eslam-allam]

I don't quite understand how the css components are supposed to work though. I understand that templ will generate a <style> element above the element that used the css component with a random class name. Every time i attempt to use it though the <style> element gets converted to a string and doesn't work. For example:

this template:

css stashBackground(stash model.UserStash) {
    background-color: {"#" + stash.ColourHex};
  }

templ StashList(stashes []model.UserStash, options model.StashOverviewItemsOptions) {
	<select
		name="stashId"
		id="userStashes"
		class="stash-item-criteria select select-bordered w-full max-w-xs h-full disabled:skeleton disabled:z-0"
		if len(stashes) == 0 {
			disabled
		}
		hx-get="/user/stashes/items"
		hx-target="#stashItems"
		hx-swap="outerHTML"
		hx-params="*"
		hx-indicator="#itemsSpinner"
	>
		<option disabled selected>Select a Stash Tab</option>
		for _, stash := range stashes {
			<option class={ stashBackground(stash) } value={ stash.Id }>{ stash.Name }</option>
		}
	</select>
}

becomes this when generated:

<select name="stashId" id="userStashes" class="stash-item-criteria select select-bordered w-full max-w-xs h-full disabled:skeleton disabled:z-0" hx-get="/user/stashes/items" hx-target="#stashItems" hx-swap="outerHTML" hx-params="*" hx-indicator="#itemsSpinner">
                        <option disabled selected>Select a Stash Tab</option>
                        <style type="text/css">
                            .stashBackground_43c3 {
                                background-color: #ffffff;
                            }
                        </style>
                        <option class="stashBackground_43c3" value="">Test</option>
                    </select>

then the browser places it in the DOM like this:

<select name="stashId" id="userStashes" class="stash-item-criteria select select-bordered w-full max-w-xs h-full disabled:skeleton disabled:z-0" hx-get="/user/stashes/items" hx-target="#stashItems" hx-swap="outerHTML" hx-params="*" hx-indicator="#itemsSpinner">
  <option disabled="" selected="">Select a Stash Tab</option>
  .stashBackground_43c3{background-color:#ffffff;}
  <option class="stashBackground_43c3" value="" style="background-color: #ffffff;">Test</option>
</select>

Then the styles dont get applied,
I'm probably using this incorrectly but I can't find any reference to an actual working use of dynamic css using templ.