Error with `link: true` and `@import` declaration

[brianmhunt]

Expected behavior: A clear and concise description of what you expected to happen.

       '@import': [
        'url(https://fonts.googleapis.com/css2?family=Roboto&family=Pacifico&display=swap)',
      ],

should add the corresponding import declaration to the CSS styles.

Describe the bug: A clear and concise description of what happened instead of the expected behavior.

Reproduction:

Add a failing test to the suite and submit a PR. A test is even better than a fix. Alternatively create a codesandbox.io with the issue. Make it as minimal as possible as this will help us find the bug quicker.

I tried reproducing this in codesandbox.io but it seems there are other blocking errors:

A trivial reproduction (with a little additional code for illustration) would be something like this:

import jss from "jss";
import preset from "jss-preset-default";

jss.use(preset());

const styles = {
  "@import": [
    "url(https://fonts.googleapis.com/css2?family=Pacifico&display=swap)"
  ],
  "@global": {
    body: {
      fontFamily: "Pacifico",
      fontSize: "4rem"
    }
  },
  text: {
    fontFamily: "Pacifico",
    color: "red"
  }
};

const link = false; // ⭐️ errors when true
const { classes } = jss.createStyleSheet(styles, { link }).attach();

const div = document.body.appendChild(document.createElement("div"));
div.innerHTML = `<div class="${classes.text}">This should be red, 4rem, Pacifico</div>`;

Versions (please complete the following information):

• jss: 10.6.0
• Browser [e.g. chrome, safari]: Chrome 92
• OS [e.g. Windows, macOS]: OSX Feel free to add any additional versions which you may think are relevant to the bug.

Managing expectations:

Maintainers will not be fixing the problem you have unless they have it too, if you want it to get fixed:

1. Submit a PR with a failing test
2. Discuss a solution
3. Implement it

You can also do the first step only and wait for someone else to work on a fix. Anything is much better than nothing.

[kof]

the api for setting up is jss.setup(preset());

[brianmhunt]

@kof Glad to see you're still able to work on this.

Sorry the linked example was broken, it's been a couple years since I looked at JSS setup. I've fixed the example to reproduce the issue, namely:

Warning: [JSS] Failed to execute 'insertRule' on 'CSSStyleSheet': Failed to insert the rule.

when link is true with an @import statement.

If I have a chance I'll try to reproduce in a PR/test, but I'll leave it with codesandbox.io in the short-term in case the problem is immediately apparent to you.

[kof]

Looks like some issue with insertRule api and an import rule, haven't seen that yet