Topic on Help talk:TemplateStyles

Extension:TemplateStyles as well as Help:TemplateStyles is a bit vague as to how exactly the templatestyles tag should be added. So far, I have just prepended it to the template's wikitext, but as can be seen in sv:Special:Diff/42452572, this does not always work. Is there any foolproof way to add the templatestyles tag to a template?

That should work just fine (did you mean to write Mall:Audio/styles.css instead of Audio/styles.css?) but ideally you should scope the styles to the template, ie. write something like

<div class="my-template">
<templatestyles src="Template:MyTemplate/style.css" />
...
</div>

.my-template {
    ...
}

(Note, the position of the tag doesn't matter, it could be outside of the div. The point is to make sure the styles do not have effect outside of the template.)

The namespace prefix is optional, so that's not the problem. If you look at my contributions in the template namespace on svwiki (https://sv.wikipedia.org/w/index.php?title=Special%3ABidrag&target=Nirmos&namespace=10) you can see that I've successfully added templatestyles tags to several templates. In this case, however, the template starts with wikitext syntax for a table, that needs to start on its own line, and apparently does not tolerate a templatestyles tag before it.

And sure, you could say that it needs to be wrapped in a div, but then the user has to know that, and it would need to be documented. Moreover, some templates do not have divs as their outermost structure. For example, infoboxes, navboxes and amboxes (the Big Three in the template world) all have table as their outermost element.

The div is not the point, the class could just as well be on the <table> element. The point is that styles should not leak out of the template, otherwise you'll be facing a maintenance nightmare.

FWIW, I tried to do the same but with table tags in HTML instead of wikitext, but still got the same problem.

So the problem is how to use a templatestyles tag without making the parser wrap it into an empty paragraph?

I guess you could go with

{|
...
|}<templatestyles />

although it's a bit ugly to put the style tag after the content it is styling, but the table would have to be really huge to cause a FOUC...

Using HTML table tags would work fine, but then that makes the code much harder to read.

So the problem is how to use a templatestyles tag without making the parser wrap it into an empty paragraph?

That's an issue with the Parser, IMO. Or maybe RemexHtml, since currently HTML Tidy is handling it. Filed as phab:T186965.

Using HTML table tags instead of wikitext does not solve the problem as I said above, but placing the templatestyles tag after the table actually does! Still, do you not agree that this should be solved properly? Otherwise, when TemplateStyles is deployed widely, people will almost definitely add templatestyles tags to infobox/navbox/ambox and break an enormous amount of pages.

Correcting myself: I said above that converting from wikitext table syntax to HTML table tags did not solve the problem. It does. I have created a minimal test case at sv:Användare:Nirmos/sandlåda where I've tested various combinations. So there are two workarounds. Still, I don't like any of them. Converting from wikitext table syntax to HTML table tags can be a lot of work, can break things, and have nothing to do with the migration of styles. Placing the templatestyles tag after the template is unintuitive, can create a FOUC, and is not according to docs.

There is an example on the subject that is identical to what you want to do. It seems that you expect it to work like the (no)include tags, and those explicitly behave as if they are not there at all. Visually, there doesn't seem to be any difference anyway.