cssinjs / cssinjs/jss

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

Open
#1,524 3 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
7.1k
Forks
386
PR merge metrics
No merged PRs in 30d

Description

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

```ts
'@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.

![image](https://user-images.githubusercontent.com/135528/123543955-fa1b0e80-d71e-11eb-96e7-3c089b93bb62.png)

__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](https://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](https://codesandbox.io/s/jss-import-forked-gsdvg) but it seems there are other blocking errors:

![image](https://user-images.githubusercontent.com/135528/123544484-76aeec80-d721-11eb-9abe-d638736691b3.png)

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

```ts
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 = `

This should be red, 4rem, Pacifico
`;
```

__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.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.