html: handle dependencies inside <style> and style="..." tags

[dominicbarnes]

From @matthewmueller on November 18, 2016 7:42

It's a bit edge case, but probably should be handled for completeness. One concrete example I do a lot is if I have multiple images of the same style, I'll do something like this:

<div class="image" style="background-image: url(./1.png)"></div>
<div class="image" style="background-image: url(./2.png)"></div>
<div class="image" style="background-image: url(./3.png)"></div>

It saves writing a lot of extra CSS. Unfortunately right now mako-html can't pick those deps up.

Could probably just make all these fragments virtual CSS dependencies, so mako-css picks them up ✨

Copied from original issue: makojs/html#13

[dominicbarnes]

I'm finding it really difficult to figure out to support this.

To start with, what would the virtual files look like? The declarations are scoped by nature of it being inline, so we'd need to wrap each inline style with a unique selector or something. (modules exist for this, but it feels really weird to me even still)

Once it's added to the tree and mako-css picks it up, would the expectation be to remove it from the HTML? If it stays in HTML, the output CSS will effectively be a duplicate. Would "virtual" CSS files be treated differently somehow? If this exists solely to find other assets, mako-html would have to manage these files in tandem with mako-css.

All in all, this feels really complicated for not a huge payoff. Inline styles are best-practice to avoid in many cases. Maybe the big problem is that there are still a lot of unanswered questions about how this would work in practice. With some clarity, it might feel a lot less scary.