01

GitHub Pagesでよくページを作ることがあるのだけれど、そのページで使うSassをstylelintでチェックする方法について。

GitHub PagesではJekyllが使用できる。JekyllにSassをコンパイルしてもらうためには、公式ドキュメントのAssetsのページにもあるように、ファイルの先頭に---を記述しないといけない。

一方でSassの記法としては---があるのは正しくないので、そのままstylelintに渡してしまうと余計なエラーが出力されてしまう。

このFront-matterを無視しつつSassをチェックするためのprocessorであるstylelint-processor-ignore-front-matterを作った。

使い方

モジュールをインストールする。

$ npm install stylelint-processor-ignore-front-matter

stylelintの設定を以下のように記述する。

{
  "processors": "stylelint-processor-ignore-front-matter"
}

_sass/front-matter.scssとして以下のファイルを保存する。

---
---
body {
  color: #333333;
}

stylelintでSassをチェックをする。（ここではルールとしてstylelint-config-standardを継承している）

$ ./node_modules/.bin/stylelint ./_sass/front-matter.scss

_sass/front-matter.scss
 4:10  ✖  Expected "#333333" to be "#333"   color-hex-length

ちなみに、processorを使用せずにSassをチェックすると以下のようにFront-matterのエラーが余計に出力される。

$ ./node_modules/.bin/stylelint ./_sass/front-matter.scss

_sass/front-matter.scss
 1:1   ✖  Unexpected unknown type selector "---"   selector-type-no-unknown
 1:4   ✖  Unexpected " "                           selector-descendant-combinator-no-non-space
 2:1   ✖  Unexpected unknown type selector "---"   selector-type-no-unknown
 2:4   ✖  Unexpected " "                           selector-descendant-combinator-no-non-space
 4:10  ✖  Expected "#333333" to be "#333"          color-hex-length