matype/stylefmt

breaking nested media queries

keithjgrant opened this issue · 2 comments

keithjgrant commented

When using the stylelint-order plugin, stylefmt moves nested @media queries (and other nested at-rules) to the top of the declaration block. This can change the meaning of the CSS.

Given the following code:

html {
  font-size: 87.5%;

  @media (min-width: 30em) {
    font-size: 100%;
  }
}

produces:

html {
  @media (min-width: 30em) {
    font-size: 100%;
  }

  font-size: 87.5%;
}

This is obviously no good, as it breaks my code. It should not move the at-rules. I also see the same behavior with other at-rules, such as an @if at rule (from a PostCSS plugin). They all move to the top.

It makes this change whether I use the order/properties-order or the order/properties-alphabetical-order option.

keithjgrant commented

Hmm.. Thinking about this more, other should move to the top. Typically @apply should be at the top (though moving this, too can change the meaning of the code).

keithjgrant commented

Oh! Nevermind, theres the order/order config option for stylelint-order, which by default puts at-rules at the top. I just need to edit configs for that :)

  • 👍1