postcss-sorting icon indicating copy to clipboard operation
postcss-sorting copied to clipboard

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

Open bigmistqke opened this issue 1 year ago • 1 comments

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.

bigmistqke avatar May 03 '23 14:05 bigmistqke

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

hudochenkov avatar May 28 '23 22:05 hudochenkov