cssinjs / cssinjs/jss

Including two @font-face blocks in addRules throws error

Open
#908 12 comments 1 reaction 0 assignees View on GitHub
bug complexity:low help wanted important
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.