fix(renderer): render multiple font sources

CHANGELOG.md

@@ -5,10 +5,15 @@ If you're searching for older version-based release notes please check out the o
 
 > Dates follow the `dd/mm/yy` notation.
 
+## 22/03/18
+| Package | Version | Changes |
+| ---- | --- | --- |
+| fela | 6.1.6 | [(#545)](https://github.com/rofrischmann/fela/pull/545) fix rendering of multiple source files in `renderer.renderFont` |
+
 ## 13/03/18
 | Package | Version | Changes |
 | ---- | --- | --- |
-| inferno-fela | 8.0.0 | [(#529)](https://github.com/rofrischmann/fela/pull/529) added support for Inferno 4.0<br>inferno-fela won't work with lower versions anymore | 
+| inferno-fela | 8.0.0 | [(#529)](https://github.com/rofrischmann/fela/pull/529) added support for Inferno 4.0<br>inferno-fela won't work with lower versions anymore |
 | fela-bindings<br>react-fela<br>preact-fela<br>inferno-fela<br> | 2.1.0<br>7.1.0<br>7.1.0<br>- | [(#526)](https://github.com/rofrischmann/fela/pull/526) fix incorrect theme pass-down<br>[(#527)](https://github.com/rofrischmann/fela/pull/527) FelaComponent now accepts a rule prop to support style as a function of state<br> [(#532)](https://github.com/rofrischmann/fela/issues/532) fela-dom's render is now called within `componentWillMount` rather than `componentDidMount` in Provider |
 | fela-plugin-bidi | 2.0.2 | [(#528)](https://github.com/rofrischmann/fela/pull/528) update [bidi-css-js](https://github.com/TxHawks/bidi-css-js) version |
 | fela-plugin-custom-property | 7.0.1 | [(#522)](https://github.com/rofrischmann/fela/pull/522) no longer resolving nested style objects if the property was removed |
@@ -68,7 +73,7 @@ This release also adds some TypeScript definitions.
 ## 31/10/17
 | Package | Version | Changes |
 | ---- | --- | --- |
-| fela | 6.0.4 | [(#442)](https://github.com/rofrischmann/fela/pull/442) added support for [Woff2](https://www.w3.org/TR/WOFF2/) font format  | 
+| fela | 6.0.4 | [(#442)](https://github.com/rofrischmann/fela/pull/442) added support for [Woff2](https://www.w3.org/TR/WOFF2/) font format  |
 | fela-plugin-bidi | 2.0.0 | [(#449)](https://github.com/rofrischmann/fela/pull/449) updated to a new major version of [bidi-css-js](https://github.com/TxHawks/bidi-css-js) |
 | fela-combine-arrays | 1.0.3 | [(#451)](https://github.com/rofrischmann/fela/pull/451) fixed a bug where objects got converted to arrays |
 | fela-plugin-extend | 5.0.12 | [(#456)](https://github.com/rofrischmann/fela/pull/456) fixed a bug where nested extend objects could not be resolved |

packages/babel-plugin-fela/package.json

@@ -33,7 +33,7 @@
     "babel-core": "6.25.0",
     "babel-preset-es2015": "6.24.1",
     "babel-preset-stage-0": "6.24.1",
-    "fela": "^6.1.5",
+    "fela": "^6.1.6",
     "fela-preset-web": "^8.0.5"
   }
 }

packages/fela-bindings/package.json

@@ -28,7 +28,7 @@
     "shallow-equal": "^1.0.0"
   },
   "devDependencies": {
-    "fela": "^6.1.5",
+    "fela": "^6.1.6",
     "fela-monolithic": "^5.0.20"
   }
 }

packages/fela-dom/package.json

@@ -29,7 +29,7 @@
     "fela-utils": "^8.0.5"
   },
   "devDependencies": {
-    "fela": "^6.1.5",
+    "fela": "^6.1.6",
     "fela-preset-web": "^8.0.5",
     "fela-tools": "^5.1.4"
   }

packages/fela-font-renderer/package.json

@@ -24,7 +24,7 @@
   "author": "Robin Frischmann",
   "license": "MIT",
   "dependencies": {
-    "fela": "^6.1.5",
+    "fela": "^6.1.6",
     "fela-dom": "^7.0.6"
   }
 }

packages/fela-identifier/package.json

@@ -24,7 +24,7 @@
     "fast-loops": "^1.0.0"
   },
   "devDependencies": {
-    "fela": "^6.1.5",
+    "fela": "^6.1.6",
     "fela-tools": "^5.1.4"
   }
 }

packages/fela-layout-debugger/package.json

@@ -25,6 +25,6 @@
     "styles-debugger": "^0.0.5"
   },
   "devDependencies": {
-    "fela": "^6.1.5"
+    "fela": "^6.1.6"
   }
 }

packages/fela-monolithic/package.json

@@ -29,7 +29,7 @@
     "isobject": "^3.0.1"
   },
   "devDependencies": {
-    "fela": "^6.1.5",
+    "fela": "^6.1.6",
     "fela-tools": "^5.1.4",
     "react-fela": "^7.1.0"
   }

packages/fela-plugin-custom-property/package.json

@@ -25,6 +25,6 @@
     "isobject": "^3.0.1"
   },
   "peerDependencies": {
-    "fela": "^6.0.0"
+    "fela": "^6.1.6"
   }
 }

packages/fela-plugin-embedded/package.json

@@ -21,14 +21,14 @@
   "author": "Robin Frischmann",
   "license": "MIT",
   "peerDependencies": {
-    "fela": "^6.1.3"
+    "fela": "^6.1.6"
   },
   "dependencies": {
     "fast-loops": "^1.0.0",
     "isobject": "^3.0.1"
   },
   "devDependencies": {
-    "fela": "^6.1.5",
+    "fela": "^6.1.6",
     "fela-tools": "^5.1.4"
   }
 }

packages/fela-plugin-embedded/src/__tests__/__snapshots__/embedded-test.js.snap

@@ -2,10 +2,10 @@
 
 exports[`Embedded plugin should render base64 fonts 1`] = `"@font-face{font-weight:500;src:url(data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAHwwABMAAAAA4I) format('woff');font-family:\\"foo\\"}.a{font-family:\\"foo\\"}"`;
 
-exports[`Embedded plugin should render inline fonts with same fontFamily 1`] = `"@font-face{font-weight:400;src:,url('arial-regular.ttf') format('truetype');font-family:\\"Arial\\"}@font-face{font-weight:700;src:,url('arial-bold.ttf') format('truetype');font-family:\\"Arial\\"}.a{color:red}.b{font-family:\\"Arial\\"}"`;
+exports[`Embedded plugin should render inline fonts with same fontFamily 1`] = `"@font-face{font-weight:400;src:url('arial-regular.svg') format('svg'),url('arial-regular.ttf') format('truetype');font-family:\\"Arial\\"}@font-face{font-weight:700;src:url('arial-bold.svg') format('svg'),url('arial-bold.ttf') format('truetype');font-family:\\"Arial\\"}.a{color:red}.b{font-family:\\"Arial\\"}"`;
 
-exports[`Embedded plugin should render inline keyframes & fonts 1`] = `"@font-face{font-weight:500;src:,url('bar.ttf') format('truetype');font-family:\\"Arial\\"}@-webkit-keyframes k1{0%{color:red}100%{color:blue}}@-moz-keyframes k1{0%{color:red}100%{color:blue}}@keyframes k1{0%{color:red}100%{color:blue}}.a{color:red}.b{animation-name:k1}.c{font-family:\\"Arial\\"}"`;
+exports[`Embedded plugin should render inline keyframes & fonts 1`] = `"@font-face{font-weight:500;src:url('foo.svg') format('svg'),url('bar.ttf') format('truetype');font-family:\\"Arial\\"}@-webkit-keyframes k1{0%{color:red}100%{color:blue}}@-moz-keyframes k1{0%{color:red}100%{color:blue}}@keyframes k1{0%{color:red}100%{color:blue}}.a{color:red}.b{animation-name:k1}.c{font-family:\\"Arial\\"}"`;
 
-exports[`Embedded plugin should render inline multiple keyframes & fonts 1`] = `"@font-face{font-weight:500;src:,url('bar.ttf') format('truetype');font-family:\\"Arial\\"}@font-face{font-weight:400;src:,url('asd.ttf') format('truetype');font-family:\\"Lato Light\\"}@-webkit-keyframes k1{0%{color:red}100%{color:blue}}@-moz-keyframes k1{0%{color:red}100%{color:blue}}@keyframes k1{0%{color:red}100%{color:blue}}@-webkit-keyframes k2{0%{background-color:red}100%{background-color:blue}}@-moz-keyframes k2{0%{background-color:red}100%{background-color:blue}}@keyframes k2{0%{background-color:red}100%{background-color:blue}}.a{color:red}.b{animation-name:k1,k2}.c{font-family:\\"Arial\\",\\"Lato Light\\"}"`;
+exports[`Embedded plugin should render inline multiple keyframes & fonts 1`] = `"@font-face{font-weight:500;src:url('foo.svg') format('svg'),url('bar.ttf') format('truetype');font-family:\\"Arial\\"}@font-face{font-weight:400;src:url('baz.svg') format('svg'),url('asd.ttf') format('truetype');font-family:\\"Lato Light\\"}@-webkit-keyframes k1{0%{color:red}100%{color:blue}}@-moz-keyframes k1{0%{color:red}100%{color:blue}}@keyframes k1{0%{color:red}100%{color:blue}}@-webkit-keyframes k2{0%{background-color:red}100%{background-color:blue}}@-moz-keyframes k2{0%{background-color:red}100%{background-color:blue}}@keyframes k2{0%{background-color:red}100%{background-color:blue}}.a{color:red}.b{animation-name:k1,k2}.c{font-family:\\"Arial\\",\\"Lato Light\\"}"`;
 
-exports[`Embedded plugin should render nested inline keyframes & fonts 1`] = `"@font-face{font-weight:500;src:,url('bar.ttf') format('truetype');font-family:\\"Arial\\"}@-webkit-keyframes k1{0%{color:red}100%{color:blue}}@-moz-keyframes k1{0%{color:red}100%{color:blue}}@keyframes k1{0%{color:red}100%{color:blue}}.a{color:red}.b:hover{animation-name:k1}.c:hover{font-family:\\"Arial\\"}"`;
+exports[`Embedded plugin should render nested inline keyframes & fonts 1`] = `"@font-face{font-weight:500;src:url('foo.svg') format('svg'),url('bar.ttf') format('truetype');font-family:\\"Arial\\"}@-webkit-keyframes k1{0%{color:red}100%{color:blue}}@-moz-keyframes k1{0%{color:red}100%{color:blue}}@keyframes k1{0%{color:red}100%{color:blue}}.a{color:red}.b:hover{animation-name:k1}.c:hover{font-family:\\"Arial\\"}"`;

packages/fela-plugin-extend/package.json

@@ -20,7 +20,7 @@
   "author": "Robin Frischmann",
   "license": "MIT",
   "peerDependencies": {
-    "fela": "^6.0.0"
+    "fela": "^6.1.6"
   },
   "dependencies": {
     "css-in-js-utils": "2.0.0",

packages/fela-plugin-simulate/package.json

@@ -22,7 +22,7 @@
   "author": "Robin Frischmann",
   "license": "MIT",
   "peerDependencies": {
-    "fela": "^6.0.0"
+    "fela": "^6.1.6"
   },
   "dependencies": {
     "css-in-js-utils": "^2.0.0",

packages/fela-tools/package.json

@@ -20,12 +20,12 @@
   "author": "Robin Frischmann",
   "license": "MIT",
   "peerDependencies": {
-    "fela": "^6.1.3"
+    "fela": "^6.1.6"
   },
   "dependencies": {
     "css-in-js-utils": "2.0.0",
     "fast-loops": "^1.0.0",
-    "fela": "^6.1.5",
+    "fela": "^6.1.6",
     "fela-utils": "^8.0.5"
   }
 }

packages/fela-utils/package.json

@@ -25,6 +25,6 @@
     "string-hash": "^1.1.3"
   },
   "devDependencies": {
-    "fela": "^6.1.5"
+    "fela": "^6.1.6"
   }
 }

packages/fela/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fela",
-  "version": "6.1.5",
+  "version": "6.1.6",
   "description": "State-Driven Styling in JavaScript",
   "typings": "index.d.ts",
   "main": "lib/index.js",

packages/fela/src/__tests__/createRenderer-test.js

@@ -383,6 +383,23 @@ describe('Renderer', () => {
 
       expect(family).toEqual('"Arial"')
     })
+    it('should create a valid src list', () => {
+      const renderer = createRenderer()
+      const family = 'Arial'
+      const properties = {}
+
+      renderer.renderFont(
+        family,
+        ['../fonts/Arial.ttf', '../fonts/Arial.woff'],
+        properties
+      )
+
+      const key = family + JSON.stringify(properties)
+      const src = renderer.cache[key].fontFace.match(/.*(src:.*);.*$/)[1]
+      expect(src).toEqual(
+        "src:url('../fonts/Arial.ttf') format('truetype'),url('../fonts/Arial.woff') format('woff')"
+      )
+    })
   })
 
   describe('Subscribing to the Renderer', () => {

packages/fela/src/generateFontSource.js

@@ -24,7 +24,7 @@ export default function generateFontSource(
       const fileFormat = getFontFormat(fileSource)
       const fileUrl = getFontUrl(fileSource)
 
-      return `${prefix}url(${fileUrl}) format('${fileFormat}')`
+      return `${src}${prefix}url(${fileUrl}) format('${fileFormat}')`
     },
     localSource
   )