my Stylish userstyle workflow

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, 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.

6 thoughts on “my Stylish userstyle workflow

  1. 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

  2. Pingback: Ryan Barrett

  3. 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:

    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.

Leave a Reply

Your email address will not be published.