├── .gitignore
├── .npmignore
├── LICENSE.md
├── README.md
├── index.js
├── lib
    └── url.js
└── package.json


/.gitignore:
--------------------------------------------------------------------------------
1 | bower_components
2 | node_modules
3 | *.log
4 | .DS_Store
5 | bundle.js
6 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
 1 | bower_components
 2 | node_modules
 3 | *.log
 4 | .DS_Store
 5 | bundle.js
 6 | test
 7 | test.js
 8 | demo/
 9 | .npmignore
10 | LICENSE.md


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | Copyright (c) 2017 Jam3
 3 | 
 4 | Permission is hereby granted, free of charge, to any person obtaining a copy
 5 | of this software and associated documentation files (the "Software"), to deal
 6 | in the Software without restriction, including without limitation the rights
 7 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 8 | copies of the Software, and to permit persons to whom the Software is
 9 | furnished to do so, subject to the following conditions:
10 | 
11 | The above copyright notice and this permission notice shall be included in all
12 | copies or substantial portions of the Software.
13 | 
14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
15 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
16 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
17 | IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
18 | DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
19 | OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE
20 | OR OTHER DEALINGS IN THE SOFTWARE.
21 | 
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # reload-css
 2 | 
 3 | [![experimental](http://badges.github.io/stability-badges/dist/experimental.svg)](http://github.com/badges/stability-badges)
 4 | 
 5 | This module reloads all style sheets associated with a specified `url`. This is primarily useful for LiveReload servers that wish to update style sheets without triggering a full page refresh.
 6 | 
 7 | If you omit the `url` argument, all style sheets will be cache busted.
 8 | 
 9 | ## Install
10 | 
11 | ```sh
12 | npm install reload-css --save
13 | ```
14 | 
15 | ## Usage
16 | 
17 | [![NPM](https://nodei.co/npm/reload-css.png)](https://www.npmjs.com/package/reload-css)
18 | 
19 | #### `reloadCSS([url], [opt])`
20 | 
21 | Cache-busts the URLs for all `<link>` tags that match the specified `url`, as well as any other style sheets that `@import` the URL.
22 | 
23 | By default, this will only look for local style sheets (i.e. `localhost`, `127.0.0.1`, or matching the document domain). You can pass `{ local: false }` as the options to cache bust all styles.
24 | 
25 | In some cases, it will walk upwards to a more top-level style sheet (i.e. in a long chain of import dependencies) to ensure a consistent result across browsers. Import statements are updated in the `cssRules`, and `<link>` tags are re-attached for a clean update (no flicker/flash).
26 | 
27 | You can omit `url` or pass `null` as the first argument to reload all styles instead of just a target one.
28 | 
29 | ## License
30 | 
31 | MIT, see [LICENSE.md](http://github.com/Jam3/reload-css/blob/master/LICENSE.md) for details.
32 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
  1 | var qs = require('query-string');
  2 | var URL = require('./lib/url');
  3 | var baseHosts = getBaseHosts();
  4 | 
  5 | module.exports = function (url, opt) {
  6 |   // by default, only reloads local style sheets
  7 |   var localOnly = true;
  8 |   if (opt && opt.local === false) {
  9 |     localOnly = false;
 10 |   }
 11 | 
 12 |   // determine base URL
 13 |   var baseUrl = document.location.pathname;
 14 |   var baseTag = document.querySelector('base');
 15 |   if (baseTag) {
 16 |     baseUrl = baseTag.getAttribute('href');
 17 |     var parsedBase = URL.parse(baseUrl);
 18 |     parsedBase.pathname = '/';
 19 |     parsedBase.hash = null;
 20 |     parsedBase.query = null;
 21 |     parsedBase.search = null;
 22 |     baseUrl = URL.format(parsedBase);
 23 |   }
 24 | 
 25 |   // Find all <link> and <style> tags
 26 |   var nodes = [ 'link', 'style' ]
 27 |     .map(elements)
 28 |     .reduce(function (a, b) {
 29 |       return a.concat(b);
 30 |     }, [])
 31 |     .filter(function (el) {
 32 |       return filterStyleSheet(el, localOnly);
 33 |     })
 34 |     .map(function (el) {
 35 |       var data = {
 36 |         element: el
 37 |       };
 38 |       var href = el.getAttribute('href');
 39 |       if (el.tagName === 'LINK' && href) {
 40 |         data.key = URL.key(href, baseUrl);
 41 |       }
 42 |       return data;
 43 |     });
 44 | 
 45 |   // Now gather all imports in those tags
 46 |   var imports = [];
 47 |   nodes.forEach(function (node) {
 48 |     recursiveFindImports(node, node.element.sheet, imports, baseUrl);
 49 |   });
 50 | 
 51 |   // Now try to update the matched URLs
 52 |   var keyToMatch = url ? URL.key(url, baseUrl) : null;
 53 |   var matchImports = imports;
 54 |   if (keyToMatch) {
 55 |     // only match target imports
 56 |     matchImports = matchImports.filter(function (imported) {
 57 |       return imported.key === keyToMatch;
 58 |     });
 59 |   }
 60 | 
 61 |   // Map them to the "top most" import that needs update
 62 |   // This isn't actually the root, just the most shallow
 63 |   // style sheet we need to update for it to work in Chrome/FF/Safari
 64 |   // (Chrome has an issue where updating a deep import will break)
 65 |   matchImports = matchImports.map(getTopmostImport);
 66 | 
 67 |   // Filter out any potential duplicate top most imports
 68 |   // And reverse so we update deep to shallow
 69 |   matchImports = uniq(matchImports).reverse();
 70 | 
 71 |   // Now cache bust each import
 72 |   matchImports.forEach(bust);
 73 | 
 74 |   // Now find any URLs referenced by a <link> tag
 75 |   var matchLinks = nodes.filter(function (node) {
 76 |     // no keyToMatch just means bust all link tags
 77 |     var isMatch = keyToMatch
 78 |       ? node.key === keyToMatch
 79 |       : true;
 80 |     return node.element.tagName === 'LINK' && isMatch;
 81 |   });
 82 | 
 83 |   // And re-attach each link tag
 84 |   matchLinks.forEach(function (node) {
 85 |     node.element = reattachLink(node.element);
 86 |   });
 87 | };
 88 | 
 89 | function bust (imported) {
 90 |   if (!imported.busted) {
 91 |     imported.rule = cacheBustImportRule(imported.rule, imported.index);
 92 |   }
 93 |   imported.busted = true;
 94 |   return imported;
 95 | }
 96 | 
 97 | function reattachLink (link, cb) {
 98 |   var href = link.getAttribute('href');
 99 | 
100 |   var cloned = link.cloneNode(false);
101 |   cloned.href = getCacheBustUrl(href);
102 | 
103 |   var parent = link.parentNode;
104 |   if (parent.lastChild === link) {
105 |     parent.appendChild(cloned);
106 |   } else {
107 |     parent.insertBefore(cloned, link.nextSibling);
108 |   }
109 | 
110 |   cloned.onload = function () {
111 |     if (link.parentNode) link.parentNode.removeChild(link);
112 |     if (cb) cb();
113 |   };
114 |   return cloned;
115 | }
116 | 
117 | function filterStyleSheet (element, localOnly) {
118 |   if (isPrintMedia(element)) return false;
119 |   if (element.tagName === 'LINK') {
120 |     if (!element.getAttribute('href')) return false;
121 |     if (localOnly && !isLocalStylesheet(element)) return false;
122 |   }
123 |   return true;
124 | }
125 | 
126 | function isLocalStylesheet (link) {
127 |   var href = link.getAttribute('href');
128 |   if (!href || link.getAttribute('rel') !== 'stylesheet') return false;
129 |   var parsed = URL.parse(href);
130 |   if (parsed.protocol && parsed.protocol !== window.document.location.protocol) {
131 |     // different protocol, let's assume not local
132 |     return false;
133 |   }
134 |   if (parsed.host) {
135 |     // see if domain matches
136 |     return baseHosts.indexOf(parsed.host.toLowerCase()) >= 0;
137 |   }
138 |   // no host / protocol... assume relative and thus local
139 |   return true;
140 | }
141 | 
142 | function uniq (list) {
143 |   var result = [];
144 |   list.forEach(function (item) {
145 |     if (result.indexOf(item) === -1) {
146 |       result.push(item);
147 |     }
148 |   });
149 |   return result;
150 | }
151 | 
152 | function isPrintMedia (link) {
153 |   return link.getAttribute('media') === 'print';
154 | }
155 | 
156 | function elements (tag) {
157 |   return Array.prototype.slice.call(document.getElementsByTagName(tag));
158 | }
159 | 
160 | function getBaseHosts () {
161 |   var baseHosts = [
162 |     'localhost', '127.0.0.1'
163 |   ].map(function (h) {
164 |     return h + ':' + window.document.location.port;
165 |   });
166 | 
167 |   // handle current
168 |   if (window.document.location.hostname !== 'localhost') {
169 |     baseHosts = baseHosts.concat([ window.document.location.host ]);
170 |   }
171 | 
172 |   // normalize case
173 |   return baseHosts.map(function (h) {
174 |     return h.toLowerCase();
175 |   });
176 | }
177 | 
178 | function cacheBustImportRule (rule, index) {
179 |   var parent = rule.parentStyleSheet;
180 |   var newHref = getCacheBustUrl(rule.href);
181 | 
182 |   var media = '';
183 |   try {
184 |     media = rule.media.length
185 |       ? Array.prototype.join.call(rule.media, ', ')
186 |       : '';
187 |   } catch (err) {
188 |     // might get here if permission is denied for some reason
189 |   }
190 | 
191 |   var newRule = '@import url("' + newHref + '") ' + media + ';';
192 |   parent.insertRule(newRule, index);
193 |   parent.deleteRule(index + 1);
194 |   return parent.cssRules[index];
195 | }
196 | 
197 | function getTopmostImport (imported) {
198 |   var topmost = imported;
199 |   while (topmost.parentImport) {
200 |     topmost = topmost.parentImport;
201 |   }
202 |   return topmost;
203 | }
204 | 
205 | function recursiveFindImports (node, styleSheet, result, baseUrl, lastImport) {
206 |   if (!styleSheet) return;
207 |   var rules;
208 |   try {
209 |     rules = styleSheet.cssRules;
210 |   } catch (err) {
211 |     // some sort of security error
212 |   }
213 |   if (!rules || rules.length === 0) {
214 |     return;
215 |   }
216 | 
217 |   for (var i = 0; i < rules.length; i++) {
218 |     var rule = rules[i];
219 |     if (rule.type === window.CSSRule.IMPORT_RULE) {
220 |       var parentHref = rule.parentStyleSheet.href || document.location.href;
221 |       var absoluteHref = URL.resolve(parentHref, rule.href);
222 |       var key = URL.key(absoluteHref, baseUrl);
223 | 
224 |       var newImport = {
225 |         index: i,
226 |         rule: rule,
227 |         parentImport: lastImport,
228 |         key: key,
229 |         href: rule.href
230 |       };
231 |       result.push(newImport);
232 |       recursiveFindImports(node, rule.styleSheet, result, baseUrl, newImport);
233 |     }
234 |   }
235 | }
236 | 
237 | function getCacheBustUrl (href) {
238 |   var parsed = URL.parse(href);
239 |   var qsObj = qs.parse(parsed.search);
240 |   qsObj._livereload = String(Date.now());
241 |   parsed.query = undefined;
242 |   parsed.search = qs.stringify(qsObj);
243 |   return URL.format(parsed);
244 | }
245 | 


--------------------------------------------------------------------------------
/lib/url.js:
--------------------------------------------------------------------------------
 1 | var URL = require('url');
 2 | 
 3 | module.exports.resolve = URL.resolve.bind(URL);
 4 | module.exports.format = URL.format.bind(URL);
 5 | 
 6 | module.exports.parse = function (url) {
 7 |   // Handle protocol-relative URLs, a browser feature
 8 |   if (url.indexOf('//') === 0) {
 9 |     url = document.location.protocol + url;
10 |   }
11 |   return URL.parse(url);
12 | };
13 | 
14 | module.exports.key = function (url, baseUrl) {
15 |   // Strip hash/query and get a resolved URL pathname
16 |   var parsed = URL.parse(url);
17 |   url = URL.format({
18 |     pathname: (parsed.pathname || '').replace(/\/+$/, '/')
19 |   });
20 |   return URL.resolve(baseUrl || document.location.pathname, url);
21 | };
22 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "reload-css",
 3 |   "version": "1.0.2",
 4 |   "description": "Reloads all style sheets in the page associated with a URL",
 5 |   "main": "index.js",
 6 |   "license": "MIT",
 7 |   "author": {
 8 |     "name": "Matt DesLauriers",
 9 |     "email": "dave.des@gmail.com",
10 |     "url": "https://github.com/mattdesl"
11 |   },
12 |   "dependencies": {
13 |     "query-string": "^4.2.3"
14 |   },
15 |   "devDependencies": {},
16 |   "scripts": {
17 |     "test": "node test.js"
18 |   },
19 |   "keywords": [
20 |     "reload",
21 |     "livereload",
22 |     "live",
23 |     "css",
24 |     "inject",
25 |     "css-reload",
26 |     "css-inject",
27 |     "lr",
28 |     "budo",
29 |     "development",
30 |     "dev",
31 |     "server"
32 |   ],
33 |   "repository": {
34 |     "type": "git",
35 |     "url": "git://github.com/Jam3/reload-css.git"
36 |   },
37 |   "homepage": "https://github.com/Jam3/reload-css",
38 |   "bugs": {
39 |     "url": "https://github.com/Jam3/reload-css/issues"
40 |   }
41 | }
42 | 


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