search

csscomb / csscomb.js

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

Wrap declarations but not wrap at rules #573

Open findawayer opened 6 years ago

findawayer commented 6 years ago

My settings:

{
    "always-semicolon": true,
    "block-indent": "    ",
    "color-case": "lower",
    "color-shorthand": true,
    "element-case": "lower",
    "eof-newline": true,
    "leading-zero": false,
    "quotes": "single",
    "remove-empty-rulesets": true,
    "space-after-colon": "",
    "space-after-combinator": " ",
    "space-after-opening-brace": "",
    "space-after-selector-delimiter": "\n",
    "space-before-closing-brace": "",
    "space-before-colon": "",
    "space-before-combinator": " ",
    "space-before-opening-brace": " ",
    "space-before-selector-delimiter": "",
    "space-between-declarations": " ",
    "strip-spaces": true,
    "unitless-zero": true,
    "vendor-prefix-align": true
}

input:

.facebook {
  width: 32px;
  height: 32px;
  background-image: url("resources/front/images/sprites/sprite.png");
  background-position: -37px -37px;
}
.google-plus {
  width: 32px;
  height: 32px;
  background-image: url("resources/front/images/sprites/sprite.png");
  background-position: -74px 0px;
}
.twitter {
  width: 32px;
  height: 32px;
  background-image: url("resources/front/images/sprites/sprite.png");
  background-position: -74px -37px;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .facebook {
    width: 64px;
    height: 64px;
    background-image: url("resources/front/images/sprites/sprite@2x.png");
    background-position: -74px -74px;
  }
  .google-plus {
    width: 64px;
    height: 64px;
    background-image: url("resources/front/images/sprites/sprite@2x.png");
    background-position: -148px 0px;
  }
  .twitter {
    width: 64px;
    height: 64px;
    background-image: url("resources/front/images/sprites/sprite@2x.png");
    background-position: -148px -74px;
  }
}

output:

.facebook {width:32px; height:32px; background-image:url('resources/front/images/sprites/sprite.png'); background-position:-37px -37px;}
.google-plus {width:32px; height:32px; background-image:url('resources/front/images/sprites/sprite.png'); background-position:-74px 0;}
.twitter {width:32px; height:32px; background-image:url('resources/front/images/sprites/sprite.png'); background-position:-74px -37px;}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {.facebook {width:64px; height:64px; background-image:url('resources/front/images/sprites/sprite@2x.png'); background-position:-74px -74px;}
    .google-plus {width:64px; height:64px; background-image:url('resources/front/images/sprites/sprite@2x.png'); background-position:-148px 0;}
    .twitter {width:64px; height:64px; background-image:url('resources/front/images/sprites/sprite@2x.png'); background-position:-148px -74px;}}

and what I expect to have:

.facebook {width:32px; height:32px; background-image:url('resources/front/images/sprites/sprite.png'); background-position:-37px -37px;}
.google-plus {width:32px; height:32px; background-image:url('resources/front/images/sprites/sprite.png'); background-position:-74px 0;}
.twitter {width:32px; height:32px; background-image:url('resources/front/images/sprites/sprite.png'); background-position:-74px -37px;}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .facebook {width:64px; height:64px; background-image:url('resources/front/images/sprites/sprite@2x.png'); background-position:-74px -74px;}
    .google-plus {width:64px; height:64px; background-image:url('resources/front/images/sprites/sprite@2x.png'); background-position:-148px 0;}
    .twitter {width:64px; height:64px; background-image:url('resources/front/images/sprites/sprite@2x.png'); background-position:-148px -74px;}
}

Seems that the @media query is treated in the same manner as the style declarations: configuration values like space-after-opening-brace are being applied to both of them. Is there a way to keep at rules stay multiline, while each of the nested blocks are wrapped into single line? (If not, may I request this?)