prettier/tests/template_literals/__snapshots__/jsfmt.spec.js.snap

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

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>;

`;