jsfmt.spec.js.snap

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

exports[`colons-after-substitutions.js format 1`] = `
====================================options=====================================
parsers: ["babel"]
printWidth: 80
                                                                                | printWidth
=====================================input======================================
const Icon = styled.div\`
  flex: none;
  transition:    fill 0.25s;
  width: 48px;
  height: 48px;

  \${Link}:hover {
    fill:   rebeccapurple;
  }

  \${Link} :hover {
    fill: yellow;
  }

  \${media.smallDown}::before {}
\`

=====================================output=====================================
const Icon = styled.div\`
  flex: none;
  transition: fill 0.25s;
  width: 48px;
  height: 48px;

  \${Link}:hover {
    fill: rebeccapurple;
  }

  \${Link} :hover {
    fill: yellow;
  }

  \${media.smallDown}::before {
  }
\`;

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

exports[`colons-after-substitutions2.js format 1`] = `
====================================options=====================================
parsers: ["babel"]
printWidth: 80
                                                                                | printWidth
=====================================input======================================
const Icon = styled.div\`
  height: 48px;

  \${Link}:nth-child(2) {
    fill: rebeccapurple;
  }
\`;

const Icon2 = styled.div\`
  height: 48px;

  \${Link}:empty:before{
    fill: rebeccapurple;
  }
\`;

const Icon3 = styled.div\`
  height: 48px;

  \${Link}:not(:first-child) {
    fill: rebeccapurple;
  }
\`;

=====================================output=====================================
const Icon = styled.div\`
  height: 48px;

  \${Link}:nth-child(2) {
    fill: rebeccapurple;
  }
\`;

const Icon2 = styled.div\`
  height: 48px;

  \${Link}:empty:before {
    fill: rebeccapurple;
  }
\`;

const Icon3 = styled.div\`
  height: 48px;

  \${Link}:not(:first-child) {
    fill: rebeccapurple;
  }
\`;

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

exports[`issue-6259.js format 1`] = `
====================================options=====================================
parsers: ["babel"]
printWidth: 80
                                                                                | printWidth
=====================================input======================================
export const Group = styled.div\`
  margin: 0;

  .input {
    margin: 0;
  }

  \${StyledInput}:not(:first-child) {
    margin: 0;
  }

  & > :not(.\${inputWrap}):not(\${Button}) {
    display: flex;
  }
\`

const yesFrame = (
    ...args: Interpolation<ThemedStyledProps<{}, Theme>>[]
) => css\`
    \${ChatRoot}[data-frame="yes"] & {
        \${css({}, ...args)}
    }
\`

=====================================output=====================================
export const Group = styled.div\`
  margin: 0;

  .input {
    margin: 0;
  }

  \${StyledInput}:not(:first-child) {
    margin: 0;
  }

  & > :not(.\${inputWrap}):not(\${Button}) {
    display: flex;
  }
\`;

const yesFrame = (
  ...args: Interpolation<ThemedStyledProps<{}, Theme>>[]
) => css\`
  \${ChatRoot}[data-frame="yes"] & {
    \${css({}, ...args)}
  }
\`;

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

exports[`styled-components.js format 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
  }
