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

exports[`css-prop.js 1`] = `
function SomeComponent (props) {
  // Create styles as if you're calling css and the class will be applied to the component
  return (<div css={\`
    color: blue;
    font-size: 17 px;

    &:hover {
      color: green;
    }

    & .some-class {
      font-size: 20px;
    }
  \`}>
    This will be blue until hovered.
    <div className="some-class">
      This font size will be 20px
    </div>
  </div>)
}

const TestComponent = ({ children, ...props }) => (
  <div css={\`color: white; background: black\`}>
    {children}
  </div>
);
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function SomeComponent(props) {
  // Create styles as if you're calling css and the class will be applied to the component
  return (
    <div
      css={\`
        color: blue;
        font-size: 17 px;

        &:hover {
          color: green;
        }

        & .some-class {
          font-size: 20px;
        }
      \`}
    >
      This will be blue until hovered.
      <div className="some-class">This font size will be 20px</div>
    </div>
  );
}

const TestComponent = ({ children, ...props }) => (
  <div
    css={\`
      color: white;
      background: black;
    \`}
  >
    {children}
  </div>
);

`;

exports[`expressions.js 1`] = `
const long = \`long \${a//comment
  .b} long longlong \${a.b.c.d.e} long longlong \${a.b.c.d.e} long longlong \${a.b.c.d.e} long long\`;
const long = \`long \${a.b.c.d.e} long longlong \${loooooooooooooooooong} long longlong \${loooooooooooooooooong} long longlong \${loooooooooooooooooong} long long\`;

const long = \`long long long long long long long long long long long \${a.b.c.d.e} long long long long long long long long long long long long long\`;

const description =
  \`The value of the \${cssName} css of the \${this._name} element\`;

const foo = \`such a long template string \${foo.bar.baz} that prettier will want to wrap it\`;


x = \`mdl-textfield mdl-js-textfield \${className} \${content.length > 0
  ? 'is-dirty'
  : ''} combo-box__input\`

function testing() {
  const p = {};
  // faking some tabs since I can't paste my real code in
  if(true) {
    if(false) {
      return \`\${process.env.OPENID_URL}/something/something/something?\${Object.keys(p)
        .map(k => \`\${encodeURIComponent(k)}=\${encodeURIComponent(p[k])}\`)
        .join("&")}\`;
    }
  }
}

console.log(
  \`Trying update appcast for \${app.name} (\${app.cask.appcast}) -> (\${app.cask.appcastGenerated})\`
)

console.log(\`brew cask audit --download \${_.map(definitions, 'caskName').join(' ')}\`)

console.log(\`\\nApparently jetbrains changed the release artifact for \${app.name}@\${app.jetbrains.version}.\\n\`);

descirbe('something', () => {
  test(\`{pass: false} expect(\${small}).toBeGreaterThanOrEqual(\${big})\`, () => {});
})

throw new Error(\`pretty-format: Option "theme" has a key "\${key}" whose value "\${value}" is undefined in ansi-styles.\`,)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
const long = \`long \${
  a.b //comment
} long longlong \${a.b.c.d.e} long longlong \${a.b.c.d.e} long longlong \${
  a.b.c.d.e
} long long\`;
const long = \`long \${
  a.b.c.d.e
} long longlong \${loooooooooooooooooong} long longlong \${loooooooooooooooooong} long longlong \${loooooooooooooooooong} long long\`;

const long = \`long long long long long long long long long long long \${
  a.b.c.d.e
} long long long long long long long long long long long long long\`;

const description = \`The value of the \${cssName} css of the \${
  this._name
} element\`;

const foo = \`such a long template string \${
  foo.bar.baz
} that prettier will want to wrap it\`;

x = \`mdl-textfield mdl-js-textfield \${className} \${
  content.length > 0 ? "is-dirty" : ""
} combo-box__input\`;

function testing() {
  const p = {};
  // faking some tabs since I can't paste my real code in
  if (true) {
    if (false) {
      return \`\${
        process.env.OPENID_URL
      }/something/something/something?\${Object.keys(p)
        .map(k => \`\${encodeURIComponent(k)}=\${encodeURIComponent(p[k])}\`)
        .join("&")}\`;
    }
  }
}

console.log(
  \`Trying update appcast for \${app.name} (\${app.cask.appcast}) -> (\${
    app.cask.appcastGenerated
  })\`
);

console.log(
  \`brew cask audit --download \${_.map(definitions, "caskName").join(" ")}\`
);

console.log(
  \`\\nApparently jetbrains changed the release artifact for \${app.name}@\${
    app.jetbrains.version
  }.\\n\`
);

descirbe("something", () => {
  test(\`{pass: false} expect(\${small}).toBeGreaterThanOrEqual(\${big})\`, () => {});
});

throw new Error(
  \`pretty-format: Option "theme" has a key "\${key}" whose value "\${value}" is undefined in ansi-styles.\`
);

`;

