Allow quotes within font-family names

Add fix to the changelog
Use regexp syntax for "string"

Co-authored-by: Caleb Hearon <[email protected]>

Author: virtulis

CHANGELOG.md

@@ -39,6 +39,7 @@ This release notably changes to using N-API. 🎉
 * Fix the improper parsing of rgb functions issue. (#2300)
 * Fix issue related to improper parsing of leading and trailing whitespaces in CSS color. (#2301)
 * RGB functions should support real numbers now instead of just integers. (#2339)
+* Allow alternate or properly escaped quotes *within* font-family names
 
 2.11.2
 ==================

lib/parse-font.js

@@ -9,7 +9,7 @@ const styles = 'italic|oblique'
 const variants = 'small-caps'
 const stretches = 'ultra-condensed|extra-condensed|condensed|semi-condensed|semi-expanded|expanded|extra-expanded|ultra-expanded'
 const units = 'px|pt|pc|in|cm|mm|%|em|ex|ch|rem|q'
-const string = '\'([^\']+)\'|"([^"]+)"|[\\w\\s-]+'
+const string = /'((\\'|[^'])+)'|"((\\"|[^"])+)"|[\w\s-]+/.source
 
 // [ [ <‘font-style’> || <font-variant-css21> || <‘font-weight’> || <‘font-stretch’> ]?
 //    <‘font-size’> [ / <‘line-height’> ]? <‘font-family’> ]
@@ -18,6 +18,9 @@ const weightRe = new RegExp(`(${weights}) +`, 'i')
 const styleRe = new RegExp(`(${styles}) +`, 'i')
 const variantRe = new RegExp(`(${variants}) +`, 'i')
 const stretchRe = new RegExp(`(${stretches}) +`, 'i')
+const familyRe = new RegExp(string, 'g')
+const unquoteRe = /^['"](.*)['"]$/
+const unescapeRe = /\\(['"])/g
 const sizeFamilyRe = new RegExp(
   `([\\d\\.]+)(${units}) *((?:${string})( *, *(?:${string}))*)`)
 
@@ -46,6 +49,12 @@ module.exports = str => {
   const sizeFamily = sizeFamilyRe.exec(str)
   if (!sizeFamily) return // invalid
 
+  const names = sizeFamily[3]
+    .match(familyRe)
+    // remove actual bounding quotes, if any, unescape any remaining quotes inside
+    .map(s => s.trim().replace(unquoteRe, '$1').replace(unescapeRe, '$1'))
+    .filter(s => !!s)
+
   // Default values and required properties
   const font = {
     weight: 'normal',
@@ -54,7 +63,7 @@ module.exports = str => {
     variant: 'normal',
     size: parseFloat(sizeFamily[1]),
     unit: sizeFamily[2],
-    family: sizeFamily[3].replace(/["']/g, '').replace(/ *, */g, ',')
+    family: names.join(',')
   }
 
   // Optional, unordered properties.

test/canvas.test.js

@@ -88,7 +88,9 @@ describe('Canvas', function () {
       '20px "new century schoolbook", serif',
       { size: 20, unit: 'px', family: 'new century schoolbook,serif' },
       '20px "Arial bold 300"', // synthetic case with weight keyword inside family
-      { size: 20, unit: 'px', family: 'Arial bold 300', variant: 'normal' }
+      { size: 20, unit: 'px', family: 'Arial bold 300', variant: 'normal' },
+      `50px "Helvetica 'Neue'", "foo \\"bar\\" baz" , "Someone's weird \\'edge\\' case", sans-serif`,
+      { size: 50, unit: 'px', family: `Helvetica 'Neue',foo "bar" baz,Someone's weird 'edge' case,sans-serif` }
     ]
 
     for (let i = 0, len = tests.length; i < len; ++i) {