Emotion Primitives

packages/emotion-primitives/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "emotion-primitives",
+  "version": "1.0.0-beta.1",
+  "main": "src/index.js",
+  "license": "MIT",
+  "dependencies": {
+    "css-to-react-native": "^2.2.0",
+    "prop-types": "^15.6.1",
+    "react-primitives": "^0.5.1"
+  },
+  "devDependencies": {
+    "enzyme": "^3.3.0",
+    "enzyme-adapter-react-16": "^1.1.1"
+  }
+}

packages/emotion-primitives/src/convertToRNStyles.js

@@ -0,0 +1,109 @@
+import { StyleSheet } from 'react-primitives'
+import transform from 'css-to-react-native'
+
+// Copied and edited from @emotion/css
+// Cannot use css from @emotion/css directly because of unnecessary checks, __emotion_styles, and registering interpolations in cache.
+function handleInterpolation(interpolation, couldBeSelectorInterpolation) {
+  if (interpolation == null) {
+    return ''
+  }
+
+  switch (typeof interpolation) {
+    case 'boolean':
+      return ''
+    case 'function':
+      return handleInterpolation.call(
+        this,
+        this === undefined ? interpolation() : interpolation(this.props),
+        couldBeSelectorInterpolation
+      )
+
+    default:
+      return interpolation
+  }
+}
+
+// Return evaluated css string
+function createStyles(strings, ...interpolations) {
+  let stringMode = true
+  let styles = ''
+
+  if (strings == null || strings.raw === undefined) {
+    stringMode = false
+    styles += handleInterpolation.call(this, strings, false)
+  } else {
+    styles += strings[0]
+  }
+
+  interpolations.forEach(function(interpolation, i) {
+    styles += handleInterpolation.call(
+      this,
+      interpolation,
+      styles.charCodeAt(styles.length - 1) === 46
+    )
+
+    if (stringMode === true && strings[i + 1] !== undefined) {
+      styles += strings[i + 1]
+    }
+  }, this)
+
+  return styles
+}
+
+function convertStyles(str) {
+  if (typeof str === 'string' && str.length === 0) return str
+
+  const styleObj = []
+
+  const parsedString = str.split(';')
+
+  parsedString.forEach(style => {
+    if (typeof style === 'string') {
+      // Get prop name and prop value
+      const ar = style.split(': ')
+
+      if (ar[0] && ar[1]) {
+        styleObj.push([ar[0].trim(), ar[1].trim()])
+      }
+    }
+  })
+
+  return styleObj
+}
+
+export function convertToRNStyles(styles) {
+  if (styles[0][0] !== undefined) {
+    let arr = []
+
+    arr.push(styles[0][0])
+    let len = styles.length
+    let i = 1
+    for (; i < len; i++) {
+      arr.push(styles[i], styles[0][i])
+    }
+
+    let css = createStyles.apply(this, arr)
+
+    let parsedCSS = convertStyles(css)
+
+    // Convert css styles to react native
+    let rnStyles = Array.isArray(parsedCSS) ? transform(parsedCSS) : {}
+
+    return [StyleSheet.create({ style: rnStyles }).style]
+  } else if (styles[0] == null || styles[0].raw === undefined) {
+    return styles
+      .filter(style => {
+        if (typeof style === 'object') {
+          return Object.keys(style).length > 0
+        }
+        return true
+      })
+      .map(style => {
+        if (typeof style === 'object') {
+          return StyleSheet.create({ style }).style
+        }
+
+        return style
+      })
+  }
+}

packages/emotion-primitives/src/createEmotion.js

