Lit-element: @import not allowed in CSSResult

[MaKleSoft]

Getting an error when using @import statements in css template literals:

css-tag.js:28 Uncaught DOMException: Failed to execute 'replaceSync' on 'CSSStyleSheet': @import rules are not allowed when creating stylesheet synchronously.

Tested in Chrome 73.0.3683.27 (beta channel) on OSX 10.14.1. Pretty sure it worked before so I think this was introduced in a recent Chrome update. Working fine in latest Firefox.

[sorvell]

We've chosen not to support @import for a couple of reasons.

1. The imported styling cannot be shimmed by ShadyCSS so the styling will only work on native Shadow DOM.

2. The content must be fetched over the network which means that content will often have a flash of unstyled content.

That said, it should generally work better with adoptedStylesheets since the @import will only be fetched once in this case. When not supported, however, the @import will fetch each time the style is created and depend on browser caching to not hit the network. When this fails, the results can be exceedingly bad (e.g. 100s of elements fetching stylesheets).

It would probably be a transparent change to use replace instead of replaceSync as is currently done, and we'll consider making that change, but it would come with a bunch of caveats:

1. Only works on native Shadow DOM.
2. Should only be used on browsers that support adoptedStylesheets (Chrome 73+ and soon Edge).

[justinfagnani]

We can't easily support @import because we use the CSSStyleSheet.prototype.replaceSync to build our style sheet objects and replaceSync itself throws on @import. (it couldn't be syn otherwise). I hope that CSS modules, when it supports @import, will provide a solution here.

Closing as I don't think there's anything we can do now.