Added support for passing theme to functions in array css prop

[jtmthf]

What: When passing an array to the css-prop, functions accepting the theme from emotion-theming are now acceptable as array items.

Why: This addresses #997. I find that there are many use cases where this is helpful. One example would be when composing a number of style utility functions that may or may not read from the theme. For my use case in particular, I'm working on a reimplementation of Tailwind CSS using emotion. This is what one example of usage looks like right now.

<div
  css={theme => [
    display('flex')
    bg('white')(theme),
    mx("auto")(theme),
    maxW('sm')(theme),
    shadow('lg')(theme),
    rounded('lg')(theme),
    { overflow: "hidden" }
  ]}
/>

With this change, the example can be rewritten as:

<div
  css={[
    display('flex')
    bg('white'),
    mx("auto"),
    maxW('sm'),
    shadow('lg')
    rounded('lg'),
    { overflow: "hidden" }
  ]}
/>

In addition to being shorter, the advantage here is that the developer doesn't need to know if a value in the css-prop is a function that needs to be passed the theme.

How: The change was implemented by now wrapping all uses of the array css prop in ThemeContext.Consumer. It could potentially be more optimized to check if the array contains a function first before wrapping in the consumer. In the render method, if the css prop is an array, it is now mapped and for each item that is an array it is passed the theme.

Checklist:

• Documentation
• Tests
• Code complete
• TypeScript typings

[codecov]

Codecov Report

Merging #1130 into master will increase coverage by <.01%.
The diff coverage is 100%.

Impacted Files	Coverage Δ
packages/core/src/jsx.js	100% <100%> (ø)	⬆️

[codecov]

Codecov Report

Merging #1130 into next will increase coverage by 0.01%.
The diff coverage is 100%.

Impacted Files	Coverage Δ
packages/babel-plugin-emotion/src/index.js	94.04% <100%> (+0.22%)	⬆️
packages/babel-plugin-emotion/src/core-macro.js	100% <100%> (ø)	⬆️
packages/core/src/jsx.js	100% <100%> (ø)	⬆️
packages/core/src/global.js	97.56% <100%> (ø)	⬆️

[luishdz1010]

This would be truly helpful, right now object styles break encapsulation since you need to know whether they are functions or objects

[simonflk]

Thanks for this 👍 What can we do to get this merged?

I was about to submit a very similar change when I noticed your PR. Only difference with mine is that it doesn't pull in the theme if none of the styles are functions. e.g:

<div css={[{ color: 'white' }, css`background-color: hotpink;`]}>foo</div>

[jtmthf]

@simonflk I actually have the feature you described implemented locally, but not yet committed to this branch. I still need to add documentation and TypeScript typings, but am holding off until I get confirmation that this is something the project owner's want.

[chibicode]

👍 This is exactly what I need! Would love to see this merged.

Until this is merged, here's what I'm doing to implement something like this:
#1130 (comment)

Essentially I'm creating another context just underneath ThemeProvider which generates helper functions using theme and makes them accessible to child components via a context.

// Top level - generateThemeHelpers(theme) creates an object containing
// helper functions like display, bg, etc which depend on theme
<ThemeProvider theme={theme}>
  <ThemeHelperContext.Provider value={generateThemeHelpers(theme)}>
    {/* ... */}
  </ThemeHelperContext.Provider>
</ThemeProvider>

const generateThemeHelpers = theme => ({
  display: (/* ... */) => { return css`/* ... */` }
  // etc...
})

// Each component
// Instead of importing these helper functions, get them from context
const { display, bg, mx, maxW, shadow, rounded } = useContext(ThemeHelperContext)

<div
  css={[
    display('flex')
    bg('white'),
    mx("auto"),
    maxW('sm'),
    shadow('lg')
    rounded('lg'),
    { overflow: "hidden" }
  ]}
/>

[a-type]

I'd love to see this as well. It's critical to a project I'm working on where I want to be able to compose in user-provided styles and allow the ability to utilize the theme.

[jckw]

Would be amazing to get this merged! Any timeline?

[pettersamuelsen]

What's the status on this?

[Andarist]

We'll consider supporting this in v11 - I'm currently fixing the stuff that can be fixed as part of v10 and once I'm done I will start working on v11 (which won't have major breaking changes). There is not that much left to do, I have a somewhat good pace - but doing it all in my free time so it still might take a few weeks.

[changeset-bot]

🦋 Changeset is good to go

Latest commit: 94c8599

We got this.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 94c8599:

Sandbox	Source
Emotion	Configuration

[Andarist]

I got this working, made additional changes to babel plugin and Global's styles prop (so its behavior match css prop). I think it's done and would consider it a good change overall - still need @mitchellhamilton approval though.