Node.js で動くコマンドラインツールを使用する。(for CSS)


テスト用CSS(styles.css)を用意

*, *::after, *::before {
  box-sizing: border-box;
  user-select: none;
}

.a {
  font-size: 2rem;
  width: calc(100% - 50px);
}

@media (min-width: 36em) {
  .a {
    color: red;
  }
}

csslint

概要:バリデーションツール

インストール

npm install -g csslint

実行

C:\works>csslint styles.css


csslint: There are 4 problems in C:\works\styles.css.

styles.css
1: warning at line 1, col 1
The universal selector (*) is known to be slow.
*, *::after, *::before {

styles.css
2: warning at line 1, col 4
The universal selector (*) is known to be slow.
*, *::after, *::before {

styles.css
3: warning at line 1, col 14
The universal selector (*) is known to be slow.
*, *::after, *::before {

styles.css
4: warning at line 2, col 3
The box-sizing property isn't supported in IE6 and IE7.
  box-sizing: border-box;

C:\works>

pleeease

概要:修正ツール(minifier オプションを false にして、差分を確認する。)

インストール

npm install -g pleeease-cli

設定ファイルの用意

echo {"minifier": false}> .pleeeaserc

実行

出力ファイルは、 styles.fixed.css

C:\works>pleeease compile styles.css -t styles.fixed.css
Pleeease Compile 1 file(s) [styles.css] to styles.fixed.css

C:\works>