Basic CSS Styling of Rolltemplates Does Not Work... Temperamentally.

Here's a reductive example from some custom sheetwork I'm doing. CSS: .sheet-rolltemplate-example div, .sheet-rolltemplate-example { margin: 20px; padding: 20px; border: 3px solid black; background-color: pink; } HTML: <button type="roll" value="&{template:example} {{name=@{character_name}}}" name="roll_example"></button>  <rolltemplate class="sheet-rolltemplate-example"><div> This is an example roll template for {{name}} </div></rolltemplate> Results: If I give the above HTML and CSS as the entirety of a custom sheet, it works: the resulting template is a big spacious pink box. If I keep the above HTML (just the button and the template) but put the rolltemplate CSS stuff shown inside of an existing CSS for the actual sheet I'm developing — CSS which passes a CSS3 validator I ran it through with flying colors, so it's not due to a syntax error or malformation — the result is, no styles are applied to the rolltemplate at all . What gives? What are the gotchas? What troubleshooting method is best used here in order to sort out why CSS that absolutely works in one reductive example context doesn't work at all when dropped into an actual, serious context?

Well, I've figured out how to make it stop  working in the reductive scenario. If you do the same HTML and CSS I provide above, but add the following (and only the following) to your CSS, the CSS will stop affecting the roll template formatting entirely, and I have no idea why. .sheet-dieval ~ .sheet-die > .sheet-diepic {     margin: 10px; } So to be clear, if I have this CSS: .sheet-rolltemplate-example div, .sheet-rolltemplate-example { margin: 20px; padding: 20px; border: 3px solid black; background-color: pink; } then the rolltemplate formats correctly; but  if I have this as my CSS instead: .sheet-rolltemplate-example div, .sheet-rolltemplate-example { margin: 20px; padding: 20px; border: 3px solid black; background-color: pink; } .sheet-dieval ~ .sheet-die > .sheet-diepic {     margin: 10px; } ... then the rolltemplate formatting previously applied successfully by the prior CSS setup stops working — the browser can't even see that there are any .sheet- prefixed styles available to apply to it.  There's nothing wrong with what I've added — it'd address formatting of this in my actual sheet: <input type="hidden" name="attr_die" value="" class="sheet-dieval"> <div class="sheet-die">      <div class="sheet-diepic"></div> </div> — so I don't see how it's causing another part of the stylesheet to become invisible to the messaging area for purposes of styling a rolltemplate

It gets worse. As I tried some destructive testing (deleting parts of the offending code until the problem stopped happening), I discovered that even this CSS causes the rolltemplate CSS to be ignored: .sheet-rolltemplate-example div, .sheet-rolltemplate-example { margin: 20px; padding: 20px; border: 3px solid black; background-color: pink; } .sheet-dieval {     margin: 10px; }

Okay, the problem is, specifically, the containment of the string "dieval" in the CSS. If I rename it, no issues. Sure feels like something sanitizing the CSS for use by rolltemplate formatting is being.... overzealous?

Yes, the CSS sanitizer used for roll templates is extremely strict. There are certain words, like eval, that if they appear anywhere in the CSS (even within another word) will cause a security flag and the CSS will be thrown out. I thought that was mentioned in the wiki, but can't find it now. So even if it's there, it needs to be more prominent. I'll try to find the complete list and post a link to it back here.

Thanks a bunch, Scott. It hadn't even occurred to me that "eval" was a substring of "dieval" somehow. (But even if I'd known that, I wouldn't have known that it's "supposed" to be a problem)

Here's the link to the list of known issues .