Possible bug/limitation of @import

[Malvoz]

Hello @samthor!

Firstly I'd like to thank you for your efforts with this polyfill!

The W3C Maps For HTML Community Group is having issues with different third-party web maps loading in stylesheets with often times identical CSS selectors conflicting with each other. This means having to potentially resort to restructure and use iframes for each map implementation (across many pages) which will take some extra effort, but I was hoping to rely on scoped in this matter. I think I've found a bug, which I've managed to work around:

Given the following scenarios, the first one fails to load two.css whereas the second and third succeed:

<div>/* the style scope */
  <style scoped>
    @import url("https://cross-origin/one.css");
    @import url("https://cross-origin/two.css");
  </style>
</div>

scoped.min.js: 247
Uncaught DOMException: Failed to execute 'insertRule' on 'CSSStyleSheet': Failed to insert the rule.
    at replaceRule (http://localhost/scoped/scoped.min.js:247:12)
    at internalUpgrade (http://localhost/scoped/scoped.min.js:350:26)
    at internalUpgrade (http://localhost/scoped/scoped.min.js:393:11)
    at upgrade (http://localhost/scoped/scoped.min.js:477:5)
    at setup (http://localhost/scoped/scoped.min.js:537:7)

These work:

<div>
  <style scoped>
    @import url("https://cross-origin/one.css") /* no semicolon */
    @import url("https://cross-origin/two.css");
  </style>
</div>

<div>
  <style scoped>
    @import url("https://cross-origin/one.css");
  </style>
  <style scoped>
    @import url("https://cross-origin/two.css");
  </style>
</div>

[samthor]

Thanks for the bug report. So what browsers is this hitting? I remember vaguely that Firefox has different rules around @import.

Having said that, the solution I had for CORS (see #2) uses XMLHttpRequest to go fetch the subordinate stylesheet, then we reference it via a fake URL we create via URL.createObjectURL. Needless to say, perhaps there's an issue with loading multiple of these, which I can look into.

FWIW, the no semicolon case—I think that's just invalid and possibly being parsed only as one single rule (the latter).

[Malvoz]

Thanks, the browser is Chrome 81.0.4044.138.

[samthor]

So the issue here is the @import restriction listed here. I was swapping it out for a non-import rule, which only worked if it was the last import (which is what I was testing).

I've updated the code now, and published 0.2.1. Let me know if this version fixes your issue! 👍

[Malvoz]

It indeed fixed the issue! Thank you 🙏

[samthor]

You're welcome. Please let me know if you update your demo page to use style scoped, I'd be curious to see it in action.

[Malvoz]

Yep, me too! I'll let you know. 👍