年度末のお仕事をしながら、ここ一年ですっかり効率が落ちてしまった、コーディングの見直しをしています。
昨年からずっとSass+Compass+JSの処理にGruntを使っているわけですが、「grunt-combine-media-queries(cmq)」の挙動で気に入らない点がありました。

cmqは、CSSファイル内でバラバラになっているメディアクエリを、同じ条件ごとにファイル末尾にまとめてくれるタスクパッケージですが、これで整形したあとのCSSファイルは、Sassの設定でcompressed(圧縮)を選択していてもCSSが展開され、さらにインデントが「タブ」になってしまいます。

このあとでさらに「grunt-contrib-cssmin」を通して圧縮すれば、CSSが展開される問題は解決できます。
ですが、制作会社に納品する場合はCSSを圧縮せずに引渡すことが多く、CSSファイルだけタブになっているのがやたら気になっていました(どうでもいいことなんですけどね)。

パッケージの中をのぞいて、修正をしてみました。

プロジェクト内の、以下のファイルを探してエディタで開きます。

/node_modules/grunt-combine-media-queries/tasks/combine-media-queries.js

53行目あたりに、以下の記述があります。

    // Check declarations type
    var commentOrDeclaration = function(declarations) {
      var strCss = '';
      if(declarations.type === 'declaration'){
        strCss += 'nt' + processDeclaration(declarations);
      } else if(declarations.type === 'comment'){
        strCss += ' ' + processComment(declarations);
      }
      return strCss;
    };

56行目の「nt」は「改行+タブ」です。ここがインデントの出力を行っている箇所のようです。
よろしくないですが、以下のように強引に書き直します(突っ込み待ちです)。

    // Check declarations type
    var commentOrDeclaration = function(declarations) {
      var strCss = '';
//      if(declarations.type === 'declaration'){
//        strCss += 'nt' + processDeclaration(declarations);
//      } else if(declarations.type === 'comment'){
//        strCss += ' ' + processComment(declarations);
//      }
      strCss += 'n  ' + processDeclaration(declarations);
      if(declarations.type === 'comment'){
        strCss += ' ' + processComment(declarations);
      }
      return strCss;
    };

以降はgruntを起動すると、タブがインデント2個に変わります。
バージョン1.0.19で動作を確認しています。

この記事を書いた人

うぇびん

愛知県豊橋市に住んでいる、荒ぶるウェブおばさん。WordPressをはじめとした各種CMSを研究するのが好き。札幌のIT企業のビットスター株式会社に所属しています。