Grunt.jsでCSSの整形を行うgrunt-cssprettyを公開

公開

一昨日実験を行ったCSSプリプロセッサやポストプロセッサで出力されたCSSの整形をGrunt.jsで実行できるプラグイン、grunt-cssprettyを作成しましたので本日公開いたします。

grunt-cssprettyプラグインを実行した画面

使用方法

npm install --save-dev grunt-cssprettyを実行し、プラグインをインストールします。その後、gruntfile.jsやgruntfile.coffeeにて設定を行います。

オプション解説

以下のオプションが設定可能です。変更が必要なオプションのみ記載して下さい。記述がないオプションは、srcで指定されたCSSファイルのフォーマットでそのまま出力されます（そのため、ほぼ全てのプロパティに初期値を指定していません）。

なお、''は改行も空白も入れないことを意味しますので注意して下さい。

decl.before

型
String
初期値
なし

CSSプロパティ名の前に入る文字列を指定します。

decl.between

型
String
初期値
なし

CSSプロパティ名と値の間に入る文字列を指定します。

rule.before

型
String
初期値
なし

セレクタの前に入る文字列を指定します。

rule.between

型
String
初期値
なし

{の前に入る文字列を指定します。

rule.after

型
String
初期値
なし

}の前に入る文字列を指定します。

atRule.before

型
String
初期値
なし

@media等の@の前に入る文字列を指定します。

atRule.between

型
String
初期値
なし

@規則の始めの{の前に入る文字列を指定します。

atRule.after

型
String
初期値
なし

@規則の終わりの}の前に入る文字列を指定します。

atRule.indent

型
String
初期値
なし

@規則内のインデント文字列を指定します。なお、これはpostcssのプロパティとしては存在しません。

selectors

型
String
初期値
sameline

複数のセレクタを列挙する方法を指定します。sameline（一行で列挙する）またはseparateline（1セレクタ毎に改行する）のいずれかを指定します。

map

型
Boolean
初期値
false

ソースマップを出力する場合はtrueを指定します。Sassなどで出力したソースマップがある場合は、そのソースマップが編集されます。

gruntfileサンプル

単一ファイルを整形

destを指定していないので、元ファイルを上書きします。

grunt.initConfig({
  csspretty: {
    dist: {
      options: {
        decl: {
          before: '\n',
          between: ':',
        },
        rule: {
          before: '\n\n',
          between: '',
          after: '\n',
        },
        atRule: {
          before: '\n\n',
          between: '',
          after: '\n\n',
        },
        selectors: 'separateline',
      },
      src: 'htdocs/common/css/sass.css',
    }
  }
});

grunt.loadNpmTasks('grunt-csspretty');

CSSは下記のように整形されます。

p,
ul{
margin-bottom:1em;
}

.lyt-column .unit{
float:left;
margin-right:20px;
}

.lyt-column .unit.last-unit{
margin-right:0;
}

複数ファイルを一括整形

destを指定しているので、別ディレクトリに出力します。

grunt.initConfig({
  csspretty: {
    dist: {
      options: {
        decl: {
          before: '\n    ',
        },
        rule: {
        },
        atRule: {
          indent: '    ',
        },
      },
      expand: true,
      cwd: 'test/fixtures',
      src: '*.css',
      dest: 'tmp',
    }
  }
});

CSSは下記のように整形されます。

p, ul {
    margin-bottom: 1em;
}

.lyt-column .unit {
    float: left;
    margin-right: 20px;
}
.lyt-column .unit.last-unit {
    margin-right: 0;
}

@media print {
    nav, .list-link-01 {
        display: none;
    }
    body {
        background-color: #fff;
    }
}

使用上のヒント

  • Sassのexpandedのようなスタイルで出力したものをベースにすると、整形しやすいと思います。

オプション設定例

元のCSSはSassのexpandedで出力したもの（下記）とします。

p,
ul {
  margin-bottom: 1em;
}

.lyt-column .unit {
  float: left;
  margin-right: 20px;
}
.lyt-column .unit.last-unit {
  margin-right: 0;
}
スペース・インデント無し
options: {
  decl: {
    before: '\n',
    between: ':',
  },
  rule: {
    before: '\n\n',
    between: '',
    after: '\n',
  },
  atRule: {
    before: '\n\n',
    between: '',
    after: '\n\n',
  }
}
インデントをタブに変更
options: {
  decl: {
    before: '\n\t'
  }
}

今後

  • Source Mapsへの対応を検討中です。→v0.3.0にて対応しました（2014年2月19日）。