Web技術寄りな雑記Blog開発フロントエンドCSSStylusVSCode2020-01-14StylusをlintとformatでSupremacyにしようCSSメタ言語(CSSプリプロセッサ)といえばSass(SCSS)がデファクトスタンダードですが、個人的にはStylusが大好きです。Stylusは高機能であると同時に記法に自由度があるのが良くもあり、逆に言えばカオスを作りやすいです。そんなStylusにlinterとformatterを用いて秩序を持ちこみSupremacy(至高)にしようというお話です。#前述のとおりLessやSassと同じようなCSSプリプロセッサです。SCSSより後発なため、LessとSassと良いとこどりと言われるように、高機能かつ自由度が高いのが特徴です。preprocessorhttp://stylus-lang.com/SCSSのように{}で書くこともできれば、SASSのようにインデントベースで書くこともできます。プロパティの:や行末の;も書かなくても扱えます(書いてもよい)。特徴的なのが透過的mixinと呼ばれる拡張機能です。他のプリプロセッサのように呼び出しに記号が必要ないためあたかもCSSプロパティの1つのように書くことができます。変数にも記号が必要ないのでこれも透過的に設定してくことができます。組み込み関数も豊富で特になにも入れずに色の計算や合成も楽にこなせます。#個人的にはインデントベースに書けるのが魅力的です。なると行末を示す;は必要ないはず。なると{}で囲む必要もありませんよね。必要ないものを極力排除すると、ノイズが減り、本質が見やすくなります。同時にミスも減ります。個人のクセが排除され誰が書いても同じになってきます。これは共同作業をするうえで重要だと考えています。透過的mixinは書いてて楽しいです。使いやすいプロパティライクな関数で設定していけるのはあたかもCSSを拡張してるようです。オレオレ関数を使いすぎるとカオスを生み出す原因になるのでほどほどに。透過的であるがゆえに、CSSの知識がないとそれが透過的mixinなのか、CSSプロパティなのか判別しにくくなってしまいます。importが生のCSSも読み込めるのも大きなポイントです。これによってCSSで提供されているライブラリなども自由に組み合わせていけます。#StylusにはStylintというlinterライブラリがあります。他のCSS用linterと同様に設定にそぐわない書き方を静的解析して検出します。rossPattonhttps://simenb.github.io/良くできて必要十分な機能を持ちますが、CSSやSCSS用のlinterであるStylelintと名前が紛らわしいのが難点です。あるlinterと同様に.stylintrcというファイルに設定を書いて適用できます。扱いに困ることは特にないでしょう。Supremacyというformatterも存在します。こちらもよくあるformatterと同様に静的解析し自動修正もできます。again!https://thisismanta.github.io/公式ページが良く書かれていて、各設定項目がどう違うかひと目でわかるのはもちろん、インタラクティブに設定を変えて変更した結果も見ることができます。Supremacy側で前述のStylintとの統合が図られ、.stylintrc内にSupremacy用の設定を書いて両方の設定を1ファイルで適用できます。両方の設定に従って自動修正が効きます。この両方を設定し効かせることで冒頭に言ったようにStylusの諸刃の剣でもある自由度の高い書き方に秩序を生み出し、弱点を克服することが可能になります。#一例として僕の使っている設定を記載しておきます。#前述のとおり、StylusはSCSS的な書き方もできればSASS的な書き方もできます。試しにSCSS的に書いたものを上記設定に基いて変換してみた例を紹介します。noneのようになります。SCSSに慣れすぎた人にとってはカッコがないとわかりにくのかもしれませんが、慣れです。シンタックスハイライトが効けば全然問題なくなるでしょう。#Vue.jsの単一ファイルコンポーネント(SFC)ではStylusも扱えます。VuePressなどオフィシャルに近いものでも実際に使われているほか、Vuesaxなどコンポーネントライブラリでも採用されています。残念ながらeslint-plugin-vueとprettierの関係のように完成されたエコシステムにはStylintもSupremacyも対応できておらずCLIだけでの自動修正は対応できていない現状です。いえ、打つ手がないわけではなくVSCodeのVeturという拡張にStyleがStylusの場合、Supremacyをかけることができます。エディタ依存になってしまうため、CIなどで制御することは難しいですが、それでも可能なことは喜ぶべきです。#僕はCSSプリプロセッサの中ではStylusが一番好きです。関数も書きやすいし、よりJSを書くような感じで書けるのが良いところです。前述のようにCSSやHTMLのようにエラーを明示せずに吸収してしまような場合、より明確にエラーになるインデントベースの記法が適していると思っています。(余談ですが、SCSSとSASSを選べるならSASSを選びます)とは言うものの、SCSSがすでに対応してるエコシステムに載っかることが難しく、だからこそシェアも伸びず、というなかなかツライ現状なのが正直なところです。それでもStylintやSupremacyを使えば、Stylusの弱点を克服し実用十分どころか高機能で書きやすいものへと引き上げてくれるでしょう。Stylus自体は使ったことがあっても、linterやformatterまで指定されているのをあまり見たことがないので言及してみました。一人でもStylus好きな人が増えますように。