Formatting for multi-line at-rule

[keithjgrant]

How should we format a multi-line at rule such as this?

@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (min-resolution: 192dpi) {
    .well-this-is-awkward {
      padding: 2em;
    }
}

[keithjgrant]

I’m not particularly happy with the formatting in that example… the selector inside is double-indented. Is it better to wrap parens around the whole thing, along these lines?

@media (
    screen 
    and (min-device-width: 1200px) 
    and (max-device-width: 1600px) 
    and (-webkit-min-device-pixel-ratio: 2)
    and (min-resolution: 192dpi)
  ) {
  .well-this-is-awkward {
    padding: 2em;
  }
}

This still looks odd to me. Hoping there’s a better solution out there.

[jeddy3]

Is it better to wrap parens around the whole thing, along these lines?

I believe parens only surround media features and not media queries.

This is what stylelint-config-standard currently enforces:

@media
  screen and (min-resolution: 192dpi),
  screen and (min-resolution: 2dppx) {
  .selector {
    background-image:
      repeating-linear-gradient(
        -45deg,
        transparent,
        #fff 25px,
        rgba(255, 255, 255, 1) 50px
      );
    margin: 10px;
    margin-bottom: 5px;
    box-shadow:
      0 1px 1px #000,
      0 1px 0 #fff,
      2px 2px 1px 1px #ccc inset;
    height: 10rem;
  }
}