\`;

const Direction = styled.span\`
  \${({ up }) => up && \`color: \${color.positive};\`}
  \${({ down }) => down && \`color: \${color.negative};\`}
\`;

const Direction2 = styled.span\`
  \${({ up }) => up && \`color: \${color.positive}\`};
  \${({ down }) => down && \`color: \${color.negative}\`};
\`;

const mixin = css\`
  color: \${props => props.color};
  \${props => props.otherProperty}: \${props => props.otherValue};
\`;

const foo = styled.div\`
  display: flex;
  \${props => props.useMixin && mixin}
\`;

const Single1 = styled.div\`
  color: red
\`;

const Single2 = styled.div\`
  color: red;
\`;

const Dropdown = styled.div\`
  /* A comment to avoid the prettier issue: https://github.com/prettier/prettier/issues/2291 */
  position: relative;
\`;

const bar = styled.div\`
  border-radius: 50%;
  border: 5px solid rgba(var(--green-rgb), 0);
  display: inline-block;
  height: 40px;
  width: 40px;

  \${props =>
    (props.complete || props.inProgress) &&
    css\`
      border-color: rgba(var(--green-rgb), 0.15);
    \`}
  
  div {
    background-color: var(--purpleTT);
    border-radius: 50%;
    border: 4px solid rgba(var(--purple-rgb), 0.2);
    color: var(--purpleTT);
    display: inline-flex;

    \${props =>
    props.complete &&
    css\`
        background-color: var(--green);
        border-width: 7px;
      \`}
      
    \${props =>
    (props.complete || props.inProgress) &&
    css\`
        border-color: var(--green);
      \`}
  }
\`;

const A = styled.a\`
  display: inline-block;
  color: #fff;  
  \${props => props.a &&css\`
    display: none;
  \`}
   height: 30px;
\`;

const Foo = styled.p\`
  max-width: 980px;
  \${mediaBreakpointOnlyXs\`
    && {
      font-size: 0.8rem;
    }
  \`}

  &.bottom {
    margin-top: 3rem;
  }
\`;

=====================================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;
  }
\`;

const Direction = styled.span\`
  \${({ up }) => up && \`color: \${color.positive};\`}
  \${({ down }) => down && \`color: \${color.negative};\`}
\`;

const Direction2 = styled.span\`
  \${({ up }) => up && \`color: \${color.positive}\`};
  \${({ down }) => down && \`color: \${color.negative}\`};
\`;

const mixin = css\`
  color: \${(props) => props.color};
  \${(props) => props.otherProperty}: \${(props) => props.otherValue};
\`;

const foo = styled.div\`
  display: flex;
  \${(props) => props.useMixin && mixin}
\`;

const Single1 = styled.div\`
  color: red;
\`;

const Single2 = styled.div\`
  color: red;
\`;

const Dropdown = styled.div\`
  /* A comment to avoid the prettier issue: https://github.com/prettier/prettier/issues/2291 */
  position: relative;
\`;

const bar = styled.div\`
  border-radius: 50%;
  border: 5px solid rgba(var(--green-rgb), 0);
  display: inline-block;
  height: 40px;
  width: 40px;

  \${(props) =>
    (props.complete || props.inProgress) &&
    css\`
      border-color: rgba(var(--green-rgb), 0.15);
    \`}

  div {
    background-color: var(--purpleTT);
    border-radius: 50%;
    border: 4px solid rgba(var(--purple-rgb), 0.2);
    color: var(--purpleTT);
    display: inline-flex;

    \${(props) =>
      props.complete &&
      css\`
        background-color: var(--green);
        border-width: 7px;
      \`}

    \${(props) =>
      (props.complete || props.inProgress) &&
      css\`
        border-color: var(--green);
      \`}
  }
\`;

const A = styled.a\`
  display: inline-block;
  color: #fff;
  \${(props) =>
    props.a &&
    css\`
      display: none;
    \`}
  height: 30px;
\`;

const Foo = styled.p\`
  max-width: 980px;
  \${mediaBreakpointOnlyXs\`
    && {
      font-size: 0.8rem;
    }
  \`}

  &.bottom {
    margin-top: 3rem;
  }
\`;

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

exports[`var.js format 1`] = `
====================================options=====================================
parsers: ["babel"]
printWidth: 80
                                                                                | printWidth
=====================================input======================================
const Something = styled.div\`
  background: var(--\${one}); /* ... */
  border: 1px solid var(--\${two}); /* ... */
\`;

const StyledPurchaseCard = styled(Card)\`
  min-width: 200px;
  background-color: var(--\${props => props.color});
  color: #fff;
\`;

=====================================output=====================================
const Something = styled.div\`
  background: var(--\${one}); /* ... */
  border: 1px solid var(--\${two}); /* ... */
\`;

const StyledPurchaseCard = styled(Card)\`
  min-width: 200px;
  background-color: var(--\${(props) => props.color});
  color: #fff;
\`;

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