Fix multiple @font-face of the same name (#327)

Khan · Jun 8, 2018 · 7d61c9b · 7d61c9b
1 parent b9f5ae2
commit 7d61c9b
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 1 deletion.
diff --git a/src/inject.js b/src/inject.js
@@ -66,7 +66,13 @@ const stringHandlers = {
     // an array of objects and strings.
     fontFamily: function fontFamily(val) {
         if (Array.isArray(val)) {
-            return val.map(fontFamily).join(",");
+            const nameMap = {};
+
+            val.forEach(v => {
+                nameMap[fontFamily(v)] = true;
+            });
+
+            return Object.keys(nameMap).join(",");
         } else if (typeof val === "object") {
             injectStyleOnce(val.src, "@font-face", [val], false);
             return `"${val.fontFamily}"`;

diff --git a/tests/inject_test.js b/tests/inject_test.js
@@ -404,6 +404,74 @@ describe('String handlers', () => {
             assertStylesInclude('font-family: CoolFont;');
             assertStylesInclude("src: url('coolfont.ttf');");
         });
+
+        it('supports multiple @font-face with the same family name', () => {
+            const sheet = StyleSheet.create({
+                base: {
+                    fontFamily: [
+                        {
+                            fontFamily: "CoolFont",
+                            src: "url('coolfont.ttf')",
+                        },
+                        {
+                            fontFamily: "CoolFont",
+                            fontStyle: "italic",
+                            src: "url('coolfont-italic.ttf')",
+                        },
+                        {
+                            fontFamily: "CoolFont",
+                            fontWeight: 300,
+                            src: "url('coolfont-bold.ttf')",
+                        },
+                        "sans-serif",
+                    ],
+                },
+            });
+
+            startBuffering();
+            css(sheet.base);
+            flushToStyleTag();
+
+            assertStylesInclude('font-family: "CoolFont",sans-serif !important');
+            assertStylesInclude('font-family: CoolFont;');
+            assertStylesInclude("src: url('coolfont.ttf');");
+            assertStylesInclude("font-style: italic; src: url('coolfont-italic.ttf');");
+            assertStylesInclude("font-weight: 300; src: url('coolfont-bold.ttf');");
+        });
+
+        it('supports multiple @font-face with different family names', () => {
+            const sheet = StyleSheet.create({
+                base: {
+                    fontFamily: [
+                        {
+                            fontFamily: "CoolFont",
+                            src: "url('coolfont.ttf')",
+                        },
+                        {
+                            fontFamily: "AwesomeFont",
+                            src: "url('awesomefont.ttf')",
+                        },
+                        {
+                            fontFamily: "SuperFont",
+                            src: "url('superfont.ttf')",
+                        },
+                        "sans-serif",
+                    ],
+                },
+            });
+
+            startBuffering();
+            css(sheet.base);
+            flushToStyleTag();
+
+            assertStylesInclude('font-family: "CoolFont","AwesomeFont","SuperFont",sans-serif !important');
+            assertStylesInclude('font-family: CoolFont;');
+            assertStylesInclude("src: url('coolfont.ttf');");
+            assertStylesInclude('font-family: AwesomeFont;');
+            assertStylesInclude("src: url('awesomefont.ttf');");
+            assertStylesInclude('font-family: SuperFont;');
+            assertStylesInclude("src: url('superfont.ttf');");
+        });
     });
 
     describe('animationName', () => {