Functions that are interpolated in css calls will be stringified.

• emotion version: 10.0.2
• react version: 16.3

Relevant code.

// @flow
import { type SerializedStyles } from '@emotion/utils';
import themeData from './theme';

// Use this function in your components to provide a fallback theme in case
// no ThemeProvider is available
const withFallback = (fn: Object => SerializedStyles) => ({
  theme,
  ...props
}: {
  theme: Object,
}) => {
  const t = Object.keys(theme).length ? theme : themeData.light;
  return fn({ theme: t, ...props });
};

export default withFallback;

What you did:

I created this function to be used in my UI library to make sure a theme is always defined even if no ThemeProvider is available.

Usage:

css`
  color: ${withFallback(props => props.theme.primary)};
`

What happened:

When I run it, in some contexts, I get this error:

console.error node_modules/@emotion/serialize/dist/serialize.cjs.dev.js:135
      Functions that are interpolated in css calls will be stringified.
      If you want to have a css call based on props, create a function that returns a css call like this
      let dynamicStyle = (props) => css`color: ${props.color}`
      It can be called directly with props or interpolated in a styled call like this
      let SomeComponent = styled('div')`${dynamicStyle}`

and the resulting CSS, in fact, is the stringified function.

Reproduction:

https://github.com/FezVrasta/emotion-interpolation-repro

Just run the tests to see the error

Problem description:

My withFallback function seems to work fine if used as:

css`
  color: ${withFallback(props => props.theme.primary)};
`

but throws error if used as:

const textStyles = () => css`
  color: ${withFallback(props => props.theme.primary)};
`;

css`
  ${textStyles()}
`;

(I also tried:

const textStyles = () => () => css`
  color: ${withFallback(props => props.theme.primary)};
`;

with the same result)

Suggested solution:

Not sure

[littlehome-eugene]

what about conditionals such as

 const disableStyle = props => css`
 color: ${props => (props.disabled ? props.theme.colors.disabled : null)};

[WNemencha]

This issue still ranks high on search engines, so here’s a solution.

// @flow
import styled from '@emotion/styled';
import { css } from '@emotion/core';

- const color = css`
+ const color = props => css`
-  color: ${props => props.color};
+  color: ${props.color};
`;

const App = styled.div`
  ${color};
`;

export default App;