Skip to content

Commit ca6d25e

Browse files
hudochenkovhudochenkov
committed
Add empty-lines-before-comment and empty-lines-after-comment 
1 parent 86be8ea commit ca6d25e

7 files changed

+261
-0
lines changed

‎README.md

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,8 @@ Also available as [Sublime Text plugin], [Atom plugin], and [VS Code plugin].
3030
* [`empty-lines-between-children-rules`](#empty-lines-between-children-rules)
3131
* [`empty-lines-between-media-rules`](#empty-lines-between-media-rules)
3232
* [`preserve-empty-lines-between-children-rules`](#preserve-empty-lines-between-children-rules)
33+
* [`empty-lines-before-comment`](#empty-lines-before-comment)
34+
* [`empty-lines-after-comment`](#empty-lines-after-comment)
3335
* [Migration from CSSComb](#migration-from-csscomb)
3436
* [Usage](#usage)
3537
* [Text editor](#text-editor)
@@ -378,6 +380,130 @@ Example: `{ "preserve-empty-lines-between-children-rules": true }`
378380
}
379381
```
380382

383+
### `empty-lines-before-comment`
384+
385+
Set a number of empty lines before comment or comments group, which on separate lines. By default, there are no empty lines before comment.
386+
387+
Acceptable value: `{Number}` of empty lines
388+
389+
Example: `{ "empty-lines-before-comment": 2, "sort-order": [ "..." ] }`
390+
391+
```scss
392+
/* before */
393+
.hello {
394+
display: inline-block;
395+
/* upline comment 1 */
396+
/* upline comment 2 */
397+
font-style: italic;
398+
border-bottom: 1px solid red; /* trololo 1 */ /* trololo 2 */
399+
/* arrow */
400+
&:before {
401+
/* yeah */
402+
content: "";
403+
}
404+
/* thing */
405+
&:after {
406+
/* joy */
407+
display: none;
408+
}
409+
&__element {
410+
/* sdfsf */
411+
}
412+
}
413+
414+
/* after */
415+
.hello {
416+
display: inline-block;
417+
418+
419+
/* upline comment 1 */
420+
/* upline comment 2 */
421+
font-style: italic;
422+
border-bottom: 1px solid red; /* trololo 1 */ /* trololo 2 */
423+
424+
425+
/* arrow */
426+
&:before {
427+
/* yeah */
428+
content: "";
429+
}
430+
431+
432+
/* thing */
433+
&:after {
434+
/* joy */
435+
display: none;
436+
}
437+
&__element {
438+
/* sdfsf */
439+
}
440+
}
441+
```
442+
443+
### `empty-lines-after-comment`
444+
445+
Set a number of empty lines after comment or comments group, which on separate lines. By default, there are no empty lines after comment.
446+
447+
Acceptable value: `{Number}` of empty lines
448+
449+
Example: `{ "empty-lines-after-comment": 2, "sort-order": [ "..." ] }`
450+
451+
```scss
452+
/* before */
453+
.hello {
454+
display: inline-block;
455+
/* upline comment 1 */
456+
/* upline comment 2 */
457+
font-style: italic;
458+
border-bottom: 1px solid red; /* trololo 1 */ /* trololo 2 */
459+
/* arrow */
460+
&:before {
461+
/* yeah */
462+
content: "";
463+
}
464+
/* thing */
465+
&:after {
466+
/* joy */
467+
display: none;
468+
}
469+
&__element {
470+
/* sdfsf */
471+
}
472+
}
473+
474+
/* after */
475+
.hello {
476+
display: inline-block;
477+
/* upline comment 1 */
478+
/* upline comment 2 */
479+
480+
481+
font-style: italic;
482+
border-bottom: 1px solid red; /* trololo 1 */ /* trololo 2 */
483+
/* arrow */
484+
485+
486+
&:before {
487+
/* yeah */
488+
489+
490+
content: "";
491+
}
492+
/* thing */
493+
494+
495+
&:after {
496+
/* joy */
497+
498+
499+
display: none;
500+
}
501+
&__element {
502+
/* sdfsf */
503+
}
504+
}
505+
```
506+
381507
### Migration from CSSComb
382508

383509
If you used to use custom sorting order in [CSSComb] you can easily use this sorting order in PostCSS Sorting. `sort-order` option in this plugin is compatible with `sort-order` in CSSComb. Just copy `sort-order` value from CSSComb config to PostCSS Sorting config.

‎index.js

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@ function verifyOptions(options) {
1111
options['empty-lines-between-children-rules'] = options['empty-lines-between-children-rules'] || 0;
1212
options['empty-lines-between-media-rules'] = options['empty-lines-between-media-rules'] || 0;
1313
options['preserve-empty-lines-between-children-rules'] = options['preserve-empty-lines-between-children-rules'] || false;
14+
options['empty-lines-before-comment'] = options['empty-lines-before-comment'] || 0;
15+
options['empty-lines-after-comment'] = options['empty-lines-after-comment'] || 0;
1416

1517
return options;
1618
}
@@ -217,6 +219,8 @@ module.exports = postcss.plugin('postcss-sorting', function (opts) {
217219
var linesBetweenChildrenRules = getLinesBetweenRulesFromOptions('children', opts);
218220
var linesBetweenMediaRules = getLinesBetweenRulesFromOptions('media', opts);
219221
var preserveLinesBetweenChildren = opts['preserve-empty-lines-between-children-rules'];
222+
var linesBeforeComment = opts['empty-lines-before-comment'];
223+
var linesAfterComment = opts['empty-lines-after-comment'];
220224

221225
css.walk(function (rule) {
222226
// Process only rules and atrules with nodes
@@ -330,6 +334,28 @@ module.exports = postcss.plugin('postcss-sorting', function (opts) {
330334
applicableNode.raws.before = createLineBreaks(linesBetweenMediaRules - countEmptyLines(applicableNode.raws.before)) + applicableNode.raws.before;
331335
}
332336
}
337+
338+
// Insert empty lines before comment
339+
if (
340+
linesBeforeComment &&
341+
node.type === 'comment' &&
342+
(prevNode.type !== 'comment' || prevNode.raws.before.indexOf('\n') === -1) && // prevNode it's not a comment or it's an inline comment
343+
node.raws.before.indexOf('\n') >= 0 && // this isn't an inline comment
344+
countEmptyLines(node.raws.before) < linesBeforeComment
345+
) {
346+
node.raws.before = createLineBreaks(linesBeforeComment - countEmptyLines(node.raws.before)) + node.raws.before;
347+
}
348+
349+
// Insert empty lines after comment
350+
if (
351+
linesAfterComment &&
352+
node.type !== 'comment' &&
353+
prevNode.type === 'comment' &&
354+
prevNode.raws.before.indexOf('\n') >= 0 && // this isn't an inline comment
355+
countEmptyLines(node.raws.before) < linesAfterComment
356+
) {
357+
node.raws.before = createLineBreaks(linesAfterComment - countEmptyLines(node.raws.before)) + node.raws.before;
358+
}
333359
}
334360
});
335361
}

‎test/fixtures/empty-lines-after-comment.css

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
.hello {
2+
display: inline-block;
3+
/* upline comment 1 */
4+
/* upline comment 2 */
5+
font-style: italic;
6+
border-bottom: 1px solid red; /* trololo 1 */ /* trololo 2 */
7+
/* arrow */
8+
&:before {
9+
/* yeah */
10+
content: "";
11+
}
12+
/* thing */
13+
&:after {
14+
/* joy */
15+
display: none;
16+
}
17+
&__element {
18+
/* sdfsf */
19+
}
20+
}

‎test/fixtures/empty-lines-after-comment.expected.css

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
.hello {
2+
display: inline-block;
3+
border-bottom: 1px solid red; /* trololo 1 */ /* trololo 2 */
4+
/* upline comment 1 */
5+
/* upline comment 2 */
6+
7+
8+
font-style: italic;
9+
10+
/* arrow */
11+
12+
13+
&:before {
14+
/* yeah */
15+
16+
17+
content: "";
18+
}
19+
/* thing */
20+
21+
22+
&:after {
23+
/* joy */
24+
25+
26+
display: none;
27+
}
28+
&__element {
29+
/* sdfsf */
30+
}
31+
}

‎test/fixtures/empty-lines-before-comment.css

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
.hello {
2+
display: inline-block;
3+
/* upline comment 1 */
4+
/* upline comment 2 */
5+
font-style: italic;
6+
border-bottom: 1px solid red; /* trololo 1 */ /* trololo 2 */
7+
/* arrow */
8+
&:before {
9+
/* yeah */
10+
content: "";
11+
}
12+
/* thing */
13+
&:after {
14+
/* joy */
15+
display: none;
16+
}
17+
&__element {
18+
/* sdfsf */
19+
}
20+
}

‎test/fixtures/empty-lines-before-comment.expected.css

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
.hello {
2+
display: inline-block;
3+
border-bottom: 1px solid red; /* trololo 1 */ /* trololo 2 */
4+
5+
6+
/* upline comment 1 */
7+
/* upline comment 2 */
8+
font-style: italic;
9+
10+
11+
/* arrow */
12+
&:before {
13+
/* yeah */
14+
content: "";
15+
}
16+
17+
18+
/* thing */
19+
&:after {
20+
/* joy */
21+
display: none;
22+
}
23+
&__element {
24+
/* sdfsf */
25+
}
26+
}

‎test/test.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -258,6 +258,18 @@ test('Should not fail if getApplicableNode() receive no node. Issue #21', t => {
258258
});
259259
});
260260

261+
test('Should add empty lines before comment', t => {
262+
return run(t, 'empty-lines-before-comment', {
263+
'empty-lines-before-comment': 2
264+
});
265+
});
266+
267+
test('Should add empty lines after comment', t => {
268+
return run(t, 'empty-lines-after-comment', {
269+
'empty-lines-after-comment': 2
270+
});
271+
});
272+
261273
// test('Should sort LESS files', t => {
262274
// return run(t, 'less.less', {}, 'less');
263275
// });

0 commit comments

Comments
 (0)