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

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

exports[`styled-components.js 1`] = `
====================================options=====================================
parsers: ["babel"]
printWidth: 80
                                                                                | printWidth
=====================================input======================================
const ListItem1 = styled.li\`\`;

const ListItem2 = styled.li\` \`;

const Dropdown = styled.div\`position: relative;\`

const Button = styled.button\`
	  color:   palevioletred ;

	font-size : 1em   ;
\`;

const TomatoButton = Button.extend\`
	color  : tomato  ;

border-color : tomato
    ;

\`;

Button.extend.attr({})\`
border-color : black;
\`

styled(ExistingComponent)\`
       color : papayawhip ; background-color: firebrick\`;


styled.button.attr({})\`
border : rebeccapurple\`;

styled(ExistingComponent).attr({})\`
border : rebeccapurple\`;

styled.div\`
  color: \${props => props.theme.colors.paragraph};
  /* prettier-ignore */
  \${props => props.small ? 'font-size: 0.8em;' : ''};
\`

styled.div\`
  color: \${props => props.theme.colors.paragraph};
  /* prettier-ignore */
  \${props => props.small ? 'font-size: 0.8em;' : ''}
\`

styled.div\`
   /* prettier-ignore */
  color: \${props => props.theme.colors.paragraph};
  \${props => props.small ? 'font-size: 0.8em;' : ''};
\`

styled.div\`
  color: \${props => props.theme.colors.paragraph};
  /* prettier-ignore */
  \${props => props.small ? 'font-size: 0.8em;' : ''};
  /* prettier-ignore */
  \${props => props.red ? 'color: red;' : ''};
\`

styled.div\`
  /* prettier-ignore */
  color: \${props => props.theme.colors.paragraph};
  /* prettier-ignore */
  \${props => props.small ? 'font-size: 0.8em;' : ''};
  /* prettier-ignore */
  \${props => props.red ? 'color: red;' : ''};
  /* prettier-ignore */
\`

styled.div\`
 \${sanitize} \${fonts}
  html {
    margin: 0;
  }
\`

styled.div\`
  \${bar}
  baz
\`

styled.span\`
  foo
  \${bar}
  baz
\`

styled.div\`
  foo
  \${bar}
  \${baz}
\`

styled.span\`
  \${foo}
  \${bar}
\`

styled.div\`
  \${foo} bar
\`

styled.span\`
  \${foo} \${bar}
  baz: \${foo}
\`

styled.span\`
\${foo};
\${bar};
\`

styled.span\`
\${foo}: \${bar};
\`

styled.span\`
\${foo}: \${bar}
\`

styled.span\`
\${foo}:
\${bar}
\`

styled.span\`
\${foo}:
\${bar};
\`

styled.a\`
  \${feedbackCountBlockCss}
  text-decoration: none;

  \${FeedbackCount} {
    margin: 0;
  }
\`

const StyledComponent1 = styled.div\`
  \${anInterpolation}
  /* a comment */

  .aRule {
    color: red
  }
\`;

const StyledComponent2 = styled.div\`
  \${anInterpolation}

  /* a comment */

  .aRule {
    color: red
  }
\`;

=====================================output=====================================
const ListItem1 = styled.li\`\`;

const ListItem2 = styled.li\`\`;

const Dropdown = styled.div\`
  position: relative;
\`;

const Button = styled.button\`
  color: palevioletred;

  font-size: 1em;
\`;

const TomatoButton = Button.extend\`
  color: tomato;

  border-color: tomato;
\`;

Button.extend.attr({})\`
  border-color: black;
\`;

styled(ExistingComponent)\`
  color: papayawhip;
  background-color: firebrick;
\`;

styled.button.attr({})\`
  border: rebeccapurple;
\`;

styled(ExistingComponent).attr({})\`
  border: rebeccapurple;
\`;

styled.div\`
  color: \${props => props.theme.colors.paragraph};
  /* prettier-ignore */
  \${props => (props.small ? "font-size: 0.8em;" : "")};
\`;

styled.div\`
  color: \${props => props.theme.colors.paragraph};
  /* prettier-ignore */
  \${props => (props.small ? "font-size: 0.8em;" : "")}
\`;

styled.div\`
   /* prettier-ignore */
  color: \${props => props.theme.colors.paragraph};
  \${props => (props.small ? "font-size: 0.8em;" : "")};
\`;

styled.div\`
  color: \${props => props.theme.colors.paragraph};
  /* prettier-ignore */
  \${props => (props.small ? "font-size: 0.8em;" : "")};
  /* prettier-ignore */
  \${props => (props.red ? "color: red;" : "")};
\`;

styled.div\`
  /* prettier-ignore */
  color: \${props => props.theme.colors.paragraph};
  /* prettier-ignore */
  \${props => (props.small ? "font-size: 0.8em;" : "")};
  /* prettier-ignore */
  \${props => (props.red ? "color: red;" : "")};
  /* prettier-ignore */
\`;

styled.div\`
  \${sanitize} \${fonts}
  html {
    margin: 0;
  }
\`;

styled.div\`
  \${bar}
  baz
\`;

styled.span\`
  foo
  \${bar}
  baz
\`;

styled.div\`
  foo
  \${bar}
  \${baz}
\`;

styled.span\`
  \${foo}
  \${bar}
\`;

styled.div\`
  \${foo} bar
\`;

styled.span\`
  \${foo} \${bar}
  baz: \${foo}
\`;

styled.span\`
  \${foo};
  \${bar};
\`;

styled.span\`
  \${foo}: \${bar};
\`;

styled.span\`
  \${foo}: \${bar}
\`;

styled.span\`
  \${foo}: \${bar}
\`;

styled.span\`
  \${foo}: \${bar};
\`;

styled.a\`
  \${feedbackCountBlockCss}
  text-decoration: none;

  \${FeedbackCount} {
    margin: 0;
  }
\`;

const StyledComponent1 = styled.div\`
  \${anInterpolation}
  /* a comment */

  .aRule {
    color: red;
  }
\`;

const StyledComponent2 = styled.div\`
  \${anInterpolation}

  /* a comment */

  .aRule {
    color: red;
  }
\`;

================================================================================
`;