csscombの設定について

Question

現在、gulpでsassとcsscombを利用しています。
そこでどうしてもつまづいたので相談させてください。

a {
	&:link    { color: #000; text-decoration: underline; }
	&:visited { color: #000; text-decoration: none; }
	&:hover   { color: #000; text-decoration: none; }
	&:active  { color: #000; text-decoration: none; }
}

これをコンパイルすると

a:link { color:#000; text-decoration:underline;}

a:visited { color:#000; text-decoration:none;}

a:hover { color:#000; text-decoration:none;}

a:active { color:#000; text-decoration:none;}

このように、改行が入ってしまいます。
これを以下のように「改行なし」にするにはどのような設定が必要でしょうか？

a:link { color:#000; text-decoration:underline;}
a:visited { color:#000; text-decoration:none;}
a:hover { color:#000; text-decoration:none;}
a:active { color:#000; text-decoration:none;}

↓使用している.csscomb.jsonです

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

Answer 1

うーん。
以前sass使ってたときこういうこと起こったことないのでほかに要因があるのかも知れませんが、いろいろ検証してみましょう。

１．
.csscomb.jsonの中の"eof-newline": trueをfalseにしてみましょう。

２．
１がダメならSCSSを見てみる。
これだとどうなります？
まるまるコピーして貼り付けてください。

a {
	color: #000;
	text-decoration: underline;
	&:hover, &:active, &:focus {
		text-decoration: none;
	}
}

３．
２ダメな場合、.csscomb.jsonの中を空にして影響を見てみましょう。
ファイルの中を{}だけにすればいい気がします。＜無論あとで戻すのでBKはとっておく

とりあえずこの3つを試してみてください。

Comments

[1000]

1,3についてはすでに試しましたがだめでした。３で明らかに変わるので、csscombが動いていないなどの基本的な問題はありません。
２に関しては、あくまで上記CSSは例なのでそれぞれのcssが共通とは限らないため目的と異なってしまいます。
いちばん関係ありそうな「eof-newline」ですが、trueでもfalseでも、記述ごと消しても表示に変わりはありませんでした。おかしいですね・・。

[gin]

2に関しては書き方を変更したらどうなるかを例として見てみたかっただけですね。
あとまるまるコピーというのは見えないところに全角スペースなどが入って悪さをしてたりする場合があるので、それ込みで。

でも3で違ってくるということであれば2は関係ないのかな…
全部消すと1行空くことはとりあえずなくなるんですかね？
ならば、1つ1つ消して試してみるのが確実かなと思います。
「\n」こういう値が入っているものがあればそれを優先的に。

というか、質問のほうに「.csscomb.json」を追記していただいてもよいですか？

[1000]

デフォルト状態では

a:link {
color: #000;
text-decoration: underline; }

a:visited {
color: #000;
text-decoration: none; }

a:hover {
color: #000;
text-decoration: none; }

a:active {
color: #000;
text-decoration: none; }

となるので、やはり１行空いてるようです。

.csscomb.jsonは追記します！

[gin]

デフォルトで空いているとなると「csscomb」ではなさそうですね。
「gulpfile.js」のsassの部分を見てみましょうか。
「gulp.task('sass', function(){～});」この「～」の部分はどうなってますでしょ？

[1000]

遅くなりました！

gulp.task('sass', function () {
return gulp.src(['resource/'+assetsDir+'sass/**/*.scss'])
.pipe(plumber({
errorHandler: notify.onError('Error: <%= error.message %>') // デスクトップに通知を出す
}))
.pipe(sass())
// .pipe(autoprefixer({ browsers: ['last 3 versions', 'Android 3', 'ie 9'] }))
.pipe(csscomb())
.pipe(gulp.dest('resource/'+assetsDir+'css/'))
});
です。

[1000]

あ、autoprefixerは今回不要なのでコメントアウトしてるので関係ないですね。

[gin]

特に変わったところはないですね…
んー、出力指定してみます？
.pipe(sass())→.pipe(sass({style : 'expanded'}))

「gulpfile.js」内で「newline」系で値が「true」になっているものがあれば「false」にしてみてください。
何かしらの改行が影響しているかもしれないので、それを検証してみましょう。

[1000]

>> .pipe(sass())→.pipe(sass({style : 'expanded'}))
こちらためしてみました、結果変わらずのようです。

>>「gulpfile.js」内で「newline」系で値が「true」になっているものがあれば「false」にしてみてください。
newlineの記述は無いようでした。

そもそも、eof-newlineが怪しいかと思ったのですが、実質動いていないような（結果が何も変わらない）感じなのですが、これって何なんでしょうね？？

[gin]

ほかにbeautifyなどの整形系を使用していてその影響が出てるかなーと思ったんですけど…うーん。
「eof-newline」は言葉通りに解釈すると複数のファイルを連結したときにファイルとファイルの間に改行が入るんだと思います。

で、ほかに手が思い浮かばないので環境を作って試してみました。
なるほど。確かに空行ができますね。
ですが、こうすると空行がなくなります。
---
a {
color: #000;
&:link { color: #000; text-decoration: underline; }
&:visited { color: #000; text-decoration: none; }
&:hover { color: #000; text-decoration: none; }
&:active { color: #000; text-decoration: none; }
}
---
結果から予想するに親に何も記述せず子だけだと1個1個独立しているものとして認識されて空行ができるのではないでしょうか。
親に何かの記述があるとその子にも影響がでるので、そこでまとまる感じですかね。

[1000]

すごい、盲点でした！
助かりましたありがとうございます！