search

matype / stylefmt

stylefmt is a tool that automatically formats stylesheets.
Other
2.1k stars 89 forks source link

breaking nested media queries #304

Closed keithjgrant closed 7 years ago

keithjgrant commented 7 years ago

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 7 years ago

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 7 years ago

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 :)