Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

bug(CSS component args): impossibility of nested properties and strange value zTemplUnsafeCSSPropertyValue #578

Closed
koddr opened this issue Mar 2, 2024 · 3 comments
Closed

bug(CSS component args): impossibility of nested properties and strange value zTemplUnsafeCSSPropertyValue #578

koddr opened this issue Mar 2, 2024 · 3 comments

Comments

@koddr
Copy link

koddr commented Mar 2, 2024 •
edited
Loading

Thanks for the update, @a-h!

Here is some feedback about CSS component arguments that I identified during testing (templ v0.2.598):

  1. The impossibility of nested properties, such as url() in the background-image
css bgImage(image string) {
	background-image: url({ image });
}
Снимок экрана 2024-03-02 в 15 29 31

And generated result is:

<style type="text/css">.bgImage_9fc6{background-image:url({ image });}</style>
  1. Strange value zTemplUnsafeCSSPropertyValue
css bgImage(image string) {
	background-image: { fmt.Sprintf("url(%s)", image) };
}

And generated result is:

<style type="text/css">.bgImage_a54a{background-image:zTemplUnsafeCSSPropertyValue;}</style>

How to correctly specify similar CSS properties using Templ?
@a-h a-h mentioned this issue Mar 3, 2024
Closed
@a-h
Copy link
Owner

a-h commented Mar 3, 2024

Reading through the code, it was expecting quoted URLs for CSS url props. I've put forward a PR which adds support for single quoted, double quoted, and unquoted strings.

@a-h a-h closed this as completed in f3417e0 Mar 3, 2024
@koddr
Copy link
Author

koddr commented Mar 18, 2024

@a-h thanks for the release, but bug is still here :(

screen

Input code:

css bgImage(u string) {
	background-image: url({ u });
}

Output (generated) code:

<style type="text/css">
.bgImage_0918{
  background-image:url({ u });
}
</style>

Config:

  • templ: v0.2.639
  • templ-vscode: v0.0.22

@koddr koddr mentioned this issue Mar 18, 2024
Closed
@a-h
Copy link
Owner

a-h commented Mar 19, 2024

@koddr - please refer to this example. I think the docs need to be updated.

package main

import "os"

templ page() {
	<!DOCTYPE html>
	<html>
		<head>
			<title>Background image</title>
		</head>
		<body>
			<div>
				@profile("image1.png")
			</div>
			<div>
				@profile("image2.png")
			</div>
		</body>
	</html>
}

templ profile(image string) {
	<div class={ profileCSS(image) }>
		Profile
	</div>
}

func bgImage(trustedURL string) templ.SafeCSSProperty {
	return templ.SafeCSSProperty("url(" + trustedURL + ")")
}

css profileCSS(image string) {
	background-image: { bgImage(image) };
}

func main() {
	page().Render(context.Background(), os.Stdout)
}

Also, thinking about the next version of templ, supporting this:

css profileCSSNext(image string) {
	background-image: { templ.URL(image) };
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: add support for quoted and non-quoted URLs in backgroud-image properties a-h/templ
2 participants
@a-h @koddr