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 ParticipantsOutput:
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 ParticipantsExpected behavior:
No insertion of line breaks in CSS selectors of length less than, say, 80.
Prettier 1.14.2
Playground link
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:
Output:
Expected behavior:
No insertion of line breaks in CSS selectors of length less than, say, 80.