Media queries ignore printWidth

[algomaster99]

Prettier 1.18.2
Playground link

Scenario 1

Input:

<A
  a={`
	${b} is a constant. ${b} is a constant.${b} is a constant.${b} is a constant.${b} is a constant.
    ${b} is a constant. 
  `}
>
</A>

Output:

<A
  a={`
	${b} is a constant. ${b} is a constant.${b} is a constant.${b} is a constant.${b} is a constant.
    ${b} is a constant. 
  `}
></A>

Expected behavior:
As expected.

Scenario 2

Input:

const Graphic = styled.section`
  @media only screen and
  (min-device-width: 768px) and
  (max-device-width: 1024px) {
    overflow-x: scroll;
    overflow-y: hidden;
  }
`

Output:

const Graphic = styled.section`
  @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    overflow-x: scroll;
    overflow-y: hidden;
  }
`

Expected behavior:
Should have left it multi-line

Why is there an inconsistent breaking of template literals? When does it break and when not? Referring to this PR - #5979, what is meant by "simple template literals"?

[thorn0]

Scenario 2 has nothing to do with the simple/not simple distinction. The thing is Prettier special-cases some hard-coded template literal tags, including styled.*, and applies special rules to literals that have these tags. In this case, it parses and reformats the string as CSS, using the CSS parser and printer. Other examples are (but not limited to) html`...` and graphql`...`. This feature is a bit controversial and might change (become configurable) in the next major release (see #5588 and #6626).

Did I answer your question?

[algomaster99]

@thorn0 Thanks for the quick response!
My current workaround is to use "max-len": ["error", { "ignoreTemplateLiterals": true }], in eslint config to make the tests pass. Is this okay?

[lydell]

@algomaster99 We recommend turning off all rules that conflict with Prettier. See: https://prettier.io/docs/en/integrating-with-linters.html

max-len can be used with Prettier, but I wouldn't personally recommend it. You’ll always be fighting with it. See: https://github.com/prettier/eslint-config-prettier#max-len

[algomaster99]

Thanks @lydell !
But apparently, we have to use max-len. We think it will make our code look neater. Anyway, thanks for the help.

[thorn0]

It's actually a bug. Media queries ignore --print-width. Can't find another issue about this, so let's reopen this one.

Prettier 1.18.2
Playground link

--parser css
--print-width 40

Input:

@media only screen  and
(min-device-width: 768px) and
(max-device-width: 1024px) {
    overflow-x: scroll;
    overflow-y: hidden;
}

Output:

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  overflow-x: scroll;
  overflow-y: hidden;
}

[alexander-akait]

@thorn0 it is expected, we try to avoid break @media for better readability, i can't find discussion, but it was in some of PRs

[thorn0]

I can't find any such discussion either. Looks like a bug to me.

[alexander-akait]

@thorn0 hm, what is expected:

@media only screen and
  (min-device-width: 768px) and
  (max-device-width: 1024px) {
    overflow-x: scroll;
    overflow-y: hidden;
}

@media only screen  
  and (min-device-width: 768px)
  and (max-device-width: 1024px) {
    overflow-x: scroll;
    overflow-y: hidden;
}

[alexander-akait]

@thorn0 also for me it is not bug, it is feature, we don't break code in this case

[thorn0]

We might want to research how exactly people usually prefer to break media queries, but this expression can be even longer and not breaking it doesn't make sense to me.

[alexander-akait]

@thorn0 usually @media doesn't have more than two and (like in example) so breaking decrease readability, from my experience with postcss, stylelint, cssnano and etc, most of developer love write @media in one line, but it’s not heuristic

[thorn0]

Let's just keep the issue open for now.