├── plugin
    ├── cssrefresh.vim
    └── cssrefresh.sh
└── README.md


/plugin/cssrefresh.vim:
--------------------------------------------------------------------------------
 1 | function! s:CRefresh()
 2 |     let paths = substitute(escape(&runtimepath, ' '), '\(,\|$\)', '/**\1', 'g')
 3 |     let cmd = findfile('cssrefresh.sh', paths)
 4 | 
 5 |     let fn = expand("%:t:r")
 6 |     let cmdline = cmd . ' ' . fn
 7 |     exec '!' . cmdline . ' 2>&1 >/dev/null'
 8 | endfunction
 9 | 
10 | function! s:CAutoRefresh()
11 |     autocmd! bufwritepost *.less,*.css,*.sass,*.scss CRefresh
12 | endfunction
13 | 
14 | com! CRefresh call s:CRefresh()
15 | com! CAutoRefresh call s:CAutoRefresh()
16 | 
17 | " By default, autorefresh is always on.
18 | " Comment this out to disable that; you can type :CAutoRefresh to start it
19 | " again later.
20 | "
21 | call s:CAutoRefresh()
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | CSS Refresher for VIM
 2 | =====================
 3 | 
 4 | Reloads the CSS files of the current Safari tab everytime a .css file is saved.
 5 | 
 6 | Usage
 7 | -----
 8 | 
 9 |  - Install this VIM plugin using pathogen.
10 |    (alternatively, just copy the files to `~/.vim/plugin`)
11 | 
12 |  - Open your project in Safari. Make sure it's the front-most tab.
13 | 
14 |  - Open a CSS file in that project in VIM.
15 | 
16 |  - Make a few changes and save it.
17 | 
18 |  - Watch as Safari refreshes your CSS changes!
19 | 
20 | Assumptions
21 | -----------
22 | 
23 |  - You're using a Mac (relies on AppleScript); and
24 | 
25 |  - Your browser of choice is Safari.
26 | 
27 | Caution: This is a quick and dirty hack, use at your own risk!
28 | 
29 | 


--------------------------------------------------------------------------------
/plugin/cssrefresh.sh:
--------------------------------------------------------------------------------
 1 | #!/bin/sh
 2 | osascript -s o << END
 3 |     tell application "Safari"
 4 |       do JavaScript "
 5 |         (function(\$) {
 6 |           var spec = '$1';
 7 |           var updater = {
 8 |             el: null,
 9 |             init: function () {
10 |                 if (this.el) { this.el.remove(); }
11 |                 this.el = \$('<div>').css({
12 |                     position: 'absolute',
13 |                     top: '5px',
14 |                     left: '5px',
15 |                     background: 'rgba(0, 0, 0, 0.5)',
16 |                     color: 'white',
17 |                     'font': '8pt/12pt helvetica, sans-serif',
18 |                     'z-index': '10012',
19 |                     'padding': '2px 10px',
20 |                     'border': 'solid 2px rgba(255,255,255,0.5)'
21 |                 });
22 |                 \$('body').append(this.el);
23 |             },
24 |             updateNumbers: function (a, b, url) {
25 |                 if (a == b) { this.el.fadeOut(function () { \$(this).remove(); }); }
26 |                 var str = '';
27 |                 for (var i=0; i<a; ++i) { str += '|'; }
28 |                 for (var i=0; i<(b-a); ++i) { str += '&nbsp;'; }
29 |                 this.update(str);
30 |             },
31 |             update: function (str) {
32 |                 this.el.html(str);
33 |             }
34 |           };
35 | 
36 |           var \$sheets = \$('link[rel=stylesheet]');
37 |           var loaded = 0;
38 |           var total = 0;
39 | 
40 |           \$sheets.each(function () {
41 |               var \$this = \$(this);
42 | 
43 |               if (\$this.data('url')) {
44 |                   var href = \$this.data('url');
45 |               } else {
46 |                   var href = \$this.attr('href');
47 |                   \$this.data('url', href);
48 | 
49 |                   var \$style = \$('<style>').attr('type', 'text/css');
50 |                   \$('head').append(\$style);
51 |                   \$this.data('style', \$style);
52 |               }
53 | 
54 |               \$this.reloader = function () {
55 |                   var _this = \$(this);
56 |                   var url = _this.data('url');
57 |                   \$.get(url, function (data) {
58 |                       _this.attr('href', '');
59 |                       _this.data('style').html(data);
60 |                       _this.attr('disabled', 1);
61 |                       updater.updateNumbers(++loaded, total, url);
62 |                   });
63 |               };
64 | 
65 |               if ((!spec) || (href.match(spec)))
66 |                   { \$this.reloader(); total += 1; }
67 |           });
68 | 
69 |           updater.init();
70 |           updater.updateNumbers(0, total);
71 |         })(jQuery);
72 |       " in front document
73 |     end tell
74 | END
75 | 


--------------------------------------------------------------------------------