Skip to content

Commit

Permalink
Added support for passing theme to functions in array css prop (#1130)
Browse files Browse the repository at this point in the history 
* Added support passing theme to functions in array css prop

* Add changeset

* Adjust how arrays passed to css prop are transformed so function elements can be resolved at runtime

* Match Global's styles prop to css prop behavior

* Update snapshots
  • Loading branch information
@jtmthf @emmatown
jtmthf authored and emmatown committed Dec 2, 2019
1 parent c5e91b0 commit c672175
Show file tree
Hide file tree
Showing 17 changed files with 273 additions and 89 deletions.
6 changes: 6 additions & 0 deletions .changeset/clever-emus-watch.md
View file
@@ -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.
1 change: 0 additions & 1 deletion .changeset/dull-carrots-enjoy.md
View file
Expand Up @@ -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.

5 changes: 5 additions & 0 deletions .changeset/lovely-owls-remember.md
View file
@@ -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.
9 changes: 9 additions & 0 deletions packages/babel-plugin-emotion/__tests__/__fixtures__/css-prop-complex-array.js
View file
@@ -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>
}
29 changes: 15 additions & 14 deletions packages/babel-plugin-emotion/__tests__/__snapshots__/global.js.snap
View file
Expand Up @@ -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`] = `
Expand Down Expand Up @@ -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`] = `
Expand Down
30 changes: 30 additions & 0 deletions packages/babel-plugin-emotion/__tests__/__snapshots__/index.js.snap
View file
Expand Up @@ -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'
Expand Down
29 changes: 15 additions & 14 deletions packages/babel-plugin-emotion/__tests__/global-macro/__snapshots__/index.js.snap
View file
Expand Up @@ -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`] = `
Expand Down Expand Up @@ -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`] = `
Expand Down
92 changes: 68 additions & 24 deletions packages/babel-plugin-emotion/src/core-macro.js
View file
Expand Up @@ -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,
Expand All @@ -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,
Expand Down Expand Up @@ -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'
}
})
}
}
}

Expand Down
29 changes: 17 additions & 12 deletions packages/babel-plugin-emotion/src/index.js
View file
Expand Up @@ -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'

Expand Down Expand Up @@ -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: {
Expand Down
20 changes: 13 additions & 7 deletions packages/babel-preset-css-prop/__tests__/__snapshots__/index.js.snap
View file
Expand Up @@ -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));"
`;

Expand Down
12 changes: 5 additions & 7 deletions packages/babel-preset-css-prop/__tests__/__snapshots__/options-are-used.js.snap
View file
Expand Up @@ -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));"
`;

Expand Down

0 comments on commit c672175

Please sign in to comment.