CSScomb実行時に特定のcssでエラーになる。

Question

cssファイルをCSScombを使用して整形しようと考えており、
以下のjsでCSSを整形するようにしていますが、以下のエラーが返ってきて処理が止まってしまいます。

"Please check validity of the block starting from line #8CSScomb Core version: 4.2.0"

調べてみたところ、CSSの構文エラーでCSSファイルの8行目のcalc内のアスタリスクが原因のようです。
恐らくコメントアウト（/* /）の関係でアスタリスクがエラーになっているのかと思うのですが、
個人的にはそもそもcalc内で「」を使用することは構文エラーには当たらないのではないかと考えています。
何とかCSSファイルの方は変更を加えずにCSScombを実行することはできないでしょうか。

ちなみに、処理をする対象がscssファイルの場合にはエラーは発生しませんでした。

よろしくお願いします。

ソースコード

const fs = require ('fs-extra');
const csscomb = require ('csscomb');

fs.readFile('./css/style.css', 'utf8', (error, text) => {
  const comb = new csscomb();
  const content = comb.processString(text)
    .then((data) => {
      console.log(data);
    },
    (error) => {
      console.log(error);
    });
});

@charset "utf-8";

#wrapper {
  height: 500px;
  background-color: #0ff;
}
#wrapper #main {
  width: calc(20% * 2);
  height: 300px;
  background-color: #00f;
}
.text {
  color: #fff;
}
@media screen and (max-width: 767px) {
  .box {
    background-color: #ff0;
  }
  .box .text {
    color: #000;
    font-size: 1.8rem;
  }
}

環境

node.js v8.11.4
csscomb v4.2.0
fs-extra v7.0.0

Answer 1

まずは、質問者さんと同じ現象がこちらの環境でも発生するかを確かめます。

今回、以下のようなディレクトリ構成で、

node_test
├ css
│ └ style.css
├ index.js
└ package.json

package.jsonは以下のようにしました。

{
  "name": "node_test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "csscomb": "^4.2.0",
    "fs-extra": "^7.0.0"
  }
}

ここで、style.cssとindex.jsには既に、質問文に記述されているものと同じコードが書かれています。

この状態で、node index.jsを実行すると、以下のようにエラーが発生します。

$ node index.js
{ line: 17,
  syntax: 'css',
  css_: (省略)
  customMessage_:
   'Please check validity of the block starting from line #17\r\nCSScomb Core version: 4.2.0',
  stack:
   'Please check validity of the block starting from line #17\r\nCSScomb Core version: 4.2.0' }

無事、質問文のエラーが再現できました。ここで、何が問題かを考えてみると、正常にCSSのパースが行えていないことが問題だと考えることができます。

そのため、csscombの依存パッケージの中で、CSSのパースに関わってきそうなパッケージを探します。
すると、gonzales-peというCSSパーサのパッケージが見つかりました。

このgonzales-peのリポジトリを見てみると、インストールされたgonzales-peは最新版ではないようです。

とりあえずこれを最新版にアップデートしてみましょう。
node_modules/csscomb/package.jsonのdependenciesを以下のように修正し、npm up -S --depth=99999を実行します。

"dependencies": {
  "babel-polyfill": "6.23.0",
  "glob": "latest",
  "gonzales-pe": "^4.2.0", // 修正
  "minimatch": "3.0.2",
  "minimist": "1.1.x",
  "vow": "0.4.4",
  "vow-fs": "0.3.6"
}

そして、もう一度index.jsを実行すると、エラーが出力されず、正常にCSSがパースされるようになったとわかります。

$ node index.js
@charset "utf-8";

#wrapper {
    height: 500px;
    background-color: #0ff;
}

#wrapper #main {
    width: calc(20% * 2);
    height: 300px;
    background-color: #00f;
}

.text {
    color: #fff;
}

@media screen and (max-width: 767px) {
    .box {
        background-color: #ff0;
    }

    .box .text {
        color: #000;
        font-size: 1.8rem;
    }
}

さて、一応これで応急処置の方法はわかりました。
しかしこのバグは、今後修正される可能性が低いでしょう。なぜなら、csscombはかなりの期間メンテナンスされていないからです。そのため、もしcsscombを使い続ける理由がなければ、他の代替パッケージを探すことをお勧めします。

Comments

[退会済みユーザー]

ご回答いただいた方法でパッケージをアップデートしたところ、こちらでも正常にパースされるようになりました。
とはいえ、特にcsscombにこだわる理由があるわけではないので、とりあえず別の代替のパッケージを探してみようと思います。
ありがとうございました。