I like userstyles, and I use Stylish to manage mine. I’ve also written a number of userstyles, which I have to tweak and fix on a regular basis.
Unfortunately, Stylish’s development workflow doesn’t work well for me. I edit everything with Emacs, store everything in Subversion, and avoid the mouse at all costs. I go to great lengths to make my edit-compile-test loop as quick and painless as possible.
Stylish, on the other hand, doesn’t natively support external editors. Its GUI requires lots of mouse clicks. It stores userstyles in a SQLite database, so I can’t edit or symlink userstyle files on disk, which means I’m constantly copying their contents back and forth to version control. All of that makes my edit-compile-test loop slow, cumbersome, and error prone.
I asked on userstyles.org, and the responses pointed to It’s All Text and Stylish-Custom, which add support for external editors and import and export. That lets me use Emacs, but doesn’t avoid the GUI or mouse or help me keep my userstyles in files under version control.
I searched for other workarounds, found more that didn’t work, and almost gave
up hope when I chanced upon a couple solutions. First, the
CSS @import directive. It lets me
put a single @import in the Stylish userstyle that points to a file in my
local version control workspace, e.g.:
@import "file:///home/ryanb/src/userscripts/more_minimalist_gmail.css";
@-moz-document url-prefix(http), url-prefix(file) {}
(The @-moz-document rule is odd, but necessary. Stylish uses @-moz-document
rules to determine whether it should include a userstyle in the context menus
for a given page. This catch-all explicitly tells Stylish to include the
userstyle in every page.)
The next step was to make Stylish reload the imported CSS files when they changed. I could use the GUI to force a reload by going to “Manage user styles…”, opening the userstyle, and clicking Preview or Save, but that was too painful and mouse-heavy.
Eventually, I noticed that Stylish extends the View => Page Style menu with
items for each active userstyle, which I could use to turn them on and off and
force a reload. I could now do it entirely with the keyboard: Alt-V Y 1, Alt-V
Y 1. Woohoo!
Granted, this is all still very hacky, but it works for me.
I like Chrome (so shot me ;) and in Chrome we have custom.css and one of its nicest features is as soon as you resave the file the page updates, very handy.
Even Stylish Custom doesnt do this, unless you change its code…
in its content directory (take to long to explain where that is) theres a file called edit-overlay.js add a ilne at line 138 like this…
this.toggleUnPreview(‘Preview’);
…now every time it updates from an external editor saving it also clicks preview, saved me alot of time and hassle
Thank you so much – your instructions have saved my day!
Infinite thanks!
Thank you so much!
Pingback: Ryan Barrett
Great article!
I too enjoy hacking on the stylish extension. I made this little app which will pull user styles from the stylish sqlite database and dump them to disk. It will detect if they change and automatically update the stylish database:
https://github.com/spectralsun/stylish-dump
The one piece I’m missing from it is getting stylish to reload the style when it’s updated. Based off what you discovered in your article, I’m thinking it may be feasible to somehow send firefox keystrokes that cause a reload.