Emotion Primitives

packages/emotion-primitives/src/css.js

@@ -3,71 +3,82 @@ import transform from 'css-to-react-native'
 import { StyleSheet } from 'react-primitives'
 import { interleave } from './utils'
 
-export function css(...args: any) {
-  let vals
+let styles
+let buffer
+let lastType
 
-  if (args[0] == null || args[0].raw === undefined) {
-    vals = args
-  } else {
-    vals = interleave(args)
-  }
+function handleInterpolation(interpolation: *, i: number, arr: Array<*>) {
+  let type = typeof interpolation
 
-  let styles = []
-  let buffer = ''
-  let lastType
+  if (type === 'function') {
+    if (this === undefined && process.env.NODE_ENV !== 'production') {
+      console.error(
+        'Interpolating functions in css calls is not allowed.\n' +
+          'If you want to have a css call based on props, create a function that returns a css call like this\n' +
+          'let dynamicStyle = (props) => css`color: ${props.color}`\n' +
+          'It can be called directly with props or interpolated in a styled call like this\n' +
+          'let SomeComponent = styled.View`${dynamicStyle}`'
+      )
+    } else {
+      handleInterpolation.call(
+        this,
+        interpolation(
+          // $FlowFixMe
+          this.mergedProps
+        ),
+        i,
+        arr
+      )
+    }
+    return
+  }
+  let isIrrelevant = interpolation == null || type === 'boolean'
+  let isRnStyle =
+    (type === 'object' && !Array.isArray(interpolation)) || type === 'number'
+  if (lastType === 'string' && (isRnStyle || isIrrelevant)) {
+    let converted = convertStyles(buffer)
+    if (converted !== undefined) {
+      styles.push(converted)
+    }
+    buffer = ''
+  }
+  if (isIrrelevant) {
+    return
+  }
 
-  let handleInterpolation = (interpolation: *, i: number, arr: Array<*>) => {
-    let type = typeof interpolation
+  if (type === 'string') {
+    buffer += interpolation
 
-    if (type === 'function') {
-      if (this === undefined && process.env.NODE_ENV !== 'production') {
-        console.error(
-          'Interpolating functions in css calls is not allowed.\n' +
-            'If you want to have a css call based on props, create a function that returns a css call like this\n' +
-            'let dynamicStyle = (props) => css`color: ${props.color}`\n' +
-            'It can be called directly with props or interpolated in a styled call like this\n' +
-            'let SomeComponent = styled.View`${dynamicStyle}`'
-        )
-      } else {
-        handleInterpolation(interpolation(this.mergedProps), i, arr)
-      }
-      return
-    }
-    let isFalsy = interpolation == null || type === 'boolean'
-    let isRnStyle =
-      (type === 'object' && !Array.isArray(interpolation)) || type === 'number'
-    if (lastType === 'string' && (isRnStyle || isFalsy)) {
+    if (arr.length - 1 === i) {
       let converted = convertStyles(buffer)
       if (converted !== undefined) {
         styles.push(converted)
       }
       buffer = ''
     }
-    if (isFalsy) {
-      return
-    }
+  }
+  if (isRnStyle) {
+    styles.push(interpolation)
+  }
+  if (Array.isArray(interpolation)) {
+    interpolation.forEach(handleInterpolation, this)
+  }
+  lastType = type
+}
 
-    if (type === 'string') {
-      buffer += interpolation
+export function css(...args: any) {
+  let vals
+  styles = []
+  buffer = ''
+  lastType = undefined
 
-      if (arr.length - 1 === i) {
-        let converted = convertStyles(buffer)
-        if (converted !== undefined) {
-          styles.push(converted)
-        }
-        buffer = ''
-      }
-    }
-    if (isRnStyle) {
-      styles.push(interpolation)
-    }
-    if (Array.isArray(interpolation)) {
-      interpolation.forEach(handleInterpolation)
-    }
-    lastType = type
+  if (args[0] == null || args[0].raw === undefined) {
+    vals = args
+  } else {
+    vals = interleave(args)
   }
 
-  vals.forEach(handleInterpolation)
+  vals.forEach(handleInterpolation, this)
 
   return StyleSheet.flatten(styles)
 }
@@ -77,7 +88,7 @@ let propertyValuePattern = /\s*([^\s]+)\s*:\s*(.+?)\s*$/
 function convertStyles(str: string) {
   if (str.trim() === '') return
 
-  const styleObj = []
+  const stylePairs = []
 
   const parsedString = str.split(';')
 
@@ -90,12 +101,9 @@ function convertStyles(str: string) {
       // the first value in the array will
       // be the whole string so we remove it
       match.shift()
-      styleObj.push(match)
+      stylePairs.push(match)
     }
   })
-  if (styleObj.length === 0) {
-    return
-  }
 
-  return transform(styleObj)
+  return transform(stylePairs)
 }

packages/emotion-primitives/src/styled.js

@@ -35,7 +35,7 @@ type State = {
  */
 export function createStyled(component: React.ElementType) {
   let isPrimitive = isPrimitiveComponent(component)
-  let pick = isPrimitive
+  let pickTest = isPrimitive
     ? testPickPropsOnPrimitiveComponent
     : testPickPropsOnOtherComponent
   return function createStyledComponent(...rawStyles: *) {
@@ -82,7 +82,7 @@ export function createStyled(component: React.ElementType) {
 
         return React.createElement(
           component,
-          pickAssign(pick, {}, props, {
+          pickAssign(pickTest, {}, props, {
             ref: props.innerRef,
             style: emotionStyles
           })