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

Tech stack
javascriptcss
Domain
toolingdeveloper experience
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
JavaScriptCSS in JSPrettier internals
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
45
Research direction
Investigate how Prettier handles nested template literals in CSS in JS expressions, specifically the printer module for embedded CSS. Look at the current formatting logic in src/language css/ or similar. The issue suggests that the current output breaks nesting; explore the AST structure and the print function for nested css template literals. Consider modifying the printer to preserve inline nesting when it fits.