Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
dominicbarnes opened this issue Jul 1, 2017 · 1 comment
Open

Comments

@dominicbarnes
Copy link
Member

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
Copy link
Member Author

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.

@dominicbarnes dominicbarnes changed the title Handle dependencies inside <style> and style="..." tags html: handle dependencies inside <style> and style="..." tags Jul 1, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant