csscomb / csscomb.js

CSS coding style formatter
http://csscomb.com/
MIT License
3.29k stars 458 forks source link

Properties of the same name should stay in the same order. #366

Closed tjbenton closed 9 years ago

tjbenton commented 9 years ago

I'm having an issue with csscomb reordering the same property when it shouldn't. The biggest issue is when dealing with @font-face

This is what is put in.

@font-face {
  font-family: "FontAwesome";
  src: url("#{$fa-font-path}/fontawesome-webfont.eot?v=#{$fa-version}");
  src: url("#{$fa-font-path}/fontawesome-webfont.eot?#iefix&v=#{$fa-version}") format("embedded-opentype"), url("#{$fa-font-path}/fontawesome-webfont.woff2?v=#{$fa-version}") format("woff2"), url("#{$fa-font-path}/fontawesome-webfont.woff?v=#{$fa-version}") format("woff"), url("#{$fa-font-path}/fontawesome-webfont.ttf?v=#{$fa-version}") format("truetype"), url("#{$fa-font-path}/fontawesome-webfont.svg?v=#{$fa-version}#fontawesomeregular") format("svg");
  src: url("#{$fa-font-path}/FontAwesome.otf") format("opentype"); // used when developing fonts
  font-weight: normal;
  font-style: normal;
}

Note: the order of the src properties. src: *.eot src: *.eot#iefix, *.woff2, *.woff, *.ttf, *.svg src: *.otf

This is what what csscomb outputs

@font-face{
 font-family: "FontAwesome";
 font-style: normal;
 font-weight: normal;

 src: url("../font/font-awesome/FontAwesome.otf") format("opentype");
 src: url("../font/font-awesome/fontawesome-webfont.eot?#iefix&v=4.3.0") format("embedded-opentype"), url("../font/font-awesome/fontawesome-webfont.woff2?v=4.3.0") format("woff2"), url("../font/font-awesome/fontawesome-webfont.woff?v=4.3.0") format("woff"), url("../font/font-awesome/fontawesome-webfont.ttf?v=4.3.0") format("truetype"), url("../font/font-awesome/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular") format("svg");
 src: url("../font/font-awesome/fontawesome-webfont.eot?v=4.3.0");
}

Note: the order of the src properties. src: *.otf src: *.eot#iefix, *.woff2, *.woff, *.ttf, *.svg src: *.eot

This happens when "sort-order-fallback": "abc" is set because it tries to put them in alphabetical order which is awesome, however it shouldn't try to alphabetize them based off of their values only their properties, and it shouldn't reorganize properties that are the same.

Luckily I was able to fix this problem by just adding "src" to the "sort-order" array but I figured I'd bring this issue up incase anyone else runs across the same problem trying to figure out why their @font-face isn't working correctly.

tonyganch commented 9 years ago

The issue is duplicate of #330 which is bug.

ghost commented 8 years ago

Awesome, Thanks so much! You saved me with this. So glad you posted it. Thanks