prettier/prettier

Better CSS-in-JS nesting formatting?

Open

#4,737 opened on Jun 22, 2018

View on GitHub
 (4 comments) (12 reactions) (0 assignees)JavaScript (51,868 stars) (4,716 forks)batch import
area:multiparserhelp wantedlang:css/scss/less

Description

Prettier 1.12.1 Playground link

Input:

const foo = css`
  color: red;
  background: yellow;

  ${bool && css`
    border: 1px solid blue;
    
    ${bool2 && css`
      padding: 20px;
    `}
  `}
`;

Output:

const foo = css`
  color: red;
  background: yellow;

  ${bool &&
    css`
      border: 1px solid blue;

      ${bool2 &&
        css`
          padding: 20px;
        `};
    `};
`;

Expected behavior:

The code, in my opinion, would be way cleaner if formatted as in the input section.

Contributor guide