exports[`styled-components-with-expressions.js 1`] = `
const Button = styled.a\`
/* Comment */
	display: \${props=>props.display};
\`;

styled.div\`
	display: \${props=>props.display};
	border: \${props=>props.border}px;
	margin: 10px \${props=>props.border}px ;
\`;

const EqualDivider = styled.div\`
margin: 0.5rem;
		padding: 1rem;
	background: papayawhip    ;

	> * {
	flex: 1;

	&:not(:first-child) {
			\${props => props.vertical ? 'margin-top' : 'margin-left'}: 1rem;
		}
	}
\`;

const header = css\`
.top-bar {background:black;
margin: 0;
    position: fixed;
	top: 0;left:0;
	width: 100%;
    text-align: center     ;
	padding: 15px  0  0  1em;
		z-index: 9999;
}

.top-bar .logo {
  height: 30px;
  margin: auto; 
    position: absolute;
	left: 0;right: 0;
}
\`;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
const Button = styled.a\`
  /* Comment */
  display: \${props => props.display};
\`;

styled.div\`
  display: \${props => props.display};
  border: \${props => props.border}px;
  margin: 10px \${props => props.border}px;
\`;

const EqualDivider = styled.div\`
  margin: 0.5rem;
  padding: 1rem;
  background: papayawhip;

  > * {
    flex: 1;

    &:not(:first-child) {
      \${props => (props.vertical ? "margin-top" : "margin-left")}: 1rem;
    }
  }
\`;

const header = css\`
  .top-bar {
    background: black;
    margin: 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
    padding: 15px 0 0 1em;
    z-index: 9999;
  }

  .top-bar .logo {
    height: 30px;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
  }
\`;

`;

exports[`styled-jsx.js 1`] = `
<style jsx>{\`
	/* a comment */
	div :global(.react-select) {
		color: red; display: none
	}
\`}</style>;

<div>
<style jsx>{\`
	/* a comment */
div :global(.react-select) {
color: red; display: none
}\`}</style>
</div>;

<div>
<style jsx>{\`div{color:red}\`}</style>
</div>;

<div>
<style jsx>{\`This is invalid css. 
      Shouldn't fail.
            Shouldn't be formatted.\`}</style>
</div>;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<style jsx>{\`
  /* a comment */
  div :global(.react-select) {
    color: red;
    display: none;
  }
\`}</style>;

<div>
  <style jsx>{\`
    /* a comment */
    div :global(.react-select) {
      color: red;
      display: none;
    }
  \`}</style>
</div>;

<div>
  <style jsx>{\`
    div {
      color: red;
    }
  \`}</style>
</div>;

<div>
  <style jsx>{\`This is invalid css. 
      Shouldn't fail.
            Shouldn't be formatted.\`}</style>
</div>;

`;

exports[`styled-jsx-with-expressions.js 1`] = `
<style jsx>{\`
  div {
  display: \${expr};
    color: \${expr};
    \${expr};
    \${expr};
    background: red;
  animation: \${expr} 10s ease-out;
  }
  @media (\${expr}) {
   div.\${expr} {
    color: red;
   }
  \${expr} {
    color: red;
  }
  }
  @media (min-width: \${expr}) {
   div.\${expr} {
    color: red;
   }
  all\${expr} {
    color: red;
  }
  }
  @font-face {
    \${expr}
  }
\`}</style>;

<style jsx>{\`
  div {
  animation: linear \${seconds}s ease-out;
  }
\`}</style>;

<style jsx>{\`
  div {
  animation: 3s ease-in 1s \${foo => foo.getIterations()} reverse both paused slidein;
  }
\`}</style>;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<style jsx>{\`
  div {
    display: \${expr};
    color: \${expr};
    \${expr};
    \${expr};
    background: red;
    animation: \${expr} 10s ease-out;
  }
  @media (\${expr}) {
    div.\${expr} {
      color: red;
    }
    \${expr} {
      color: red;
    }
  }
  @media (min-width: \${expr}) {
    div.\${expr} {
      color: red;
    }
    all\${expr} {
      color: red;
    }
  }
  @font-face {
    \${expr};
  }
\`}</style>;

<style jsx>{\`
  div {
    animation: linear \${seconds}s ease-out;
  }
\`}</style>;

<style jsx>{\`
  div {
    animation: 3s ease-in 1s \${foo => foo.getIterations()} reverse both paused
      slidein;
  }
\`}</style>;

`;