@@ -0,0 +1,109 @@
+import * as React from 'react'
+import reactPrimitives from 'react-primitives'
+import PropTypes from 'prop-types'
+
+import { getStyles } from './getStyles'
+import { convertToRNStyles } from './convertToRNStyles'
+
+const isValidPrimitive = primitive =>
+  ['Text', 'View', 'Image'].indexOf(primitive) > -1
+
+const getPrimitive = primitive => {
+  if (typeof primitive === 'string' && isValidPrimitive(primitive)) {
+    return reactPrimitives[primitive]
+  } else if (typeof primitive === 'string' && !isValidPrimitive(primitive)) {
+    throw new Error(
+      `Cannot style invalid primitive ${primitive}. Expected primitive to be one of ['Text', 'View', 'Image']`
+    )
+  } else if (typeof primitive === 'function') {
+    return primitive
+  }
+}
+
+function evalStyles(context, Comp, styles, styleOverrides) {
+  // Assign static property so that the styles can be reused (like in withComponent)
+  Comp.styles = convertToRNStyles.call(context, styles)
+
+  return getStyles.call(context, Comp.styles, context.props, styleOverrides)
+}
+
+/**
+ * Creates a function that renders the styles on multiple targets with same code.
+ */
+export function createEmotionPrimitive(splitProps) {
+  /*
+   * Returns styled component
+   */
+  return function emotion(primitive, { displayName } = {}) {
+    return createStyledComponent
+
+    /**
+     * Create emotion styled component
+     */
+    function createStyledComponent() {
+      let styles = []
+
+      styles.push.apply(styles, arguments)
+
+      class Styled extends React.Component {
+        static propTypes = {
+          innerRef: PropTypes.func
+        }
+
+        onRef = innerComponent => {
+          this.innerComponent = innerComponent
+
+          if (this.props.innerRef) {
+            this.props.innerRef(innerComponent)
+          }
+        }
+
+        render() {
+          const { toForward, styleOverrides } = splitProps(
+            primitive,
+            this.props
+          )
+
+          const emotionStyles = evalStyles(this, Styled, styles, styleOverrides)
+
+          return React.createElement(
+            getPrimitive(primitive),
+            {
+              ...toForward,
+              ref: this.onRef,
+              style: emotionStyles.length > 0 ? emotionStyles : null
+            },
+            this.props.children || null
+          )
+        }
+      }
+
+      Styled.primitive = primitive
+
+      Styled.withComponent = (newPrimitive, options = {}) =>
+        emotion(getPrimitive(newPrimitive), {
+          ...options
+        })(...Styled.styles)
+
+      Object.assign(
+        Styled,
+        getStyledMetadata({
+          primitive,
+          styles,
+          displayName
+        })
+      )
+
+      return Styled
+    }
+  }
+}
+
+const getStyledMetadata = ({ primitive, styles, displayName }) => ({
+  styles: primitive.styles ? primitive.styles.concat(styles) : styles,
+  primitive: primitive.primitive ? primitive.primitive : primitive,
+  displayName: displayName || `emotion(${getDisplayName(primitive)})`
+})
+
+const getDisplayName = primitive =>
+  typeof primitive === 'string' ? primitive : primitive.displayName || 'Styled'

packages/emotion-primitives/src/getStyles.js

@@ -0,0 +1,23 @@
+function evaluateStyles(styles, props) {
+  return styles.map(style => {
+    if (typeof style === 'function') {
+      return style(props)
+    }
+
+    return style
+  })
+}
+
+export function getStyles(styles, props, styleOverrides) {
+  const emotionStyles = evaluateStyles(styles, props)
+
+  if (props.style) {
+    emotionStyles.push(props.style)
+  }
+
+  if (styleOverrides && Object.keys(styleOverrides).length > 0) {
+    emotionStyles.push(styleOverrides)
+  }
+
+  return emotionStyles
+}

packages/emotion-primitives/src/index.js

@@ -0,0 +1,50 @@
+import reactPrimitives from 'react-primitives'
+
+import { createEmotionPrimitive } from './createEmotion'
+import { splitProps } from './splitProps'
+
+const primitives = ['Text', 'View', 'Image']
+
+const assignPrimitives = styled => {
+  Object.assign(
+    styled,
+    primitives.reduce((getters, alias) => {
+      getters[alias.toLowerCase()] = styled(reactPrimitives[alias])
+      return getters
+    }, {})
+  )
+
+  Object.assign(
+    styled,
+    primitives.reduce((getters, alias) => {
+      const tag = alias.toLowerCase()
+      getters[alias] = styled[tag]()
+      getters[alias].tag = reactPrimitives[alias]
+      getters[alias].displayName = `emotion.${tag}`
+      return getters
+    }, {})
+  )
+
+  return styled
+}
+
+const emotion = createEmotionPrimitive(splitProps)
+
+// Validate primitives accessed using the emotion function directly like emotion.TEXT`` or emotion.VIEW``
+const validate = target => {
+  const handler = {
+    get: (obj, prop) => {
+      if (prop in obj) {
+        return obj[prop]
+      } else {
+        throw new Error(
+          `Cannot style invalid primitive ${prop}. Expected primitive to be one of ['Text', 'View', 'Image']`
+        )
+      }
+    }
+  }
+
+  return new Proxy(target, handler)
+}
+
+export default validate(assignPrimitives(emotion))