Skip to content

Commit 828111c

Browse files
AndaristAndarist
authored
Handle Global with Babel (#1639)
* Handle `Global` with Babel * Fix support for Global transformer with importMap * Split changesets
1 parent 843bfb1 commit 828111c

File tree

25 files changed

+782
-75
lines changed

25 files changed

+782
-75
lines changed

‎.changeset/moody-stingrays-sort.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@emotion/core': minor
3+
---
4+
5+
`Global` imported from macro entry (`@emotion/core/macro`) gets source maps generated now when inline css-less expression is used as value of the `styles` prop.

‎.changeset/two-kiwis-give.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'babel-plugin-emotion': minor
3+
---
4+
5+
`Global` gets handled by the Babel plugin now - this gives inline css-less expressions source maps.

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`Global inline source maps can be disabled 1`] = `
4+
"
5+
import * as React from 'react'
6+
import { Global } from '@emotion/core'
7+
8+
export default () => <Global styles={{ color: 'hotpink' }} />
9+
10+
11+
↓ ↓ ↓ ↓ ↓ ↓
12+
13+
import * as React from 'react';
14+
import { Global } from '@emotion/core';
15+
var _ref = {
16+
name: \\"1lrxbo5\\",
17+
styles: \\"color:hotpink;\\"
18+
};
19+
export default (() => <Global styles={_ref} />);"
20+
`;

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

