diff --git a/packages/react-native/Libraries/StyleSheet/__tests__/processBackgroundImage-test.js b/packages/react-native/Libraries/StyleSheet/__tests__/processBackgroundImage-test.js index d99d51b7af6..9e31118b570 100644 --- a/packages/react-native/Libraries/StyleSheet/__tests__/processBackgroundImage-test.js +++ b/packages/react-native/Libraries/StyleSheet/__tests__/processBackgroundImage-test.js @@ -160,7 +160,30 @@ describe('processBackgroundImage', () => { it('should process multiple linear gradients', () => { const input = ` - linear-gradient(to right, red, blue), + linear-gradient(to right, red, blue), + linear-gradient(to bottom, green, yellow)`; + const result = processBackgroundImage(input); + expect(result).toHaveLength(2); + expect(result[0].type).toEqual('linearGradient'); + expect(result[0].start).toEqual({x: 0, y: 0.5}); + expect(result[0].end).toEqual({x: 1, y: 0.5}); + expect(result[0].colorStops).toEqual([ + {color: processColor('red'), position: 0}, + {color: processColor('blue'), position: 1}, + ]); + expect(result[1].type).toEqual('linearGradient'); + expect(result[1].start).toEqual({x: 0.5, y: 0}); + expect(result[1].end).toEqual({x: 0.5, y: 1}); + + expect(result[1].colorStops).toEqual([ + {color: processColor('green'), position: 0}, + {color: processColor('yellow'), position: 1}, + ]); + }); + + it('should process multiple linear gradients with newlines', () => { + const input = ` + linear-gradient(to right, red, blue),\n linear-gradient(to bottom, green, yellow)`; const result = processBackgroundImage(input); expect(result).toHaveLength(2); @@ -233,7 +256,7 @@ describe('processBackgroundImage', () => { }); it('should process multiple gradients with spaces', () => { - const input = `linear-gradient(to right , + const input = `linear-gradient(to right , rgba(255,0,0,0.5), rgba(0,0,255,0.8)), linear-gradient(to bottom , rgba(255,0,0,0.9) , rgba(0,0,255,0.2) )`; const result = processBackgroundImage(input); diff --git a/packages/react-native/Libraries/StyleSheet/__tests__/processBoxShadow-test.js b/packages/react-native/Libraries/StyleSheet/__tests__/processBoxShadow-test.js index d65369f6230..1700aaba8b4 100644 --- a/packages/react-native/Libraries/StyleSheet/__tests__/processBoxShadow-test.js +++ b/packages/react-native/Libraries/StyleSheet/__tests__/processBoxShadow-test.js @@ -149,6 +149,30 @@ describe('processBoxShadow', () => { ]); }); + it('should parse multiple box shadow strings with newlines', () => { + expect( + processBoxShadow('10 5 red, 5 12 inset,\n inset 10 45 13 red'), + ).toEqual([ + { + offsetX: 10, + offsetY: 5, + color: processColor('red'), + }, + { + offsetX: 5, + offsetY: 12, + inset: true, + }, + { + offsetX: 10, + offsetY: 45, + blurRadius: 13, + inset: true, + color: processColor('red'), + }, + ]); + }); + it('should fail to parse string with invalid units', () => { expect(processBoxShadow('red 10em 5$ 2| 3rp')).toEqual([]); }); diff --git a/packages/react-native/Libraries/StyleSheet/__tests__/processFilter-test.js b/packages/react-native/Libraries/StyleSheet/__tests__/processFilter-test.js index 7bb31363424..af0cbf0bf06 100644 --- a/packages/react-native/Libraries/StyleSheet/__tests__/processFilter-test.js +++ b/packages/react-native/Libraries/StyleSheet/__tests__/processFilter-test.js @@ -115,6 +115,13 @@ describe('processFilter', () => { processFilter('brightness(0.5) opacity(0.5) blur(5) hue-rotate(90deg)'), ).toEqual([{brightness: 0.5}, {opacity: 0.5}, {blur: 5}, {hueRotate: 90}]); }); + it('string multiple filters with newlines', () => { + expect( + processFilter( + 'brightness(0.5)\n opacity(0.5)\n blur(5)\n hue-rotate(90deg)', + ), + ).toEqual([{brightness: 0.5}, {opacity: 0.5}, {blur: 5}, {hueRotate: 90}]); + }); it('string multiple filters one invalid', () => { expect( processFilter('brightness(0.5) opacity(0.5) blur(5) hue-rotate(90foo)'), diff --git a/packages/react-native/Libraries/StyleSheet/processBackgroundImage.js b/packages/react-native/Libraries/StyleSheet/processBackgroundImage.js index 38dda2e4b44..ccfad8a1070 100644 --- a/packages/react-native/Libraries/StyleSheet/processBackgroundImage.js +++ b/packages/react-native/Libraries/StyleSheet/processBackgroundImage.js @@ -42,7 +42,7 @@ export default function processBackgroundImage( } if (typeof backgroundImage === 'string') { - result = parseCSSLinearGradient(backgroundImage); + result = parseCSSLinearGradient(backgroundImage.replace(/\n/g, ' ')); } else if (Array.isArray(backgroundImage)) { for (const bgImage of backgroundImage) { const processedColorStops: Array<{ diff --git a/packages/react-native/Libraries/StyleSheet/processBoxShadow.js b/packages/react-native/Libraries/StyleSheet/processBoxShadow.js index dd258f18592..97c6581584a 100644 --- a/packages/react-native/Libraries/StyleSheet/processBoxShadow.js +++ b/packages/react-native/Libraries/StyleSheet/processBoxShadow.js @@ -33,7 +33,7 @@ export default function processBoxShadow( const boxShadowList = typeof rawBoxShadows === 'string' - ? parseBoxShadowString(rawBoxShadows) + ? parseBoxShadowString(rawBoxShadows.replace(/\n/g, ' ')) : rawBoxShadows; for (const rawBoxShadow of boxShadowList) { diff --git a/packages/react-native/Libraries/StyleSheet/processFilter.js b/packages/react-native/Libraries/StyleSheet/processFilter.js index 6b2dc6f689f..584b28b713b 100644 --- a/packages/react-native/Libraries/StyleSheet/processFilter.js +++ b/packages/react-native/Libraries/StyleSheet/processFilter.js @@ -44,6 +44,8 @@ export default function processFilter( } if (typeof filter === 'string') { + filter = filter.replace(/\n/g, ' '); + // matches on functions with args and nested functions like "drop-shadow(10 10 10 rgba(0, 0, 0, 1))" const regex = /([\w-]+)\(([^()]*|\([^()]*\)|[^()]*\([^()]*\)[^()]*)\)/g; let matches;