Fix multiple .addRule calls with font-face (#1280)

* Fix multiple @font-face

* keep key as a uniq identifier, use this.at for serialization

* no need for extraction into separate functions

Co-authored-by: Matheus Wichman <matheushw@outlook.com>

Author: kof

packages/jss/.size-snapshot.json

@@ -1,30 +1,30 @@
 {
   "dist/jss.js": {
-    "bundled": 61836,
-    "minified": 22817,
-    "gzipped": 6879
+    "bundled": 61869,
+    "minified": 22827,
+    "gzipped": 6889
   },
   "dist/jss.min.js": {
-    "bundled": 60459,
-    "minified": 22048,
-    "gzipped": 6519
+    "bundled": 60492,
+    "minified": 22059,
+    "gzipped": 6533
   },
   "dist/jss.cjs.js": {
-    "bundled": 56577,
-    "minified": 24717,
-    "gzipped": 6872
+    "bundled": 56608,
+    "minified": 24744,
+    "gzipped": 6885
   },
   "dist/jss.esm.js": {
-    "bundled": 56045,
-    "minified": 24282,
-    "gzipped": 6782,
+    "bundled": 56076,
+    "minified": 24309,
+    "gzipped": 6795,
     "treeshaked": {
       "rollup": {
-        "code": 20045,
+        "code": 20054,
         "import_statements": 352
       },
       "webpack": {
-        "code": 21512
+        "code": 21521
       }
     }
   }

packages/jss/src/plugins/fontFaceRule.js

@@ -30,18 +30,20 @@ export class FontFaceRule implements BaseRule {
     if (Array.isArray(this.style)) {
       let str = ''
       for (let index = 0; index < this.style.length; index++) {
-        str += toCss(this.key, this.style[index])
+        str += toCss(this.at, this.style[index])
         if (this.style[index + 1]) str += '\n'
       }
       return str
     }
 
-    return toCss(this.key, this.style, options)
+    return toCss(this.at, this.style, options)
   }
 }
 
+const keyRegExp = /@font-face/
+
 export default {
   onCreateRule(key: string, style: JssStyle, options: RuleOptions): FontFaceRule | null {
-    return key === '@font-face' ? new FontFaceRule(key, style, options) : null
+    return keyRegExp.test(key) ? new FontFaceRule(key, style, options) : null
   }
 }

packages/jss/tests/integration/rules.js

@@ -259,7 +259,7 @@ describe('Integration: rules', () => {
     })
 
     describe('@font-face rule', () => {
-      function checkSingle() {
+      it('should return CSS', () => {
         const rule = jss.createRule('@font-face', {
           'font-family': 'MyHelvetica',
           src: 'local("Helvetica")'
@@ -272,23 +272,19 @@ describe('Integration: rules', () => {
             src: local("Helvetica");
           }
         `)
-      }
+      })
 
-      function checkMulti(options) {
-        const rule = jss.createRule(
-          '@font-face',
-          [
-            {
-              'font-family': 'MyHelvetica',
-              src: 'local("Helvetica")'
-            },
-            {
-              'font-family': 'MyComicSans',
-              src: 'local("ComicSans")'
-            }
-          ],
-          options
-        )
+      it('should handle when @font-face is an array', () => {
+        const rule = jss.createRule('@font-face', [
+          {
+            'font-family': 'MyHelvetica',
+            src: 'local("Helvetica")'
+          },
+          {
+            'font-family': 'MyComicSans',
+            src: 'local("ComicSans")'
+          }
+        ])
         expect(rule.type).to.be('font-face')
         expect(rule.key).to.be('@font-face')
         expect(rule.toString()).to.be(stripIndent`
@@ -301,14 +297,28 @@ describe('Integration: rules', () => {
             src: local("ComicSans");
           }
         `)
-      }
-
-      it('should return CSS', () => {
-        checkSingle()
       })
 
-      it('should handle multiple font-faces', () => {
-        checkMulti()
+      it('should handle multiple @font-face', () => {
+        const sheet = jss.createStyleSheet()
+        sheet.addRule('@font-face', {
+          'font-family': 'MyHelvetica',
+          src: 'local("Helvetica")'
+        })
+        sheet.addRule('@font-face', {
+          'font-family': 'MyComicSans',
+          src: 'local("ComicSans")'
+        })
+        expect(sheet.toString()).to.be(stripIndent`
+          @font-face {
+            font-family: MyHelvetica;
+            src: local("Helvetica");
+          }
+          @font-face {
+            font-family: MyComicSans;
+            src: local("ComicSans");
+          }
+        `)
       })
     })