chrome拡張とかでも、普段使っているcssフレームワークが使いたくなることがあります。
しかし大抵のcssフレームワークは、グローバルな名前空間でスタイルを宣言しています。そのまま導入すると、拡張機能のCSSが読み込まれてしまった結果、訪問したサイトの本来のスタイルを崩してしまうことでしょう。
もちろん拡張機能を特定のサイトでだけ動くようなポリシーにすれば防げます。しかし、NehanReaderのように、全てのサイトで使えるようにしている拡張機能も、たくさんあると思います。
そういう場合、フレームワークで宣言されている全てのセレクタに、強引に何かのプレフィックスを足してしまえば良いわけですが、手動でやるのは流石にキツイ、というか無理です。
だから「なんか良いツールないかなあ」と探して見つけたのがrework-mutate-selectorsです。
インストール
今回はgulpを使いたかったので、gulp-reworkも一緒に導入しました。
npm install rework npm install rework-mutate-selectors npm install gulp-rework
gulpやgulp-renameがない人は、先にインストールしておいて下さい。
使ってみる
var gulp = require("gulp"); var rework = require("gulp-rework"); var selectors = require("rework-mutate-selectors"); var rename = require("gulp-rename"); gulp.task("default", function(){ return gulp.src("framework.css") .pipe(rework(selectors.prefix(".my-module"))) // prefixに".my-module"を追加 .pipe(rename("my-module.framework.css")) .pipe(gulp.dest(".")); });
こうすると例えば
/* framework.css */ div a{ color:red }
が、
/* my-module.framework.css */ .my-module div a{ color:red }
と出力されます。
結論
一瞬、自分で作ろうかとも考えましたが、諦めずに探して良かったとです。