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

email generation - inline css possible ? #92

Closed
gedw99 opened this issue Jun 4, 2023 · 3 comments
Closed

email generation - inline css possible ? #92

gedw99 opened this issue Jun 4, 2023 · 3 comments

Comments

@gedw99
Copy link

gedw99 commented Jun 4, 2023 •
edited
Loading

i wonder if templ can handle generation of emails ?

I know html are a huge pita because of CSS and also email clients being a little different. Outlook etc.
But it has a first class html parser etc. I just don't know how well it can handle css inline as i think this is what html emails demand.

Wow the docs are very well done and concise.
Looking a the example docs at https://templ.guide/syntax-and-usage/css-style-management#css-expressions

<style type="text/css">
 .className_f179{background-color:#ffffff;color:#ff0000;}
</style>
<button class="className_f179 button">
 Click me
</button>

Looks like it would just require a post processing step to do the inlining as all the mapping is there. namly: className_f179
@gedw99 gedw99 changed the title email generation email generation - inline css possible ? Jun 4, 2023
@a-h
Copy link
Owner

a-h commented Jun 6, 2023

You can use standard <style> elements within templ - it sounds like the docs need to be improved to explain that. 😁

It's completely valid to do something like:

package testrawelements

templ Example() {
	<html>
		<head></head>
		<body>
			<style><!-- Some stuff --></style>
			<style>
                            .customClass {
                              border: 1px solid black;
                            }
                         </style>
			<script type="text/javascript">
                              $("div").marquee();
                              function test() {
                                 window.open("https://example.com")
                              }
                         </script>
			<h1>Hello</h1>
		</body>
	</html>
}

And you'll get the CSS class and raw script content included in the output.

If you're interested in what that looks like, there's a "raw" element parser which doesn't try to parse the content of script and style elements at https://github.com/a-h/templ/blob/main/parser/v2/raw.go

The behaviour is covered in this unit test: https://github.com/a-h/templ/tree/main/generator/test-raw-elements

Thanks for trying out templ, and taking the time to ask questions and raise issues!

@a-h a-h closed this as completed in 4ece817 Jun 17, 2023
@cayter
Copy link

cayter commented Jun 28, 2023

How do we go about using tailwindcss in the email templates and generate the inline style block?

@gedw99
Copy link
Author

gedw99 commented Jun 28, 2023

Sorry I did not get time to try out your suggestion @a-h

a-h added a commit that referenced this issue Sep 24, 2023
@a-h
docs: describe use of CSS elements, fixes #92
8c86f0b
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

No branches or pull requests
3 participants
@cayter @a-h @gedw99