Added support for passing theme to functions in array css prop

.changeset/clever-emus-watch.md

@@ -0,0 +1,6 @@
+---
+'babel-plugin-emotion': minor
+'@emotion/babel-preset-css-prop': minor
+---
+
+Adjust how arrays passed to css prop are transformed so function elements can be resolved at runtime.

.changeset/dull-carrots-enjoy.md

@@ -3,4 +3,3 @@
 ---
 
 Relaxed types for `shouldForwardProp` as it needs to be able to filter props for a generic argument of the resulting function.
-

.changeset/lovely-owls-remember.md

@@ -0,0 +1,5 @@
+---
+'@emotion/core': minor
+---
+
+Support functions in arrays passed to css prop and Global's styles prop. This allows for composition of theme-accepting functions.

packages/babel-plugin-emotion/__tests__/__fixtures__/css-prop-complex-array.js

@@ -0,0 +1,9 @@
+/** @jsx jsx */
+import { jsx, Global } from '@emotion/core/macro'
+
+const css1 = theme => ({ backgroundColor: theme.bgColor })
+const css2 = theme => ({ padding: theme.spacing.small })
+
+function SomeComponent(props) {
+  return <div css={[css1, css2]}>{'Emotion'}</div>
+}

packages/babel-plugin-emotion/__tests__/__snapshots__/global.js.snap