Lines changed: 206 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,206 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`emotion-babel-plugin Global basic-array 1`] = `
4+
"import * as React from 'react'
5+
import { Global } from '@emotion/core'
6+
7+
export default () => (
8+
<Global styles={[{ color: 'hotpink' }, { backgroundColor: '#fff' }]} />
9+
)
10+
11+
12+
↓ ↓ ↓ ↓ ↓ ↓
13+
14+
import { css as _css } from \\"@emotion/core\\";
15+
import * as React from 'react';
16+
import { Global } from '@emotion/core';
17+
export default (() => <Global styles={
18+
/*#__PURE__*/
19+
_css([{
20+
color: 'hotpink'
21+
}, {
22+
backgroundColor: '#fff'
23+
}], process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImJhc2ljLWFycmF5LmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUlVIiwiZmlsZSI6ImJhc2ljLWFycmF5LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnXG5pbXBvcnQgeyBHbG9iYWwgfSBmcm9tICdAZW1vdGlvbi9jb3JlJ1xuXG5leHBvcnQgZGVmYXVsdCAoKSA9PiAoXG4gIDxHbG9iYWwgc3R5bGVzPXtbeyBjb2xvcjogJ2hvdHBpbmsnIH0sIHsgYmFja2dyb3VuZENvbG9yOiAnI2ZmZicgfV19IC8+XG4pXG4iXX0= */\\")} />);"
24+
`;
25+
26+
exports[`emotion-babel-plugin Global basic-obj 1`] = `
27+
"import * as React from 'react'
28+
import { Global } from '@emotion/core'
29+
30+
export default () => <Global styles={{ color: 'hotpink' }} />
31+
32+
33+
↓ ↓ ↓ ↓ ↓ ↓
34+
35+
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).\\"; }
36+
37+
import * as React from 'react';
38+
import { Global } from '@emotion/core';
39+
40+
var _ref = process.env.NODE_ENV === \\"production\\" ? {
41+
name: \\"1lrxbo5\\",
42+
styles: \\"color:hotpink;\\"
43+
} : {
44+
name: \\"1lrxbo5\\",
45+
styles: \\"color:hotpink;\\",
46+
map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImJhc2ljLW9iai5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHNkIiLCJmaWxlIjoiYmFzaWMtb2JqLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnXG5pbXBvcnQgeyBHbG9iYWwgfSBmcm9tICdAZW1vdGlvbi9jb3JlJ1xuXG5leHBvcnQgZGVmYXVsdCAoKSA9PiA8R2xvYmFsIHN0eWxlcz17eyBjb2xvcjogJ2hvdHBpbmsnIH19IC8+XG4iXX0= */\\",
47+
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
48+
};
49+
50+
export default (() => <Global styles={_ref} />);"
51+
`;
52+
53+
exports[`emotion-babel-plugin Global complex-array 1`] = `
54+
"import * as React from 'react'
55+
import { Global } from '@emotion/core'
56+
57+
const getBgColor = () => ({ backgroundColor: '#fff' })
58+
59+
export default () => <Global styles={[{ color: 'hotpink' }, getBgColor()]} />
60+
61+
62+
↓ ↓ ↓ ↓ ↓ ↓
63+
64+
import { css as _css } from \\"@emotion/core\\";
65+
import * as React from 'react';
66+
import { Global } from '@emotion/core';
67+
68+
const getBgColor = () => ({
69+
backgroundColor: '#fff'
70+
});
71+
72+
export default (() => <Global styles={
73+
/*#__PURE__*/
74+
_css([{
75+
color: 'hotpink'
76+
}, getBgColor()], process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbXBsZXgtYXJyYXkuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBSzZCIiwiZmlsZSI6ImNvbXBsZXgtYXJyYXkuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgKiBhcyBSZWFjdCBmcm9tICdyZWFjdCdcbmltcG9ydCB7IEdsb2JhbCB9IGZyb20gJ0BlbW90aW9uL2NvcmUnXG5cbmNvbnN0IGdldEJnQ29sb3IgPSAoKSA9PiAoeyBiYWNrZ3JvdW5kQ29sb3I6ICcjZmZmJyB9KVxuXG5leHBvcnQgZGVmYXVsdCAoKSA9PiA8R2xvYmFsIHN0eWxlcz17W3sgY29sb3I6ICdob3RwaW5rJyB9LCBnZXRCZ0NvbG9yKCldfSAvPlxuIl19 */\\")} />);"
77+
`;
78+
79+
exports[`emotion-babel-plugin Global complex-obj 1`] = `
80+
"import * as React from 'react'
81+
import { Global } from '@emotion/core'
82+
83+
const getBgColor = () => ({ backgroundColor: '#fff' })
84+
85+
export default () => <Global styles={{ color: 'hotpink', ...getBgColor() }} />
86+
87+
88+
↓ ↓ ↓ ↓ ↓ ↓
89+
90+
import { css as _css } from \\"@emotion/core\\";
91+
import * as React from 'react';
92+
import { Global } from '@emotion/core';
93+
94+
const getBgColor = () => ({
95+
backgroundColor: '#fff'
96+
});
97+
98+
export default (() => <Global styles={
99+
/*#__PURE__*/
100+
_css({
101+
color: 'hotpink',
102+
...getBgColor()
103+
}, process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbXBsZXgtb2JqLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUs2QiIsImZpbGUiOiJjb21wbGV4LW9iai5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0J1xuaW1wb3J0IHsgR2xvYmFsIH0gZnJvbSAnQGVtb3Rpb24vY29yZSdcblxuY29uc3QgZ2V0QmdDb2xvciA9ICgpID0+ICh7IGJhY2tncm91bmRDb2xvcjogJyNmZmYnIH0pXG5cbmV4cG9ydCBkZWZhdWx0ICgpID0+IDxHbG9iYWwgc3R5bGVzPXt7IGNvbG9yOiAnaG90cGluaycsIC4uLmdldEJnQ29sb3IoKSB9fSAvPlxuIl19 */\\")} />);"
104+
`;
105+
106+
exports[`emotion-babel-plugin Global css-used-as-value 1`] = `
107+
"import * as React from 'react'
108+
import { Global, css } from '@emotion/core'
109+
110+
// this gets ignored by Global macro, but it tests that this combination doesn't crash or something
111+
export default () => <Global styles={css({ color: 'hotpink' })} />
112+
113+
114+
↓ ↓ ↓ ↓ ↓ ↓
115+
116+
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).\\"; }
117+
118+
import * as React from 'react';
119+
import { Global, css } from '@emotion/core'; // this gets ignored by Global macro, but it tests that this combination doesn't crash or something
120+
121+
var _ref = process.env.NODE_ENV === \\"production\\" ? {
122+
name: \\"1lrxbo5\\",
123+
styles: \\"color:hotpink;\\"
124+
} : {
125+
name: \\"1lrxbo5\\",
126+
styles: \\"color:hotpink;\\",
127+
map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNzcy11c2VkLWFzLXZhbHVlLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUlxQyIsImZpbGUiOiJjc3MtdXNlZC1hcy12YWx1ZS5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0J1xuaW1wb3J0IHsgR2xvYmFsLCBjc3MgfSBmcm9tICdAZW1vdGlvbi9jb3JlJ1xuXG4vLyB0aGlzIGdldHMgaWdub3JlZCBieSBHbG9iYWwgbWFjcm8sIGJ1dCBpdCB0ZXN0cyB0aGF0IHRoaXMgY29tYmluYXRpb24gZG9lc24ndCBjcmFzaCBvciBzb21ldGhpbmdcbmV4cG9ydCBkZWZhdWx0ICgpID0+IDxHbG9iYWwgc3R5bGVzPXtjc3MoeyBjb2xvcjogJ2hvdHBpbmsnIH0pfSAvPlxuIl19 */\\",
128+
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
129+
};
130+
131+
export default (() => <Global styles={_ref} />);"
132+
`;
133+
134+
exports[`emotion-babel-plugin Global no-jsx 1`] = `
135+
"import * as React from 'react'
136+
import { Global } from '@emotion/core'
137+
138+
const foo = Global
139+
140+
141+
↓ ↓ ↓ ↓ ↓ ↓
142+
143+
import * as React from 'react';
144+
import { Global } from '@emotion/core';
145+
const foo = Global;"
146+
`;
147+
148+
exports[`emotion-babel-plugin Global no-styles-prop 1`] = `
149+
"import * as React from 'react'
150+
import { Global } from '@emotion/core'
151+
152+
export default () => <Global />
153+
154+
155+
↓ ↓ ↓ ↓ ↓ ↓
156+
157+
import * as React from 'react';
158+
import { Global } from '@emotion/core';
159+
export default (() => <Global />);"
160+
`;
161+
162+
exports[`emotion-babel-plugin Global spread-styles 1`] = `
163+
"/* eslint-disable */
164+
import * as React from 'react'
165+
import { Global } from '@emotion/core'
166+
167+
export default () => <Global {...styles} />
168+
169+
170+
↓ ↓ ↓ ↓ ↓ ↓
171+
172+
/* eslint-disable */
173+
import * as React from 'react';
174+
import { Global } from '@emotion/core';
175+
export default (() => <Global {...styles} />);"
176+
`;
177+
178+
exports[`emotion-babel-plugin Global with-closing-element 1`] = `
179+
"/* eslint-disable */
180+
import * as React from 'react'
181+
import { Global } from '@emotion/core'
182+
183+
// prettier-ignore
184+
export default () => <Global styles={{ color: 'hotpink' }}></Global>
185+
186+
187+
↓ ↓ ↓ ↓ ↓ ↓
188+
189+
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).\\"; }
190+
191+
/* eslint-disable */
192+
import * as React from 'react';
193+
import { Global } from '@emotion/core'; // prettier-ignore
194+
195+
var _ref = process.env.NODE_ENV === \\"production\\" ? {
196+
name: \\"1lrxbo5\\",
197+
styles: \\"color:hotpink;\\"
198+
} : {
199+
name: \\"1lrxbo5\\",
200+
styles: \\"color:hotpink;\\",
201+
map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndpdGgtY2xvc2luZy1lbGVtZW50LmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUs2QiIsImZpbGUiOiJ3aXRoLWNsb3NpbmctZWxlbWVudC5qcyIsInNvdXJjZXNDb250ZW50IjpbIi8qIGVzbGludC1kaXNhYmxlICovXG5pbXBvcnQgKiBhcyBSZWFjdCBmcm9tICdyZWFjdCdcbmltcG9ydCB7IEdsb2JhbCB9IGZyb20gJ0BlbW90aW9uL2NvcmUnXG5cbi8vIHByZXR0aWVyLWlnbm9yZVxuZXhwb3J0IGRlZmF1bHQgKCkgPT4gPEdsb2JhbCBzdHlsZXM9e3sgY29sb3I6ICdob3RwaW5rJyB9fT48L0dsb2JhbD5cbiJdfQ== */\\",
202+
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
203+
};
204+
205+
export default (() => <Global styles={_ref}></Global>);"
206+
`;

