css.test.js.snap

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`babel css extract basic object support 1`] = `"/*#__PURE__*/css({ display: 'flex' });"`;

exports[`babel css extract css basic 1`] = `
"import \\"./css.test.emotion.css\\";

\\"css-153l48f\\";"
`;

exports[`babel css extract css basic 2`] = `".css-153l48f{margin:12px 48px;color:#ffffff;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;color:blue;}"`;

exports[`babel css extract dynamic property objects 1`] = `
"
/*#__PURE__*/css({
  fontSize: 10,
  [\`w\${'idth'}\`]: 20
});"
`;

exports[`babel css extract dynamically renamed-import: basic object support 1`] = `"import { css as cows } from 'emotion'; /*#__PURE__*/cows({ display: 'flex' });"`;

exports[`babel css extract objects 1`] = `
"
/*#__PURE__*/css({
    borderRadius: '50%',
    transition: 'transform 400ms ease-in-out',
    boxSizing: 'border-box',
    display: 'flex',
    ':hover': {
        transform: 'scale(1.2)'
    }
});"
`;

exports[`babel css extract renamed-import: basic object support 1`] = `"/*#__PURE__*/cows({ display: 'flex' });"`;

exports[`babel css inline ::placeholder 1`] = `
"
const cls1 = /*#__PURE__*/css({
  '::placeholder': {
    color: 'green',
    display: 'flex'
  }
});
const cls2 = /*#__PURE__*/css('::placeholder{color:green;display:flex;}');"
`;

exports[`babel css inline :fullscreen 1`] = `
"
const cls1 = /*#__PURE__*/css({
  ':fullscreen': {
    color: 'green',
    display: 'flex'
  }
});
const cls2 = /*#__PURE__*/css(':fullscreen{color:green;display:flex;}');"
`;

exports[`babel css inline array of objects 1`] = `
"
const cls2 = /*#__PURE__*/css([{
  display: 'flex',
  flex: 1,
  alignItems: \`\${'center'}\`
}, {
  justifyContent: 'flex-start'
}]);"
`;

exports[`babel css inline autoLabel 1`] = `
"
function test() {
  const cls1 = /*#__PURE__*/css(\\"font-size:20px;@media(min-width:420px){color:blue;\\", /*#__PURE__*/css(\\"width:96px;height:96px;\\", \\"label:cls1;\\"), \\";line-height:26px;}background:green;\\", { backgroundColor: \\"hotpink\\" }, \\";\\", \\"label:cls1;\\");

  const cls2 = /*#__PURE__*/css({ color: 'blue' }, \\"label:cls2;\\");
  const cls4 = /*#__PURE__*/css({ color: \\"hotpink\\" }, \\"label:cls4;\\");

  const cls3 = /*#__PURE__*/css(\\"display:flex;&:hover{color:hotpink;}\\", \\"label:cls3;\\");
  function inner() {
    const styles = { color: \\"darkorchid\\" };
    const color = 'aquamarine';

    const cls4 = /*#__PURE__*/css(cls3, \\";\\", cls1, \\";\\", () => ({ color: \\"darkorchid\\" }), \\";\\", () => ({ color }), \\";\\", /*#__PURE__*/css(\\"height:420px;width:\\", styles, \\"label:cls4;\\"), \\";\\", \\"label:cls4;\\");
  }
}"
`;

exports[`babel css inline css basic 1`] = `
"
/*#__PURE__*/css(\\"margin:12px 48px;color:#ffffff;display:flex;flex:1 0 auto;color:blue;@media(min-width:420px){line-height:40px;}width:\\", widthVar, \\";\\");"
`;

exports[`babel css inline css basic 2`] = `
"
/*#__PURE__*/cows(\\"margin:12px 48px;color:#ffffff;display:flex;flex:1 0 auto;color:blue;@media(min-width:420px){line-height:40px;}width:\\", widthVar, \\";\\");"
`;

exports[`babel css inline css basic as cows 1`] = `
"
import { css as cows } from 'emotion';
/*#__PURE__*/cows('margin:12px 48px;color:#ffffff;display:flex;flex:1 0 auto;color:blue;@media(min-width:420px){line-height:40px;}width:', widthVar, ';');"
`;

exports[`babel css inline css random expression 1`] = `"/*#__PURE__*/css(\\"font-size:20px;@media(min-width:420px){color:blue;\\", /*#__PURE__*/css(\\"width:96px;height:96px;\\"), \\";line-height:26px;}background:green;\\", { backgroundColor: \\"hotpink\\" }, \\";\\");"`;

exports[`babel css inline css with float property 1`] = `
"
/*#__PURE__*/css(\\"float:left;\\");"
`;

exports[`babel css inline hoisting 1`] = `
"var _ref = \\"font-size:20px;@media(min-width:420px){color:blue;\\";
var _ref2 = \\";line-height:26px;}background:green;\\";
var _ref3 = { backgroundColor: \\"hotpink\\" };
var _ref4 = \\";\\";
var _ref5 = \\"width:96px;height:96px;\\";
var _ref6 = { color: 'blue' };
var _ref7 = \\"display:flex;&:hover{color:hotpink;}\\";
var _ref8 = \\";\\";
var _ref9 = \\";\\";

var _ref10 = () => ({ color: \\"darkorchid\\" });

var _ref11 = \\";\\";
var _ref12 = \\";\\";
var _ref13 = \\";\\";
var _ref14 = \\"height:420px;width:\\";

function test() {
  const cls1 = /*#__PURE__*/css(_ref, /*#__PURE__*/css(_ref5), _ref2, _ref3, _ref4);

  const cls2 = /*#__PURE__*/css(_ref6);

  const cls3 = /*#__PURE__*/css(_ref7);
  function inner() {
    const styles = { color: \\"darkorchid\\" };
    const color = 'aquamarine';

    const cls4 = /*#__PURE__*/css(cls3, _ref8, cls1, _ref9, _ref10, _ref11, () => ({ color }), _ref12, /*#__PURE__*/css(_ref14, styles), _ref13);
  }
}"
`;

exports[`babel css inline interpolation in selector 1`] = `
"
const cls2 = /*#__PURE__*/css(\\"margin:12px 48px;color:#ffffff;\\", className, \\"{display:none;}\\");"
`;

exports[`babel css inline nested expanded properties 1`] = `
"
/*#__PURE__*/css(\\"margin:12px 48px;& .div{display:flex;}\\");"
`;

exports[`babel css inline object with a bunch of stuff 1`] = `
"
const cls2 = /*#__PURE__*/css({
  float: 'left',
  display: 'flex',
  flex: 1,
  alignItems: \`\${'center'}\`
});"
`;

exports[`babel css inline only styles on nested selector 1`] = `
"
const cls1 = /*#__PURE__*/css(\\"display:flex;\\");
const cls2 = /*#__PURE__*/css(\\"&:hover{background:pink;}\\");"
`;

exports[`babel css inline symbols inside of "" 1`] = `
"
const cls = /*#__PURE__*/css(\\"content:\\\\\\"  {  }  \\\\\\"\\");"
`;