Provide glimmer template helper to get a handle to a style at runtime.

[chriseppstein]

A component using CSS Blocks will want to pass block styles to a template that is not using CSS Blocks. In this case, we can provide a helper that is rewritten to return a string.

{{yield (hash
  linkClass={{style-of block:class="link"}}
  listClass={{style-of block:scope=true}}
  listItemClass={{style-of block:class="list-item"}}
  listItemActiveClass={{style-of block:class="list-item" block:active=true}}
)}}

The style-of helper should accept any number of arguments and treat them as if all of them will be applied to the same element.

The style-of helper should accept dynamic attributes just like an element. E.g. {{style-of block:class="list-item" block:loading=this.isLoading}}. In this case, it will be rewritten to an invocation of -css-blocks-classnames instead of a string literal.

The use of the style-of helper will analyze the collection of styles as if they are all applied to the same element. The output of style-of is only suitable as a value that is set as an html class attribute value within a template that is not using CSS Blocks. Templates using CSS Blocks should use block composition and inheritance instead.

Caveats:

1. The output of style-of is opaque. Any manipulation by javascript code of these values is unsupported and will probably break your application in production even if it appears to work in development.
2. The users of styles returned from style-of must be informed that classes returned cannot be composed with other values returned by a different invocation of style-of.
3. Composing the classes returned by style-of with classes not managed by css blocks can yield unpredictable results (especially with selectors having specificity of less than an id selector) and is generally discouraged.