@@ -11,16 +11,22 @@ export default () => (
 
       ↓ ↓ ↓ ↓ ↓ ↓
 
-import { css as _css } from \\"@emotion/core\\";
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
+
 import * as React from 'react';
 import { Global } from '@emotion/core';
-export default (() => <Global styles={
-/*#__PURE__*/
-_css([{
-  color: 'hotpink'
-}, {
-  backgroundColor: '#fff'
-}], process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImJhc2ljLWFycmF5LmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUlVIiwiZmlsZSI6ImJhc2ljLWFycmF5LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnXG5pbXBvcnQgeyBHbG9iYWwgfSBmcm9tICdAZW1vdGlvbi9jb3JlJ1xuXG5leHBvcnQgZGVmYXVsdCAoKSA9PiAoXG4gIDxHbG9iYWwgc3R5bGVzPXtbeyBjb2xvcjogJ2hvdHBpbmsnIH0sIHsgYmFja2dyb3VuZENvbG9yOiAnI2ZmZicgfV19IC8+XG4pXG4iXX0= */\\")} />);"
+
+var _ref = process.env.NODE_ENV === \\"production\\" ? {
+  name: \\"9n87fw\\",
+  styles: \\"color:hotpink;background-color:#fff;\\"
+} : {
+  name: \\"9n87fw\\",
+  styles: \\"color:hotpink;background-color:#fff;\\",
+  map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImJhc2ljLWFycmF5LmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUlVIiwiZmlsZSI6ImJhc2ljLWFycmF5LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnXG5pbXBvcnQgeyBHbG9iYWwgfSBmcm9tICdAZW1vdGlvbi9jb3JlJ1xuXG5leHBvcnQgZGVmYXVsdCAoKSA9PiAoXG4gIDxHbG9iYWwgc3R5bGVzPXtbeyBjb2xvcjogJ2hvdHBpbmsnIH0sIHsgYmFja2dyb3VuZENvbG9yOiAnI2ZmZicgfV19IC8+XG4pXG4iXX0= */\\",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+export default (() => <Global styles={_ref} />);"
 `;
 
 exports[`emotion-babel-plugin Global basic-obj 1`] = `
@@ -61,19 +67,14 @@ export default () => <Global styles={[{ color: 'hotpink' }, getBgColor()]} />
 
       ↓ ↓ ↓ ↓ ↓ ↓
 
-import { css as _css } from \\"@emotion/core\\";
 import * as React from 'react';
 import { Global } from '@emotion/core';
 
 const getBgColor = () => ({
   backgroundColor: '#fff'
 });
 
-export default (() => <Global styles={
-/*#__PURE__*/
-_css([{
-  color: 'hotpink'
-}, getBgColor()], process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbXBsZXgtYXJyYXkuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBSzZCIiwiZmlsZSI6ImNvbXBsZXgtYXJyYXkuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgKiBhcyBSZWFjdCBmcm9tICdyZWFjdCdcbmltcG9ydCB7IEdsb2JhbCB9IGZyb20gJ0BlbW90aW9uL2NvcmUnXG5cbmNvbnN0IGdldEJnQ29sb3IgPSAoKSA9PiAoeyBiYWNrZ3JvdW5kQ29sb3I6ICcjZmZmJyB9KVxuXG5leHBvcnQgZGVmYXVsdCAoKSA9PiA8R2xvYmFsIHN0eWxlcz17W3sgY29sb3I6ICdob3RwaW5rJyB9LCBnZXRCZ0NvbG9yKCldfSAvPlxuIl19 */\\")} />);"
+export default (() => <Global styles={[\\"color:hotpink;\\", getBgColor(), process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbXBsZXgtYXJyYXkuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBSzZCIiwiZmlsZSI6ImNvbXBsZXgtYXJyYXkuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgKiBhcyBSZWFjdCBmcm9tICdyZWFjdCdcbmltcG9ydCB7IEdsb2JhbCB9IGZyb20gJ0BlbW90aW9uL2NvcmUnXG5cbmNvbnN0IGdldEJnQ29sb3IgPSAoKSA9PiAoeyBiYWNrZ3JvdW5kQ29sb3I6ICcjZmZmJyB9KVxuXG5leHBvcnQgZGVmYXVsdCAoKSA9PiA8R2xvYmFsIHN0eWxlcz17W3sgY29sb3I6ICdob3RwaW5rJyB9LCBnZXRCZ0NvbG9yKCldfSAvPlxuIl19 */\\"]} />);"
 `;
 
 exports[`emotion-babel-plugin Global complex-obj 1`] = `

packages/babel-plugin-emotion/__tests__/__snapshots__/index.js.snap

@@ -58,6 +58,36 @@ const SomeComponent = props => <div css={
 css(\\"color:\\", window, \\";;label:SomeComponent;\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvcmUtd2l0aC1jc3MtaW1wb3J0LWR5bmFtaWMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBS1kiLCJmaWxlIjoiY29yZS13aXRoLWNzcy1pbXBvcnQtZHluYW1pYy5qcyIsInNvdXJjZXNDb250ZW50IjpbIi8qKiBAanN4IGpzeCAqL1xuaW1wb3J0IHsganN4LCBjc3MgfSBmcm9tICdAZW1vdGlvbi9jb3JlJ1xuXG5jb25zdCBTb21lQ29tcG9uZW50ID0gcHJvcHMgPT4gKFxuICA8ZGl2XG4gICAgY3NzPXtjc3NgXG4gICAgICBjb2xvcjogJHt3aW5kb3d9O1xuICAgIGB9XG4gICAgey4uLnByb3BzfVxuICAvPlxuKVxuIl19 */\\"))} {...props} />;"
 `;
 
+exports[`babel-plugin-emotion css-prop-complex-array 1`] = `
+"/** @jsx jsx */
+import { jsx, Global } from '@emotion/core/macro'
+
+const css1 = theme => ({ backgroundColor: theme.bgColor })
+const css2 = theme => ({ padding: theme.spacing.small })
+
+function SomeComponent(props) {
+  return <div css={[css1, css2]}>{'Emotion'}</div>
+}
+
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+/** @jsx jsx */
+import { jsx, Global } from \\"@emotion/core\\";
+
+const css1 = theme => ({
+  backgroundColor: theme.bgColor
+});
+
+const css2 = theme => ({
+  padding: theme.spacing.small
+});
+
+function SomeComponent(props) {
+  return <div css={[css1, css2, \\";label:SomeComponent;\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNzcy1wcm9wLWNvbXBsZXgtYXJyYXkuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBT2MiLCJmaWxlIjoiY3NzLXByb3AtY29tcGxleC1hcnJheS5qcyIsInNvdXJjZXNDb250ZW50IjpbIi8qKiBAanN4IGpzeCAqL1xuaW1wb3J0IHsganN4LCBHbG9iYWwgfSBmcm9tICdAZW1vdGlvbi9jb3JlL21hY3JvJ1xuXG5jb25zdCBjc3MxID0gdGhlbWUgPT4gKHsgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5iZ0NvbG9yIH0pXG5jb25zdCBjc3MyID0gdGhlbWUgPT4gKHsgcGFkZGluZzogdGhlbWUuc3BhY2luZy5zbWFsbCB9KVxuXG5mdW5jdGlvbiBTb21lQ29tcG9uZW50KHByb3BzKSB7XG4gIHJldHVybiA8ZGl2IGNzcz17W2NzczEsIGNzczJdfT57J0Vtb3Rpb24nfTwvZGl2PlxufVxuIl19 */\\")]}>{'Emotion'}</div>;
+}"
+`;
+
 exports[`babel-plugin-emotion does-not-change-other-props 1`] = `
 "/** @jsx jsx */
 import { jsx } from '@emotion/core'

packages/babel-plugin-emotion/__tests__/global-macro/__snapshots__/index.js.snap

@@ -11,16 +11,22 @@ export default () => (
 
       ↓ ↓ ↓ ↓ ↓ ↓
 
-import { css as _css } from \\"@emotion/core\\";
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
+
 import * as React from 'react';
 import { Global } from \\"@emotion/core\\";
-export default (() => <Global styles={
-/*#__PURE__*/
-_css([{
-  color: 'hotpink'
-}, {
-  backgroundColor: '#fff'
-}], process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImJhc2ljLWFycmF5LmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUlVIiwiZmlsZSI6ImJhc2ljLWFycmF5LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnXG5pbXBvcnQgeyBHbG9iYWwgfSBmcm9tICdAZW1vdGlvbi9jb3JlL21hY3JvJ1xuXG5leHBvcnQgZGVmYXVsdCAoKSA9PiAoXG4gIDxHbG9iYWwgc3R5bGVzPXtbeyBjb2xvcjogJ2hvdHBpbmsnIH0sIHsgYmFja2dyb3VuZENvbG9yOiAnI2ZmZicgfV19IC8+XG4pXG4iXX0= */\\")} />);"
+
+var _ref = process.env.NODE_ENV === \\"production\\" ? {
+  name: \\"9n87fw\\",
+  styles: \\"color:hotpink;background-color:#fff;\\"
+} : {
+  name: \\"9n87fw\\",
+  styles: \\"color:hotpink;background-color:#fff;\\",
+  map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImJhc2ljLWFycmF5LmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUlVIiwiZmlsZSI6ImJhc2ljLWFycmF5LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnXG5pbXBvcnQgeyBHbG9iYWwgfSBmcm9tICdAZW1vdGlvbi9jb3JlL21hY3JvJ1xuXG5leHBvcnQgZGVmYXVsdCAoKSA9PiAoXG4gIDxHbG9iYWwgc3R5bGVzPXtbeyBjb2xvcjogJ2hvdHBpbmsnIH0sIHsgYmFja2dyb3VuZENvbG9yOiAnI2ZmZicgfV19IC8+XG4pXG4iXX0= */\\",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+export default (() => <Global styles={_ref} />);"
 `;
 
 exports[`@emotion/core - Global macro basic-obj 1`] = `
@@ -61,19 +67,14 @@ export default () => <Global styles={[{ color: 'hotpink' }, getBgColor()]} />
 
       ↓ ↓ ↓ ↓ ↓ ↓
 
-import { css as _css } from \\"@emotion/core\\";
 import * as React from 'react';
 import { Global } from \\"@emotion/core\\";
 
 const getBgColor = () => ({
   backgroundColor: '#fff'
 });
 
-export default (() => <Global styles={
-/*#__PURE__*/
-_css([{
-  color: 'hotpink'
-}, getBgColor()], process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbXBsZXgtYXJyYXkuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBSzZCIiwiZmlsZSI6ImNvbXBsZXgtYXJyYXkuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgKiBhcyBSZWFjdCBmcm9tICdyZWFjdCdcbmltcG9ydCB7IEdsb2JhbCB9IGZyb20gJ0BlbW90aW9uL2NvcmUvbWFjcm8nXG5cbmNvbnN0IGdldEJnQ29sb3IgPSAoKSA9PiAoeyBiYWNrZ3JvdW5kQ29sb3I6ICcjZmZmJyB9KVxuXG5leHBvcnQgZGVmYXVsdCAoKSA9PiA8R2xvYmFsIHN0eWxlcz17W3sgY29sb3I6ICdob3RwaW5rJyB9LCBnZXRCZ0NvbG9yKCldfSAvPlxuIl19 */\\")} />);"
+export default (() => <Global styles={[\\"color:hotpink;\\", getBgColor(), process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbXBsZXgtYXJyYXkuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBSzZCIiwiZmlsZSI6ImNvbXBsZXgtYXJyYXkuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgKiBhcyBSZWFjdCBmcm9tICdyZWFjdCdcbmltcG9ydCB7IEdsb2JhbCB9IGZyb20gJ0BlbW90aW9uL2NvcmUvbWFjcm8nXG5cbmNvbnN0IGdldEJnQ29sb3IgPSAoKSA9PiAoeyBiYWNrZ3JvdW5kQ29sb3I6ICcjZmZmJyB9KVxuXG5leHBvcnQgZGVmYXVsdCAoKSA9PiA8R2xvYmFsIHN0eWxlcz17W3sgY29sb3I6ICdob3RwaW5rJyB9LCBnZXRCZ0NvbG9yKCldfSAvPlxuIl19 */\\"]} />);"
 `;
 
 exports[`@emotion/core - Global macro complex-obj 1`] = `

packages/babel-plugin-emotion/src/core-macro.js

@@ -10,12 +10,14 @@ export const transformCssCallExpression = ({
   state,
   babel,
   path,
-  sourceMap
+  sourceMap,
+  annotateAsPure = true
 }: {
   state: *,
   babel: *,
   path: *,
-  sourceMap?: string
+  sourceMap?: string,
+  annotateAsPure?: boolean
 }) => {
   let { node, isPure } = transformExpressionWithStyles({
     babel,
@@ -29,12 +31,50 @@ export const transformCssCallExpression = ({
     if (isPure) {
       path.hoist()
     }
-  } else {
+  } else if (annotateAsPure) {
     path.addComment('leading', '#__PURE__')
   }
 }
 
-export const transformInlineCsslessExpression = ({
+export const transformCsslessArrayExpression = ({
+  state,
+  babel,
+  path
+}: {
+  babel: *,
+  state: *,
+  path: *
+}) => {
+  let t = babel.types
+  let expressionPath = path.get('value.expression')
+  let sourceMap =
+    state.emotionSourceMap && path.node.loc !== undefined
+      ? getSourceMap(path.node.loc.start, state)
+      : ''
+
+  expressionPath.replaceWith(
+    t.callExpression(
+      // the name of this identifier doesn't really matter at all
+      // it'll never appear in generated code
+      t.identifier('___shouldNeverAppearCSS'),
+      path.node.value.expression.elements
+    )
+  )
+
+  transformCssCallExpression({
+    babel,
+    state,
+    path: expressionPath,
+    sourceMap,
+    annotateAsPure: false
+  })
+
+  if (t.isCallExpression(expressionPath)) {
+    expressionPath.replaceWith(t.arrayExpression(expressionPath.node.arguments))
+  }
+}
+
+export const transformCsslessObjectExpression = ({
   state,
   babel,
   path,
@@ -119,26 +159,30 @@ let globalTransformer = ({
     return
   }
 
-  if (
-    t.isJSXExpressionContainer(stylesPropPath.node.value) &&
-    (t.isObjectExpression(stylesPropPath.node.value.expression) ||
-      t.isArrayExpression(stylesPropPath.node.value.expression))
-  ) {
-    transformInlineCsslessExpression({
-      state,
-      babel,
-      path: stylesPropPath,
-      cssImport:
-        options.cssExport !== undefined
-          ? {
-              importSource,
-              cssExport: options.cssExport
-            }
-          : {
-              importSource: '@emotion/core',
-              cssExport: 'css'
-            }
-    })
+  if (t.isJSXExpressionContainer(stylesPropPath.node.value)) {
+    if (t.isArrayExpression(stylesPropPath.node.value.expression)) {
+      transformCsslessArrayExpression({
+        state,
+        babel,
+        path: stylesPropPath
+      })
+    } else if (t.isObjectExpression(stylesPropPath.node.value.expression)) {
+      transformCsslessObjectExpression({
+        state,
+        babel,
+        path: stylesPropPath,
+        cssImport:
+          options.cssExport !== undefined
+            ? {
+                importSource,
+                cssExport: options.cssExport
+              }
+            : {
+                importSource: '@emotion/core',
+                cssExport: 'css'
+              }
+      })
+    }
   }
 }
 

packages/babel-plugin-emotion/src/index.js

@@ -7,7 +7,8 @@ import {
 import { createStyledMacro, styledTransformer } from './styled-macro'
 import coreMacro, {
   transformers as coreTransformers,
-  transformInlineCsslessExpression
+  transformCsslessArrayExpression,
+  transformCsslessObjectExpression
 } from './core-macro'
 import { getStyledOptions, createTransformerMacro } from './utils'
 
@@ -236,17 +237,21 @@ export default function(babel: *) {
           return
         }
 
-        if (
-          t.isJSXExpressionContainer(path.node.value) &&
-          (t.isObjectExpression(path.node.value.expression) ||
-            t.isArrayExpression(path.node.value.expression))
-        ) {
-          transformInlineCsslessExpression({
-            state,
-            babel,
-            path,
-            cssImport: state.jsxCoreImport
-          })
+        if (t.isJSXExpressionContainer(path.node.value)) {
+          if (t.isArrayExpression(path.node.value.expression)) {
+            transformCsslessArrayExpression({
+              state,
+              babel,
+              path
+            })
+          } else if (t.isObjectExpression(path.node.value.expression)) {
+            transformCsslessObjectExpression({
+              state,
+              babel,
+              path,
+              cssImport: state.jsxCoreImport
+            })
+          }
         }
       },
       CallExpression: {

packages/babel-preset-css-prop/__tests__/__snapshots__/index.js.snap

@@ -8,19 +8,25 @@ const Component = props => <div css={[{ color: 'green' }]} {...props} />
 
       ↓ ↓ ↓ ↓ ↓ ↓
 
-import { css as _css } from \\"@emotion/core\\";
-
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
+
 import * as React from 'react';
 import { jsx as ___EmotionJSX } from \\"@emotion/core\\";
 
+var _ref = process.env.NODE_ENV === \\"production\\" ? {
+  name: \\"1gvobwd-Component\\",
+  styles: \\"color:green;;label:Component;\\"
+} : {
+  name: \\"1gvobwd-Component\\",
+  styles: \\"color:green;;label:Component;\\",
+  map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFycmF5LWNzcy1wcm9wLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVnQyIsImZpbGUiOiJhcnJheS1jc3MtcHJvcC5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0J1xuXG5jb25zdCBDb21wb25lbnQgPSBwcm9wcyA9PiA8ZGl2IGNzcz17W3sgY29sb3I6ICdncmVlbicgfV19IHsuLi5wcm9wc30gLz5cbiJdfQ== */\\",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
 const Component = props => ___EmotionJSX(\\"div\\", _extends({
-  css:
-  /*#__PURE__*/
-  _css([{
-    color: 'green'
-  }], \\";label:Component;\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFycmF5LWNzcy1wcm9wLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVnQyIsImZpbGUiOiJhcnJheS1jc3MtcHJvcC5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0J1xuXG5jb25zdCBDb21wb25lbnQgPSBwcm9wcyA9PiA8ZGl2IGNzcz17W3sgY29sb3I6ICdncmVlbicgfV19IHsuLi5wcm9wc30gLz5cbiJdfQ== */\\"))
+  css: _ref
 }, props));"
 `;
 

packages/babel-preset-css-prop/__tests__/__snapshots__/options-are-used.js.snap

@@ -8,19 +8,17 @@ const Component = props => <div css={[{ color: 'green' }]} {...props} />
 
       ↓ ↓ ↓ ↓ ↓ ↓
 
-import { css as _css } from \\"@emotion/core\\";
-
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import * as React from 'react';
 import { jsx as ___EmotionJSX } from \\"@emotion/core\\";
+var _ref = {
+  name: \\"1vf7vy9-__fixtures__--array-css-prop--Component\\",
+  styles: \\"color:green;;label:__fixtures__--array-css-prop--Component;\\"
+};
 
 const Component = props => ___EmotionJSX(\\"div\\", _extends({
-  css:
-  /*#__PURE__*/
-  _css([{
-    color: 'green'
-  }], \\";label:__fixtures__--array-css-prop--Component;\\")
+  css: _ref
 }, props));"
 `;