fix(emotion): fix css function

Author: gregberge

.babelrc.js

@@ -1,6 +1,8 @@
 const { STYLED_ENGINE = 'styled-components' } = process.env
 
 const getStyledEnginePlugins = () => {
+  if (process.env.NODE_ENV === 'test') return []
+
   switch (STYLED_ENGINE) {
     case 'emotion':
       return ['babel-plugin-emotion']

packages/shared/core/styled-engine/emotion.js

@@ -24,18 +24,22 @@ export const withTheme = Component => {
   return SafeWithTheme
 }
 
-const css = (parts, ...args) => {
-  if (
-    typeof parts === 'function' ||
-    args.some(arg => typeof arg === 'function')
-  ) {
+const isInterpolation = func => {
+  if (typeof func !== 'function') return false
+  // eslint-disable-next-line no-underscore-dangle
+  if (func.__emotion_styles) return false
+  return true
+}
+
+const css = (...args) => {
+  if (args.some(arg => isInterpolation(arg))) {
     return props => {
       if (!props) {
         throw new Error('Wrong usage of `css` function')
       }
 
       const transform = arg => {
-        if (typeof arg === 'function') {
+        if (isInterpolation(arg)) {
           return transform(arg(props))
         }
 
@@ -47,13 +51,11 @@ const css = (parts, ...args) => {
       }
 
       const transformedArgs = transform(args)
-      const transformedParts =
-        typeof parts === 'function' ? transform(parts) : parts
-      return emotionCss(transformedParts, ...transformedArgs)
+      return emotionCss(...transformedArgs)
     }
   }
 
-  return emotionCss(parts, ...args)
+  return emotionCss(...args)
 }
 
 function patchStyledComponent(StyledComponent) {

packages/shared/core/styled-engine/emotion.test.js

@@ -0,0 +1,32 @@
+import styled, { css } from './emotion'
+
+describe('emotion styled engine', () => {
+  describe('#css', () => {
+    it('should work values without functions', () => {
+      expect(css({ color: 'red' })).toBe('css-tokvmb')
+      expect(css({ color: 'red' }, { fontSize: 10 })).toBe('css-ia2oof')
+      expect(css('color: red;', 'font-size: 10px;')).toBe('css-odcmjf')
+    })
+
+    it('should handle components', () => {
+      const Dummy = styled('div')`
+        color: blue;
+      `
+      expect.assertions(1)
+
+      try {
+        css(Dummy, 'font-size: 10px;')
+      } catch (error) {
+        expect(error.message).toBe(
+          'Component selectors can only be used in conjunction with babel-plugin-emotion.',
+        )
+      }
+    })
+
+    it('should handle interpolations', () => {
+      expect(
+        css('font-size: 10px;', props => ({ color: props.color })),
+      ).toBeInstanceOf(Function)
+    })
+  })
+})