cssinjs/jss

Including two @font-face blocks in addRules throws error

Open

#908 opened on Oct 28, 2018

View on GitHub
 (12 comments) (1 reaction) (0 assignees)JavaScript (7,000 stars) (434 forks)batch import
bugcomplexity:lowhelp wantedimportant

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

Tech stack
javascript
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
basic JavaScriptunderstanding of JSS concepts
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
60
Research direction
Investigate the jss source code, particularly the addRules method in src/rules/. Look at how rules are inserted and if the parsing of multiple @font face rules is handled. The codesandbox provides reproduction. Check existing tests for font face rules. Consider if the issue is in the rule insertion logic that concatenates rules incorrectly.