Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion jest.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,5 +17,9 @@ module.exports = {
coveragePathIgnorePatterns: [
'/node_modules/',
'<rootDir>/packages/babel-plugin/test/util.js'
]
],
snapshotFormat: {
escapeString: false,
printBasicPrototype: false
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ import 'react-app-polyfill/stable';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { jsx as ___EmotionJSX } from \\"@emotion/react\\";
import { jsx as ___EmotionJSX } from "@emotion/react";
ReactDOM.render(<App />, document.getElementById('root'));"
`;

Expand All @@ -33,7 +33,7 @@ const F = () => <></>
↓ ↓ ↓ ↓ ↓ ↓

import * as React from 'react';
import { jsx as ___EmotionJSX } from \\"@emotion/react\\";
import { jsx as ___EmotionJSX } from "@emotion/react";

const F = () => <></>;"
`;
Expand All @@ -47,7 +47,7 @@ const P = () => <p />
↓ ↓ ↓ ↓ ↓ ↓

import * as React from 'react';
import { jsx as ___EmotionJSX } from \\"@emotion/react\\";
import { jsx as ___EmotionJSX } from "@emotion/react";

const P = () => <p />;"
`;

Large diffs are not rendered by default.

410 changes: 205 additions & 205 deletions packages/babel-plugin/__tests__/__snapshots__/css.js.snap

Large diffs are not rendered by default.

Original file line number Diff line number Diff line change
Expand Up @@ -10,17 +10,17 @@ export default () => <Global styles={{ color: 'hotpink' }} />

↓ ↓ ↓ ↓ ↓ ↓

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).\\"; }
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/react';

var _ref = process.env.NODE_ENV === \\"production\\" ? {
name: \\"3sn2xs\\",
styles: \\"color:hotpink\\"
var _ref = process.env.NODE_ENV === "production" ? {
name: "3sn2xs",
styles: "color:hotpink"
} : {
name: \\"3sn2xs\\",
styles: \\"color:hotpink\\",
name: "3sn2xs",
styles: "color:hotpink",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};

Expand Down
62 changes: 31 additions & 31 deletions packages/babel-plugin/__tests__/__snapshots__/global.js.snap
Original file line number Diff line number Diff line change
Expand Up @@ -11,18 +11,18 @@ export default () => (

↓ ↓ ↓ ↓ ↓ ↓

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).\\"; }
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/react';

var _ref = process.env.NODE_ENV === \\"production\\" ? {
name: \\"9aoaei\\",
styles: \\"color:hotpink;background-color:#fff\\"
var _ref = process.env.NODE_ENV === "production" ? {
name: "9aoaei",
styles: "color:hotpink;background-color:#fff"
} : {
name: \\"9aoaei\\",
styles: \\"color:hotpink;background-color:#fff\\",
map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImJhc2ljLWFycmF5LmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUlVIiwiZmlsZSI6ImJhc2ljLWFycmF5LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnXG5pbXBvcnQgeyBHbG9iYWwgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcblxuZXhwb3J0IGRlZmF1bHQgKCkgPT4gKFxuICA8R2xvYmFsIHN0eWxlcz17W3sgY29sb3I6ICdob3RwaW5rJyB9LCB7IGJhY2tncm91bmRDb2xvcjogJyNmZmYnIH1dfSAvPlxuKVxuIl19 */\\",
name: "9aoaei",
styles: "color:hotpink;background-color:#fff",
map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImJhc2ljLWFycmF5LmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUlVIiwiZmlsZSI6ImJhc2ljLWFycmF5LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnXG5pbXBvcnQgeyBHbG9iYWwgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcblxuZXhwb3J0IGRlZmF1bHQgKCkgPT4gKFxuICA8R2xvYmFsIHN0eWxlcz17W3sgY29sb3I6ICdob3RwaW5rJyB9LCB7IGJhY2tncm91bmRDb2xvcjogJyNmZmYnIH1dfSAvPlxuKVxuIl19 */",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};

Expand All @@ -38,18 +38,18 @@ export default () => <Global styles={{ color: 'hotpink' }} />

↓ ↓ ↓ ↓ ↓ ↓

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).\\"; }
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/react';

var _ref = process.env.NODE_ENV === \\"production\\" ? {
name: \\"3sn2xs\\",
styles: \\"color:hotpink\\"
var _ref = process.env.NODE_ENV === "production" ? {
name: "3sn2xs",
styles: "color:hotpink"
} : {
name: \\"3sn2xs\\",
styles: \\"color:hotpink\\",
map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImJhc2ljLW9iai5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHNkIiLCJmaWxlIjoiYmFzaWMtb2JqLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnXG5pbXBvcnQgeyBHbG9iYWwgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcblxuZXhwb3J0IGRlZmF1bHQgKCkgPT4gPEdsb2JhbCBzdHlsZXM9e3sgY29sb3I6ICdob3RwaW5rJyB9fSAvPlxuIl19 */\\",
name: "3sn2xs",
styles: "color:hotpink",
map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImJhc2ljLW9iai5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHNkIiLCJmaWxlIjoiYmFzaWMtb2JqLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnXG5pbXBvcnQgeyBHbG9iYWwgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcblxuZXhwb3J0IGRlZmF1bHQgKCkgPT4gPEdsb2JhbCBzdHlsZXM9e3sgY29sb3I6ICdob3RwaW5rJyB9fSAvPlxuIl19 */",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};

Expand All @@ -74,7 +74,7 @@ const getBgColor = () => ({
backgroundColor: '#fff'
});

export default (() => <Global styles={[\\"color:hotpink;\\", getBgColor(), process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbXBsZXgtYXJyYXkuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBSzZCIiwiZmlsZSI6ImNvbXBsZXgtYXJyYXkuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgKiBhcyBSZWFjdCBmcm9tICdyZWFjdCdcbmltcG9ydCB7IEdsb2JhbCB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuXG5jb25zdCBnZXRCZ0NvbG9yID0gKCkgPT4gKHsgYmFja2dyb3VuZENvbG9yOiAnI2ZmZicgfSlcblxuZXhwb3J0IGRlZmF1bHQgKCkgPT4gPEdsb2JhbCBzdHlsZXM9e1t7IGNvbG9yOiAnaG90cGluaycgfSwgZ2V0QmdDb2xvcigpXX0gLz5cbiJdfQ== */\\"]} />);"
export default (() => <Global styles={["color:hotpink;", getBgColor(), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbXBsZXgtYXJyYXkuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBSzZCIiwiZmlsZSI6ImNvbXBsZXgtYXJyYXkuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgKiBhcyBSZWFjdCBmcm9tICdyZWFjdCdcbmltcG9ydCB7IEdsb2JhbCB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuXG5jb25zdCBnZXRCZ0NvbG9yID0gKCkgPT4gKHsgYmFja2dyb3VuZENvbG9yOiAnI2ZmZicgfSlcblxuZXhwb3J0IGRlZmF1bHQgKCkgPT4gPEdsb2JhbCBzdHlsZXM9e1t7IGNvbG9yOiAnaG90cGluaycgfSwgZ2V0QmdDb2xvcigpXX0gLz5cbiJdfQ== */"]} />);"
`;

exports[`emotion-babel-plugin Global complex-obj 1`] = `
Expand All @@ -88,7 +88,7 @@ export default () => <Global styles={{ color: 'hotpink', ...getBgColor() }} />

↓ ↓ ↓ ↓ ↓ ↓

import { css as _css } from \\"@emotion/react\\";
import { css as _css } from "@emotion/react";
import * as React from 'react';
import { Global } from '@emotion/react';

Expand All @@ -99,7 +99,7 @@ const getBgColor = () => ({
export default (() => <Global styles={/*#__PURE__*/_css({
color: 'hotpink',
...getBgColor()
}, process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbXBsZXgtb2JqLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUs2QiIsImZpbGUiOiJjb21wbGV4LW9iai5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0J1xuaW1wb3J0IHsgR2xvYmFsIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5cbmNvbnN0IGdldEJnQ29sb3IgPSAoKSA9PiAoeyBiYWNrZ3JvdW5kQ29sb3I6ICcjZmZmJyB9KVxuXG5leHBvcnQgZGVmYXVsdCAoKSA9PiA8R2xvYmFsIHN0eWxlcz17eyBjb2xvcjogJ2hvdHBpbmsnLCAuLi5nZXRCZ0NvbG9yKCkgfX0gLz5cbiJdfQ== */\\")} />);"
}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbXBsZXgtb2JqLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUs2QiIsImZpbGUiOiJjb21wbGV4LW9iai5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0J1xuaW1wb3J0IHsgR2xvYmFsIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5cbmNvbnN0IGdldEJnQ29sb3IgPSAoKSA9PiAoeyBiYWNrZ3JvdW5kQ29sb3I6ICcjZmZmJyB9KVxuXG5leHBvcnQgZGVmYXVsdCAoKSA9PiA8R2xvYmFsIHN0eWxlcz17eyBjb2xvcjogJ2hvdHBpbmsnLCAuLi5nZXRCZ0NvbG9yKCkgfX0gLz5cbiJdfQ== */")} />);"
`;

exports[`emotion-babel-plugin Global css-used-as-value 1`] = `
Expand All @@ -112,18 +112,18 @@ export default () => <Global styles={css({ color: 'hotpink' })} />

↓ ↓ ↓ ↓ ↓ ↓

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).\\"; }
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, css } from '@emotion/react'; // this gets ignored by Global macro, but it tests that this combination doesn't crash or something

var _ref = process.env.NODE_ENV === \\"production\\" ? {
name: \\"3sn2xs\\",
styles: \\"color:hotpink\\"
var _ref = process.env.NODE_ENV === "production" ? {
name: "3sn2xs",
styles: "color:hotpink"
} : {
name: \\"3sn2xs\\",
styles: \\"color:hotpink\\",
map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNzcy11c2VkLWFzLXZhbHVlLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUlxQyIsImZpbGUiOiJjc3MtdXNlZC1hcy12YWx1ZS5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0J1xuaW1wb3J0IHsgR2xvYmFsLCBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcblxuLy8gdGhpcyBnZXRzIGlnbm9yZWQgYnkgR2xvYmFsIG1hY3JvLCBidXQgaXQgdGVzdHMgdGhhdCB0aGlzIGNvbWJpbmF0aW9uIGRvZXNuJ3QgY3Jhc2ggb3Igc29tZXRoaW5nXG5leHBvcnQgZGVmYXVsdCAoKSA9PiA8R2xvYmFsIHN0eWxlcz17Y3NzKHsgY29sb3I6ICdob3RwaW5rJyB9KX0gLz5cbiJdfQ== */\\",
name: "3sn2xs",
styles: "color:hotpink",
map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNzcy11c2VkLWFzLXZhbHVlLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUlxQyIsImZpbGUiOiJjc3MtdXNlZC1hcy12YWx1ZS5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0J1xuaW1wb3J0IHsgR2xvYmFsLCBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcblxuLy8gdGhpcyBnZXRzIGlnbm9yZWQgYnkgR2xvYmFsIG1hY3JvLCBidXQgaXQgdGVzdHMgdGhhdCB0aGlzIGNvbWJpbmF0aW9uIGRvZXNuJ3QgY3Jhc2ggb3Igc29tZXRoaW5nXG5leHBvcnQgZGVmYXVsdCAoKSA9PiA8R2xvYmFsIHN0eWxlcz17Y3NzKHsgY29sb3I6ICdob3RwaW5rJyB9KX0gLz5cbiJdfQ== */",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};

Expand Down Expand Up @@ -185,19 +185,19 @@ export default () => <Global styles={{ color: 'hotpink' }}></Global>

↓ ↓ ↓ ↓ ↓ ↓

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).\\"; }
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)."; }

/* eslint-disable */
import * as React from 'react';
import { Global } from '@emotion/react'; // prettier-ignore

var _ref = process.env.NODE_ENV === \\"production\\" ? {
name: \\"3sn2xs\\",
styles: \\"color:hotpink\\"
var _ref = process.env.NODE_ENV === "production" ? {
name: "3sn2xs",
styles: "color:hotpink"
} : {
name: \\"3sn2xs\\",
styles: \\"color:hotpink\\",
map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndpdGgtY2xvc2luZy1lbGVtZW50LmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUs2QiIsImZpbGUiOiJ3aXRoLWNsb3NpbmctZWxlbWVudC5qcyIsInNvdXJjZXNDb250ZW50IjpbIi8qIGVzbGludC1kaXNhYmxlICovXG5pbXBvcnQgKiBhcyBSZWFjdCBmcm9tICdyZWFjdCdcbmltcG9ydCB7IEdsb2JhbCB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuXG4vLyBwcmV0dGllci1pZ25vcmVcbmV4cG9ydCBkZWZhdWx0ICgpID0+IDxHbG9iYWwgc3R5bGVzPXt7IGNvbG9yOiAnaG90cGluaycgfX0+PC9HbG9iYWw+XG4iXX0= */\\",
name: "3sn2xs",
styles: "color:hotpink",
map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndpdGgtY2xvc2luZy1lbGVtZW50LmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUs2QiIsImZpbGUiOiJ3aXRoLWNsb3NpbmctZWxlbWVudC5qcyIsInNvdXJjZXNDb250ZW50IjpbIi8qIGVzbGludC1kaXNhYmxlICovXG5pbXBvcnQgKiBhcyBSZWFjdCBmcm9tICdyZWFjdCdcbmltcG9ydCB7IEdsb2JhbCB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuXG4vLyBwcmV0dGllci1pZ25vcmVcbmV4cG9ydCBkZWZhdWx0ICgpID0+IDxHbG9iYWwgc3R5bGVzPXt7IGNvbG9yOiAnaG90cGluaycgfX0+PC9HbG9iYWw+XG4iXX0= */",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};

Expand Down
Loading