gulpでcssのブロック内の空白行を消したい

Question

gulp-sassを使ってscssをcssにコンパイルしているのですが、表題の通りcssでブロック内の空白行を消す方法がわからず難儀しています。

フォーマッタを使えば消すことができると思っていたのですが、どうも望んだ機能を持ったフォーマッタを見つけることができません。

p {
  background: pink;
  color: red;
// 消したい空白行
  box-sizing: 5px;
  -webkit-border-radius: 5px;
}
// 消したくない空白行
p span {
  background: skyblue;
  color: blue;
}

上記の例ではpタグに対するスタイル指定に空白行が入っており、これを消したいです。
しかしフォーマッタを使って上記の行を削除できたとしても、pとp spanの間の// 消したくない空白行まで消してしまうフォーマッタしか見つかりませんでした。
（あるいは設定次第では可能なのかもしれませんが…）

つまり、ブロック間の空白行は保ちつつ、ブロック内の空白行を削除してくれるフォーマッタ（あるいは似たような機能を持つパッケージ等）やその設定方法を教えていただきたいです。

※ちなみに上記の消したい空白行はgulp-autoprefixerのコメント/* autoprefixer: ignore next */をgulp-replaceを使って削除した名残です。コンパイルしたファイルにコメントを含めないよう削除した結果、空白行ができてしまいました。

Answer 1

手軽な方法としては、 gulp-stylelint の fix オプションを指定する方法があります。

たとえば、以下のようなディレクトリ構成で、

sample
├ scss
│ ├ style.scss
│ └ _mixins.scss
├ package.json
└ .stylelintrc

package.json, gulpfile.js が以下のように、

{
  "name": "sample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^9.7.3",
    "gulp": "^4.0.2",
    "gulp-postcss": "^8.0.0",
    "gulp-sass": "^4.0.2",
    "gulp-strip-css-comments": "^2.0.0",
    "gulp-stylelint": "^10.0.0",
    "stylelint": "^12.0.0"
  }
}

exports.default = function () {
  const autoprefixer = require('autoprefixer');
  const gulp = require('gulp');
  const sass = require('gulp-sass');
  const postcss = require('gulp-postcss');
  const stripCssComments = require('gulp-strip-css-comments');
  const gulpStylelint = require('gulp-stylelint');
  return gulp.src('./scss/style.scss')
    .pipe(sass({outputStyle: "expanded"}))
    .pipe(postcss([ autoprefixer() ]))
    .pipe(stripCssComments())
    .pipe(gulpStylelint({ fix: true }))
    .pipe(gulp.dest('./dest'))
};

.stylelintrc が以下のように、

{
  "rules": {
    "max-empty-lines": 1,
    "declaration-empty-line-before": "never",
    "block-closing-brace-empty-line-before": "never"
  }
}

各 SCSS ファイルが以下のようになっているとします。

style.scss

@import "mixins";

.box { @include transform(rotate(30deg)); }

/* This CSS will print because %message-shared is extended. */
%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

// This CSS won't print because %equal-heights is never extended.
%equal-heights {
  display: flex;
  flex-wrap: wrap;
}

.message {
  @extend %message-shared;
}

.success {
  @extend %message-shared;
  border-color: green;
}

.error {
  @extend %message-shared;
  border-color: red;
}

.warning {
  @extend %message-shared;
  border-color: yellow;
}

_mixins.scss

@mixin transform($property) {
  /* autoprefixer: ignore next */
  box-sizing: border-box;
  transform: $property;
}

ここで default タスクを実行すると、出力される CSS ファイルは以下のようになり、コメントがあった空白行が削除されていることが確認出来ます。

.box {
  box-sizing: border-box;
  -webkit-transform: rotate(30deg);
          transform: rotate(30deg);
}

.message, .success, .error, .warning {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}

Comments

[Samonasu]

gulp-stylelintはまだ試してませんでした。
お答えいただいた通りのパッケージ構成でscssをビルドすると望んだ通りの結果になりました！
ありがとうございます！