Insert (apply) and remove (unapply) stylesheets

[unscriptable]

We should have a reasonable way to insert (apply) and remove (unapply) stylesheets when contexts are created or destroyed. We have the ability to load stylesheets with curl.js, but what we really need is the ability to apply them only when needed.

@gehan recently brought this up in an email discussion, so I thought I'd bring it to github for open discussion. His scenario: rules in one sheet conflict with those in another. He had to change the selectors to make it work. If the dev knows that the rules in the sheets are never needed at the same time, why force her/him to change rules?

curl.js has a style! plugin that may help. var stylesheet = require('style!module/that/returns/css-text'); But all that matters, afaict, is that we have a reference to a stylesheet dom object.

Once we have a stylesheet, we can remove it when the context is destroyed.

If anybody has some ideas about this, please chime in. :)

-- John

[scothis]

In the past we didn't do this to avoid thrashing the layout renderer. More modern browsers may be better at handling this situation...

A basic wire factory plugin that loads a given stylesheet would work.

The gotcha is that we don't want a 1:1 relationship between wire contexts and stylesheets. If the same wire spec is initialized twice, we only want to load the stylesheet once, and we only want to clean up the stylesheet once all the contexts that depend on it have been destroyed. Basically a 'static' reference counter inside the plugin that actually manages the stylesheet.

As WebComponents becomes mainstream this may become a non issue, as each component has it's own scoped style rules.

[unscriptable]

Good point about ref counting the stylesheets, @scothis.