HTML Injector vs style tag in HTML template

[yahiakala]

Hi, I'm making a new custom component that requires some CSS styling. I noticed that the components in this repo all use this class method called HTMLInjector.css to insert css within the custom component's form.

This works but it doesn't render in the designer window. I found that injecting CSS into the form's HTML template worked as well, and also rendered in the designer window.

I'm wondering if this approach (CSS into the HTML template instead of the form) would be accepted in a pull request, and if there are any pitfalls you know of.

[s-cork]

I'm not sure I follow. If you add a tabs or switch component from anvil-extras to your project it will render correctly in the designer no?

Both of those components use the css injector.
If you mean that the css doesn't apply to custom component when you're developing it. That's true.

Feel free to include the css in the html property if that's easier for development. Another pattern would be to create a css file in theme assets and make this the href of the link tag included in the html.

This would make PRs much more readable. Anything in the html property gets added to the yaml, and isn't the most readable for reviewing.

[yahiakala]

You're correct - the css renders in the designer once I have added the component to another form, but the css doesn't apply while I'm developing it. I guess it is not a big deal if I can just create a 'demo' form to preview all my custom components in the designer.

If I understand correctly, the priority for readability would be:

1. CSS Injector
2. CSS file which is referenced in the link tag included in the html (

< link href="_/theme/my_new.css" rel="stylesheet" type='text/css' >

at top of HTML template)
4. CSS in the HTML template for the form

[s-cork]

Probably. My main issue with the css in html solution is that this css will be injected into the page for every component added.

For development you could use a css file in the html. And for production, inject it in the python module. I would probably adapt the current css injector and inject a link tag instead if you go down this route.

We didn't do this in the past because asset files were previously not available in dependencies.

[s-cork]

But saying that css in the html is not terrible. We can always open it in the anvil editor to review it.

[yahiakala]

That clears things up, thanks!