diff --git a/packages/text/src/TextStyle.js b/packages/text/src/TextStyle.js index dc81a35..354936c 100644 --- a/packages/text/src/TextStyle.js +++ b/packages/text/src/TextStyle.js @@ -36,6 +36,15 @@ leading: 0, }; +const genericFontFamilies = [ + 'serif', + 'sans-serif', + 'monospace', + 'cursive', + 'fantasy', + 'system-ui', +] + /** * A TextStyle Object contains information to decorate a Text objects. * @@ -698,7 +707,7 @@ let fontFamily = fontFamilies[i].trim(); // Check if font already contains strings - if (!(/([\"\'])[^\'\"]+\1/).test(fontFamily)) + if (!(/([\"\'])[^\'\"]+\1/).test(fontFamily) && genericFontFamilies.indexOf(fontFamily) < 0) { fontFamily = `"${fontFamily}"`; } diff --git a/packages/text/src/TextStyle.js b/packages/text/src/TextStyle.js index dc81a35..354936c 100644 --- a/packages/text/src/TextStyle.js +++ b/packages/text/src/TextStyle.js @@ -36,6 +36,15 @@ leading: 0, }; +const genericFontFamilies = [ + 'serif', + 'sans-serif', + 'monospace', + 'cursive', + 'fantasy', + 'system-ui', +] + /** * A TextStyle Object contains information to decorate a Text objects. * @@ -698,7 +707,7 @@ let fontFamily = fontFamilies[i].trim(); // Check if font already contains strings - if (!(/([\"\'])[^\'\"]+\1/).test(fontFamily)) + if (!(/([\"\'])[^\'\"]+\1/).test(fontFamily) && genericFontFamilies.indexOf(fontFamily) < 0) { fontFamily = `"${fontFamily}"`; } diff --git a/packages/text/test/TextStyle.js b/packages/text/test/TextStyle.js index 859574b..140a235 100644 --- a/packages/text/test/TextStyle.js +++ b/packages/text/test/TextStyle.js @@ -39,7 +39,7 @@ fontFamily: ['Georgia', 'Arial', 'sans-serif'], }); - expect(style.toFontString()).to.have.string('"Georgia","Arial","sans-serif"'); + expect(style.toFontString()).to.have.string('"Georgia","Arial",sans-serif'); }); it('should handle multiple fonts as string', function () @@ -48,7 +48,7 @@ fontFamily: 'Georgia, "Arial", sans-serif', }); - expect(style.toFontString()).to.have.string('"Georgia","Arial","sans-serif"'); + expect(style.toFontString()).to.have.string('"Georgia","Arial",sans-serif'); }); it('should not shared array / object references between different instances', function () @@ -60,4 +60,33 @@ style.fillGradientStops.push(0); expect(defaultStyle.fillGradientStops.length).to.not.equal(style.fillGradientStops.length); }); + + it('should not quote generic font families when calling toFontString', function () + { + // Should match the list in TextStyle + const genericFontFamilies = [ + 'serif', + 'sans-serif', + 'monospace', + 'cursive', + 'fantasy', + 'system-ui', + ]; + + // Regex to find any of the generic families surrounded by either type of quote mark + const incorrectRegexTemplate = '["\']FAMILY["\']'; + + for (const genericFamily of genericFontFamilies) + { + const style = new TextStyle({ + fontFamily: ['Georgia', 'Arial', genericFamily], + }); + + // Create regex from template substituting target family + const regex = new RegExp(incorrectRegexTemplate.replace('FAMILY', genericFamily)); + const result = style.toFontString().match(regex); + + expect(result).to.be.null; + } + }); });