Fixed an issue with internal buffer being lost for nested factory calls

.changeset/nice-apples-arrive.md

@@ -0,0 +1,18 @@
+---
+'@emotion/native': patch
+'@emotion/primitives': patch
+'@emotion/primitives-core': patch
+---
+
+Fixed an issue with styles being lost for nested factory calls like:
+
+```js
+const bgColor = color => css`
+  background-color: ${color};
+`
+
+const Text = styled.Text`
+  color: hotpink;
+  ${({ backgroundColor }) => bgColor(backgroundColor)};
+`
+```

packages/native/test/__snapshots__/native-styled.test.js.snap

@@ -68,6 +68,20 @@ exports[`Emotion native styled should render primitive with style prop 1`] = `
 </Text>
 `;
 
+exports[`Emotion native styled should render styles correctly from all nested style factories 1`] = `
+<Text
+  backgroundColor="blue"
+  style={
+    Object {
+      "backgroundColor": "blue",
+      "color": "hotpink",
+    }
+  }
+>
+  Hello World
+</Text>
+`;
+
 exports[`Emotion native styled should render the primitive on changing the props 1`] = `
 <Text
   decor="hotpink"

packages/native/test/native-styled.test.js

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import renderer from 'react-test-renderer'
 import { ThemeProvider } from '@emotion/react'
-import styled from '@emotion/native'
+import styled, { css } from '@emotion/native'
 import reactNative from 'react-native'
 
 const StyleSheet = reactNative.StyleSheet
@@ -150,4 +150,21 @@ describe('Emotion native styled', () => {
       "'padding' shorthand property requires units for example - padding: 20px or padding: 10px 20px 40px 50px"
     )
   })
+
+  it('should render styles correctly from all nested style factories', () => {
+    const bgColor = color => css`
+      background-color: ${color};
+    `
+
+    const Text = styled.Text`
+      color: hotpink;
+      ${({ backgroundColor }) => bgColor(backgroundColor)};
+    `
+
+    const tree = renderer
+      .create(<Text backgroundColor="blue">Hello World</Text>)
+      .toJSON()
+
+    expect(tree).toMatchSnapshot()
+  })
 })

packages/primitives-core/src/css.js

@@ -7,7 +7,7 @@ import { interleave } from './utils'
 // this is done so we don't create a new
 // handleInterpolation function on every css call
 let styles
-let buffer
+let buffer = ''
 let lastType
 
 function handleInterpolation(interpolation: *, i: number, arr: Array<*>) {
@@ -80,6 +80,7 @@ function handleInterpolation(interpolation: *, i: number, arr: Array<*>) {
 // This enables us to use the css``/css({}) in any environment (Native | Sketch | Web)
 export function createCss(StyleSheet: Object) {
   return function css(...args: any) {
+    const prevBuffer = buffer
     let vals
 
     // these are declared earlier
@@ -95,7 +96,11 @@ export function createCss(StyleSheet: Object) {
       vals = interleave(args)
     }
 
-    vals.forEach(handleInterpolation, this)
+    try {
+      vals.forEach(handleInterpolation, this)
+    } finally {
+      buffer = prevBuffer
+    }
 
     return StyleSheet.flatten(styles)
   }