‎packages/babel-plugin-emotion/__tests__/global-macro/__fixtures__/basic-array.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import * as React from 'react'
2+
import { Global } from '@emotion/core/macro'
3+
4+
export default () => (
5+
<Global styles={[{ color: 'hotpink' }, { backgroundColor: '#fff' }]} />
6+
)

‎packages/babel-plugin-emotion/__tests__/global-macro/__fixtures__/basic-obj.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import * as React from 'react'
2+
import { Global } from '@emotion/core/macro'
3+
4+
export default () => <Global styles={{ color: 'hotpink' }} />

‎packages/babel-plugin-emotion/__tests__/global-macro/__fixtures__/complex-array.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import * as React from 'react'
2+
import { Global } from '@emotion/core/macro'
3+
4+
const getBgColor = () => ({ backgroundColor: '#fff' })
5+
6+
export default () => <Global styles={[{ color: 'hotpink' }, getBgColor()]} />

‎packages/babel-plugin-emotion/__tests__/global-macro/__fixtures__/complex-obj.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import * as React from 'react'
2+
import { Global } from '@emotion/core/macro'
3+
4+
const getBgColor = () => ({ backgroundColor: '#fff' })
5+
6+
export default () => <Global styles={{ color: 'hotpink', ...getBgColor() }} />

‎packages/babel-plugin-emotion/__tests__/global-macro/__fixtures__/css-used-as-value.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import * as React from 'react'
2+
import { Global, css } from '@emotion/core/macro'
3+
4+
// this gets ignored by Global macro, but it tests that this combination doesn't crash or something
5+
export default () => <Global styles={css({ color: 'hotpink' })} />

‎packages/babel-plugin-emotion/__tests__/global-macro/__fixtures__/no-jsx.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import * as React from 'react'
2+
import { Global } from '@emotion/core/macro'
3+
4+
const foo = Global

0 commit comments

Comments
 (0)