Add optional cssHref param to style-loader (#27)

* Add optional cssHref param to style-loader

This uses a css href reload method rather than injecting an updated styl

This makes styl property deletions reflect in the UI as well

* Fix messaging

* Use t=

hot/style-loader.js

@@ -11,9 +11,23 @@ module.exports.pitch = function(remainingReq) {
   }
 
   const moduleId = loaderUtils.stringifyRequest(this, `!!${remainingReq}`);
+  const options = loaderUtils.getOptions(this);
   const resourcePath = this.resourcePath;
   const elemName = helpers.getElemName(resourcePath);
 
+  let updateSnippet = ``;
+  if (typeof options.cssHref === `string`) {
+    updateSnippet = `
+        const updateCssHref = require('panel/hot/update-css-href');
+        updateCssHref('${options.cssHref}');
+    `;
+  } else {
+    updateSnippet = `
+        const updateStyle = require('panel/hot/update-style');
+        updateStyle(newStyle.toString(), ${JSON.stringify(resourcePath)});
+    `;
+  }
+
   return `
     module.hot.accept(${moduleId}, () => {
       const newStyle = module.exports = require(${moduleId});
@@ -25,8 +39,7 @@ module.exports.pitch = function(remainingReq) {
         }
       });
       if (!updateCount) {
-        const updateStyle = require('panel/hot/update-style');
-        updateStyle(newStyle.toString(), ${JSON.stringify(resourcePath)});
+        ${updateSnippet.trim()}
       }
     });
     module.exports = require(${moduleId});

hot/update-css-href.js

@@ -0,0 +1,14 @@
+/* eslint-env commonjs */
+module.exports = function updateCssHref(cssLinkHref) {
+  const cssLink = document.querySelector(`link[href][rel=stylesheet][href*='${cssLinkHref}']`);
+  if (cssLink) {
+    // Add hash param to css url to trigger style refresh
+    // We use #t=.. so if css hasn't changed then webpack-dev-server can reply with a 304 Not modified
+    // Which does a no-op for style calculation and paint
+    const cssUrl = cssLink.getAttribute(`href`).split(`#`)[0];
+    cssLink.setAttribute(`href`, `${cssUrl}#t=${new Date().getTime()}`);
+    console.info(`[HMR Panel] Refreshed ${cssUrl}`);
+  } else {
+    console.warn(`[HMR Panel] Could not find stylesheet matching '${cssLinkHref}' in document`);
+  }
+};

hot/update-panel-elems.js

@@ -34,7 +34,7 @@ module.exports = function updatePanelElems(elemName, updateFn) {
     console.info(`[HMR Panel] Updated ${elems.length} ${elemName} elems`);
   } else if (!elems.length) {
     console.warn(`[HMR Panel] No ${elemName} elems found`);
-    console.warn(`[HMR Panel] Exepect file path to be '.../<elemName>/index.js' or '.../<elemName>.js'`);
+    console.warn(`[HMR Panel] Exepect file path to be '.../<elemName>/index.<ext>' or '.../<elemName>.<ext>'`);
   }
 
   return numUpdated;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "panel",
-  "version": "0.13.1",
+  "version": "0.13.2",
   "description": "Web Components with Virtual DOM: lightweight composable web apps",
   "main": "build/index.js",
   "files": [