conficient / BlazorTemplater

A library that generates HTML (e.g. for emails) from Razor Components
Apache License 2.0
146 stars 16 forks source link

CSS Isolation #20

Closed dajma00 closed 2 years ago

dajma00 commented 2 years ago

When you say CSS isolation is not supported, does that mean if I am using CSS isolation in my component, it will not work with the templater? So how should I provide the required CSS?

nibraso commented 2 years ago

I didn't use the library yet but I will do, here I have just an sample idea, What about putting your css up of your page like: <style> your style </style>

conficient commented 2 years ago

BlazorTemplater generates the HTML from the component, it cannot combine the CSS in a file.razor.css source. CSS isolation is quite complex and amends both the CSS file and the HTML to apply the necessary isolation, so is too complicated for this library.

In general if you want CSS you should put it the HTML document with inline <style> tags as @nibraso suggests.

If you're using BlazorTemplater for emails please note this: https://github.com/conficient/BlazorTemplater#css-and-html-emails

cjbush commented 1 year ago

So I think I may have come up with a halfway clever workaround for this. It doesn't use CSS isolation exactly, but it does allow you to load a Component.razor.css file and automatically inline it as a scoped style element in your component. I created a "ScopedStylesheet.razor" component that accepts a reference to its parent as a parameter, and then loads the parent's CSS file as an embedded resource and injects it into a scoped