No line break insertions in short CSS selectors

Prettier 1.14.2 Playground link

--parser babylon
--no-semi

I suggest reconfiguring the changes made in #1962 so as to only insert line breaks in CSS selectors when they exceed a given length. Otherwise, you end up with unnecessarily long files in cases such as the one below.

Input:

import styled from 'styled-components'

import mediaQuery from '../../utils/mediaQuery'

const Participants = styled.section`
  padding: 2rem;
  background: ${props => props.theme.mainWhite};
  display: grid;
  grid-gap: 2rem;
  h1, h2, h3, h4 {
    width: 100%;
    padding: 0.5rem 2rem;
    background: ${props => props.theme.lightGreen};
  }
  ${mediaQuery.phone} {
    h1, h2, h3, h4 {
      font-size: 1rem;
    }
  }
  ${mediaQuery.tablet} {
    grid-gap: 1rem;
    h1, h2, h3, h4 {
      grid-column: 1/-1;
    }
  }
  ${mediaQuery.minTablet} {
    h1, h2, h3, h4 {
      white-space: nowrap;
      grid-row: 2;
    }
  }
`

export default Participants

Output:

import styled from "styled-components"

import mediaQuery from "../../utils/mediaQuery"

const Participants = styled.section`
  padding: 2rem;
  background: ${props => props.theme.mainWhite};
  display: grid;
  grid-gap: 2rem;
  h1,
  h2,
  h3,
  h4 {
    width: 100%;
    padding: 0.5rem 2rem;
    background: ${props => props.theme.lightGreen};
  }
  ${mediaQuery.phone} {
    h1,
    h2,
    h3,
    h4 {
      font-size: 1rem;
    }
  }
  ${mediaQuery.tablet} {
    grid-gap: 1rem;
    h1,
    h2,
    h3,
    h4 {
      grid-column: 1/-1;
    }
  }
  ${mediaQuery.minTablet} {
    h1,
    h2,
    h3,
    h4 {
      white-space: nowrap;
      grid-row: 2;
    }
  }
`

export default Participants

Expected behavior:

No insertion of line breaks in CSS selectors of length less than, say, 80.

[janosh]

@lydell I’m a little surprised that this issue is even debated. I was under the impression that the point of prettier is not to be simple in and of itself but to produce ideally formatted code. I can’t imagine anyone would consider this to be ideally formatted,

h1,
h2,
h3,
h4,
h5, 
h6 {
  margin: 0;
}

especially when compared to this

h1, h2, h3, h4, h5, h6 {
  margin: 0;
}

Breaking code onto multiple lines only once it exceeds a certain length is such a common practice. I don’t see why it would be more difficult or less useful with CSS selectors than anywhere else.

[syntag]

@lydell It’s a shame really. I understand that you’re looking for an overwhelming consensus before taking any action since you probably have more important things to focus on.

But with Preitter being an already opinionated formatter, I was at least hoping that even though this thread lacks popularity, that the change request shares similar values that were already made on other languages for virtually the same scenario in Javascript. I don’t understand why SCSS is being treated differently.

I’d least hope that we can look at this change request objectively and see that implementing it would not only make sense for Preitter, but add consistency across different languages.