decafjsを使ってappend-cssをアップデートしました
npmにappend-css
というパッケージを公開していたのですが、公開して以来ずっと触っていませんでした。
たまたまこのライブラリを使えそうな場面があったので、久しぶりにrequire('append-css')
してみたら、自分が作ったと思っていたものと随分設計が違くてびっくりしてしまった。
しかもcoffeeだし。
良い機会なので、今使いたいと思っている(自分がかつてそのように作ったと勘違いしていた)設計に書き直した。
decafjs
ライブラリ本体はものすごく小さいのでES2015でまるっと書き直せばよかったけど、テストコードは流用できそうな部分が多かったので、coffee -> ES2015の変換にdecafjsを使ってみた。
使い方は変換したいcoffeeのソースがあるフォルダを指定するだけ。
$ npm install decafjs -g $ decaf coffee-folder
変換後のコードは基本的に手直しが必要だけど、単純な変換作業は全てお任せできる感じでした。
append-css
HTMLのhead内に<style></style>
要素を追加して、新しくCSSルールを定義することができます。
<style></style>
要素に対する操作をラップしてくれます。
const AppendCss = require('append-css'); // CSSルールの追加 let appendedRules = new AppendCss(` body { background: black; } `); // ルールの無効化 appendedRules.disable(); // ルールの変更 appendedRules.textContent = ` body { width: 100%; } `; // ルールの有効化 appendedRules.enable(); // ルールの無効化と<style></style>要素の破棄 appendedRules.dispose();
prepend
<style></style>
をhead要素の先頭に追加する、prependオプションもあります。
let prependedRules = new AppendChild('body { width: 100%; }', { prepend: true });
insert-css
browserify
で有名なsubstack製のinsert-css
というライブラリがある。
npmのページを見る限り、append-css
は少ないながらもちょびちょびダウンロードされているらしかった。
もしかしたらというか多分ほぼ確実に上述のinsert-css
と間違えてる人がいるだろう。
以前append-css
を始めて公開した時はまだこのinsert-css
の存在を知らず、公開した直後に知った。
だから本当に誓って最初から間違いを狙って作ったわけではない、という言い訳をしてこのエントリーを終わりたいと思います。