diff --git a/packages/react-strict-dom/src/native/css/processStyle.js b/packages/react-strict-dom/src/native/css/processStyle.js index 70078a1c..e5602ca3 100644 --- a/packages/react-strict-dom/src/native/css/processStyle.js +++ b/packages/react-strict-dom/src/native/css/processStyle.js @@ -114,6 +114,12 @@ export function processStyle( if (stringContainsVariables(styleValue)) { result[propName] = CSSUnparsedValue.parse(propName, styleValue); continue; + } else if (propName === 'fontFamily') { + const firstFont = styleValue.split(',')[0].trim(); + // Remove surrounding quotes if present + // e.g. fontFamily: '"Helvetica Neue", sans-serif' + result[propName] = firstFont.replace(/^["']|["']$/g, ''); + continue; } // Polyfill support for backgroundImage using experimental API else if (propName === 'backgroundImage') { diff --git a/packages/react-strict-dom/tests/__snapshots__/css-test.native.js.snap b/packages/react-strict-dom/tests/__snapshots__/css-test.native.js.snap index dd2d4ddf..dfd926de 100644 --- a/packages/react-strict-dom/tests/__snapshots__/css-test.native.js.snap +++ b/packages/react-strict-dom/tests/__snapshots__/css-test.native.js.snap @@ -185,6 +185,38 @@ exports[`properties: general filter 1`] = ` } `; +exports[`properties: general fontFamily: normal 1`] = ` +{ + "style": { + "fontFamily": "Arial", + }, +} +`; + +exports[`properties: general fontFamily: with multiple fallbacks 1`] = ` +{ + "style": { + "fontFamily": "Roboto", + }, +} +`; + +exports[`properties: general fontFamily: with quoted font name 1`] = ` +{ + "style": { + "fontFamily": "SF Pro Display", + }, +} +`; + +exports[`properties: general fontFamily: with single quoted font name 1`] = ` +{ + "style": { + "fontFamily": "Helvetica Neue", + }, +} +`; + exports[`properties: general fontSize: default 1`] = ` { "style": { diff --git a/packages/react-strict-dom/tests/css-test.native.js b/packages/react-strict-dom/tests/css-test.native.js index 8df2defe..f30b9fc6 100644 --- a/packages/react-strict-dom/tests/css-test.native.js +++ b/packages/react-strict-dom/tests/css-test.native.js @@ -296,6 +296,57 @@ describe('properties: general', () => { ).toMatchSnapshot('fontScale:2'); }); + test('fontFamily', () => { + const styles = css.create({ + root: { + fontFamily: 'Arial' + } + }); + expect(css.props.call(mockOptions, styles.root)).toMatchSnapshot('normal'); + expect(css.props.call(mockOptions, styles.root).style.fontFamily).toBe( + 'Arial' + ); + + const styles4 = css.create({ + root: { + fontFamily: 'Roboto, Helvetica, Arial, sans-serif' + } + }); + expect(css.props.call(mockOptions, styles4.root)).toMatchSnapshot( + 'with multiple fallbacks' + ); + // Verify that only the first font is used + expect(css.props.call(mockOptions, styles4.root).style.fontFamily).toBe( + 'Roboto' + ); + + const styles5 = css.create({ + root: { + fontFamily: '"SF Pro Display", -apple-system, sans-serif' + } + }); + expect(css.props.call(mockOptions, styles5.root)).toMatchSnapshot( + 'with quoted font name' + ); + // Verify that quotes are stripped and only first font is used + expect(css.props.call(mockOptions, styles5.root).style.fontFamily).toBe( + 'SF Pro Display' + ); + + const styles6 = css.create({ + root: { + fontFamily: "'Helvetica Neue', Helvetica, Arial" + } + }); + expect(css.props.call(mockOptions, styles6.root)).toMatchSnapshot( + 'with single quoted font name' + ); + // Verify that single quotes are stripped + expect(css.props.call(mockOptions, styles6.root).style.fontFamily).toBe( + 'Helvetica Neue' + ); + }); + test('fontVariant', () => { const styles = css.create({ root: {