hudochenkov / postcss-sorting

PostCSS plugin to keep rules and at-rules content in order.
MIT License
517 stars 31 forks source link

suggestion: wildcards to prevent re-ordering to affect the visual outcome #110

Closed bigmistqke closed 3 weeks ago

bigmistqke commented 1 year ago
body {
  padding-top: 20px;
  padding: 0px 10px;
}

results in a different lay-out then

body {
  padding: 0px 10px;
  padding-top: 20px;
}

You could say the first example is just incorrect use of css (which is correct), but in my opinion that should not be the responsibility of this extension, and I am sure there are other edge cases in which order matters that are perfectly valid.

I propose to have a wild-card in properties-order, p.ex padding* (syntax open for debate) so you could do something like

{
  "properties-order": [
     "top",
     "padding*",
     "margin"
  ]
}

which would order

body {
  margin: 0px;
  padding-top: 20px;
  padding: 0px 10px;
  top: 0px;
}

into

body {
  top: 0px;
  padding-top: 20px;
  padding: 0px 10px;
  margin: 0px;
}

leaving the order of the paddings intact.

hudochenkov commented 1 year ago

I'm not sure what is the problem. What is config used in the original example?