csscomb.js
csscomb.js copied to clipboard
Wrap declarations but not wrap at rules
trafficstars
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/[email protected]");
background-position: -74px -74px;
}
.google-plus {
width: 64px;
height: 64px;
background-image: url("resources/front/images/sprites/[email protected]");
background-position: -148px 0px;
}
.twitter {
width: 64px;
height: 64px;
background-image: url("resources/front/images/sprites/[email protected]");
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/[email protected]'); background-position:-74px -74px;}
.google-plus {width:64px; height:64px; background-image:url('resources/front/images/sprites/[email protected]'); background-position:-148px 0;}
.twitter {width:64px; height:64px; background-image:url('resources/front/images/sprites/[email protected]'); 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/[email protected]'); background-position:-74px -74px;}
.google-plus {width:64px; height:64px; background-image:url('resources/front/images/sprites/[email protected]'); background-position:-148px 0;}
.twitter {width:64px; height:64px; background-image:url('resources/front/images/sprites/[email protected]'); 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?)