decafjsを使ってappend-cssをアップデートしました

npmにappend-cssというパッケージを公開していたのですが、公開して以来ずっと触っていませんでした。

たまたまこのライブラリを使えそうな場面があったので、久しぶりにrequire('append-css')してみたら、自分が作ったと思っていたものと随分設計が違くてびっくりしてしまった。
しかもcoffeeだし。

良い機会なので、今使いたいと思っている（自分がかつてそのように作ったと勘違いしていた）設計に書き直した。

decafjs

ライブラリ本体はものすごく小さいのでES2015でまるっと書き直せばよかったけど、テストコードは流用できそうな部分が多かったので、coffee -> ES2015の変換にdecafjsを使ってみた。

www.npmjs.com

使い方は変換したいcoffeeのソースがあるフォルダを指定するだけ。

$ npm install decafjs -g
$ decaf coffee-folder

変換後のコードは基本的に手直しが必要だけど、単純な変換作業は全てお任せできる感じでした。

append-css

HTMLのhead内に<style></style>要素を追加して、新しくCSSルールを定義することができます。
<style></style>要素に対する操作をラップしてくれます。

www.npmjs.com

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というライブラリがある。

www.npmjs.com

npmのページを見る限り、append-cssは少ないながらもちょびちょびダウンロードされているらしかった。
もしかしたらというか多分ほぼ確実に上述のinsert-cssと間違えてる人がいるだろう。

以前append-cssを始めて公開した時はまだこのinsert-cssの存在を知らず、公開した直後に知った。
だから本当に誓って最初から間違いを狙って作ったわけではない、という言い訳をしてこのエントリーを終わりたいと思います。