Including two @font-face blocks in addRules throws error
- Dominant language
- JavaScript
- Stars
- 7.1k
- Forks
- 386
- PR merge metrics
- No merged PRs in 30d
Description
__Expected behavior:__
I would expect an output of two @font-face rules added to the stylesheet.
__Describe the bug:__
Having one @font-face rule in an `addRules` object outputs and injects the correct CSS. Adding a second @font-face rule throws this error:
```
Warning: [JSS] Can not insert an unsupported rule
@font-face {
font-family: "Font One";
src: url("/fonts/font-one.woff");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "Font Two";
src: url("/fonts/font-two.woff");
font-weight: normal;
font-style: normal;
}
```
__Codesandbox link:__
https://codesandbox.io/s/n5xn8y0vwl?expanddevtools=1
__Versions (please complete the following information):__
- jss: 9.8.7
- Browser: Chrome 69.0.3497.100
- OS: Mac 10.14
Contributor guide
Research direction
Reproduce the issue from the linked CodeSandbox using JSS 9.8.7 and an addRules object containing two @font-face rules. Trace the addRules handling for multiple @font-face blocks and confirm the fix by verifying that both rules are injected without the unsupported-rule warning.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100