Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Fix live CSS refresh to work with prefixfree [#185]

Prefixfree replaces original <link> with a <style> element, so we need
to add some special handling for it:

- match style[data-href] against incoming CSS paths

- properly create a replacement <link> when the original is a <style>

- invoke PrefixFree to re-process the updated CSS

StyleFix is a name of a framework that PrefixFree is based on.
  • Loading branch information...
commit 8394e4e264b650d69b4f05114603a92822a90e24 1 parent 9593977
@andreyvit andreyvit authored
View
28 src/reloader.coffee
@@ -157,15 +157,20 @@ exports.Reloader = class Reloader
for link in links
@collectImportedStylesheets link, link.sheet, imported
+ # handle prefixfree
+ if @window.StyleFix && @document.querySelectorAll
+ for style in @document.querySelectorAll('style[data-href]')
+ links.push style
+
@console.log "LiveReload found #{links.length} LINKed stylesheets, #{imported.length} @imported stylesheets"
- match = pickBestMatch(path, links.concat(imported), (l) -> pathFromUrl(l.href))
+ match = pickBestMatch(path, links.concat(imported), (l) => pathFromUrl(@linkHref(l)))
if match
if match.object.rule
@console.log "LiveReload is reloading imported stylesheet: #{match.object.href}"
@reattachImportedRule(match.object)
else
- @console.log "LiveReload is reloading stylesheet: #{match.object.href}"
+ @console.log "LiveReload is reloading stylesheet: #{@linkHref(match.object)}"
@reattachStylesheetLink(match.object)
else
@console.log "LiveReload will reload all stylesheets because path '#{path}' did not match any specific one"
@@ -223,13 +228,26 @@ exports.Reloader = class Reloader
@Timer.start @options.stylesheetReloadTimeout, executeCallback
+ linkHref: (link) ->
+ # prefixfree uses data-href when it turns LINK into STYLE
+ link.href || link.getAttribute('data-href')
+
+
reattachStylesheetLink: (link) ->
# ignore LINKs that will be removed by LR soon
return if link.__LiveReload_pendingRemoval
link.__LiveReload_pendingRemoval = yes
- clone = link.cloneNode(false)
- clone.href = @generateCacheBustUrl(link.href)
+ if link.tagName is 'STYLE'
+ # prefixfree
+ clone = @document.createElement('link')
+ clone.rel = 'stylesheet'
+ clone.media = link.media
+ clone.disabled = link.disabled
+ else
+ clone = link.cloneNode(false)
+
+ clone.href = @generateCacheBustUrl(@linkHref(link))
# insert the new LINK before the old one
parent = link.parentNode
@@ -249,6 +267,8 @@ exports.Reloader = class Reloader
link.parentNode.removeChild(link)
clone.onreadystatechange = null
+ @window.StyleFix?.link(clone) # prefixfree
+
reattachImportedRule: ({ rule, index, link }) ->
parent = rule.parentStyleSheet
View
18 test/html/prefixfree/test.css
@@ -0,0 +1,18 @@
+body {
+ background: green;
+ /*background: red;*/
+ font: 150% Times, serif;
+}
+
+div {
+ background: #eee;
+ padding: 10px;
+ border-radius: 8px;
+ width: 400px;
+ box-sizing: border-box;
+ transition: 0.5s width;
+}
+
+div:hover {
+ width: 300px;
+}
View
14 test/html/prefixfree/test.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>LiveReload Test</title>
+ <link rel="stylesheet" href="test.css">
+ <script src="prefixfree.min.js"></script>
+</head>
+<body>
+ <script src="../../../dist/livereload.js?host=localhost" async defer></script>
+ <div>
+ Klaatu barada nikto
+ </div>
+</body>
+</html>
Please sign in to comment.
Something went wrong with that request. Please try again.