Allow outputting correct formatting with media queries

[nwmcsween]

Example:

importfile.css:

@import 'somefile.css' (min-width: 36em);`

somefile.css:

.select {
  foo: bar;
}

Output:

@media (min-width:36em){
.select {
 foo: bar;
}
}

Desired output:

@media (min-width:36em) {
  .select {
   foo: bar;
  }
}

[RyanZim]

Yeah, if this doesn't require a huge amount of changes (or really hurt performance), PR welcome. I'm personally not motivated to fix this since I always run the output through a minifier anyhow.

[RyanZim]

Since #483; this also applies to @layer support.

[romainmenke]

We've had similar requests for nested css transforms and decided not to implement any kind of formatting.

Formatting is best left up to linters.

Any attempt to resolve this here would end up re-implementing a full blown linter with all the user preferences. (tabs vs. spaces, where to start newlines, ...)

[romainmenke]

@nwmcsween You can add a pretty printer plugin later in your PostCSS plugins config.

This seems to do exactly what you want : https://www.npmjs.com/package/postcss-prettify

[RyanZim]

Yeah, I'm going to close this as out of scope.