Allow quotes within font-family names

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

Co-authored-by: Caleb Hearon <caleb@chearon.net>

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) {