-
-
Save thebugs/977813e0040a4145cf9d to your computer and use it in GitHub Desktop.
module.exports = { | |
name: 'rules-delimiter', | |
syntax: ['scss'], | |
runBefore: "strip-spaces", | |
setValue: function(value) { | |
if (typeof value === 'number') { | |
value = Array(value + 2).join('\n'); | |
} | |
return value; | |
}, | |
process: function(nodeType, node) { | |
var value = this.getValue('rules-delimiter'), | |
currentNode, | |
previousNode; | |
for(var i = node.length; i--;) { | |
currentNode = node[i]; | |
previousNode = node[i - 1]; | |
if(currentNode[0] === 'ruleset' && previousNode) { | |
if(previousNode[0] === 's') { | |
if (node[i - 2] && (node[i - 2][0] === 'commentSL' || node[i - 2][0] === 'commentML')) continue; | |
node[i - 1][1] = previousNode[1].replace(/\n*/, value); | |
} | |
} | |
} | |
} | |
}; |
Fixed additional empty spaces between root selectors every time CSSComb is run
This is not working for me.
I created a rules-delimiter.js
file in csscomb/3.0.2/package/lib/options
and copy and pasted the gist.
I tried "rules-delimiter": "\n",
and "rules-delimiter": true,
in my .csscomb.json file.
Although csscomb runs successfully, there is no line break inserted before psuedo element.
Any help? What am I doing wrong?
@middle8media Try "rules-delimiter": 1,
or however many lines you'd like.
Thanks for this gist! This is an amazing help to my development!
+1 awesome solution. Thank you!
Thank you for your work, your solution does almost everything I need except adding new lines around @includes that are directly followed by {...} like these
@include breakpoint($breakpoint_small_desktop) {
padding-top: 1.25rem;
padding-bottom: 1.25rem;
}
I have tried hacking around the gonzales-pe portion of css-comb to make this work, but now my head hurts. There is actually the correct case for the @include rule implemented for this in gonzales-pe, I would just need to make a separate rule for this isolating this case from the include one-liners. Could you help me out on this?
Being able to "comb" multi-line @include rules like the one above differently from @include one-liners or @extends etc. would be amazing
OK I have found a terribly hacky solution for this:
if((currentNode[0] === 'ruleset' || currentNode[0] === 'include') && previousNode) {
if(currentNode.toString().indexOf("block") > -1){
if(previousNode[0] === 's') {
if (node[i - 2] && (node[i - 2][0] === 'commentSL' || node[i - 2][0] === 'commentML')) continue;
node[i - 1][1] = previousNode[1].replace(/\n*/, value);
}
}
}
It does the trick but obviously, it isn't pretty. I have asked a question regarding adding a separate rule for @include blocks in the gonzales-pe repository as well.
Edit: If somebody else is wondering about this, Tony has kindly shown the non-hackish way to do this here: tonyganch/gonzales-pe#52 (comment)
Thanks for your awesome workaround.
I'm almost happy with this, except one tiny issue:
BEFORE
h3
{
@include font-size(14);
line-height: 1.2em;
position: relative;
clear: both;
text-transform: uppercase;
@media #{$medium-up}
{
@include font-size(22);
float: right;
margin-top: 25px;
text-align: right;
}
@media #{$large-up}
{
@include font-size(30);
}
}
AFTER
h3
{
@include font-size(14);
line-height: 1.2em;
position: relative;
clear: both;
text-transform: uppercase;
@media #{$medium-up}
{
@include font-size(22);
float: right;
margin-top: 25px;
text-align: right;
}
@media #{$large-up}
{
@include font-size(30);
}
}
Any solution for this one?
This creates additional empty spaces between root selectors every time CSSComb is run.
This:
Becomes this:
Becomes this: