Live CSS reloading

[rstacruz]

I'm using extract-text-webpack-plugin to write .css files and webpack-livereload-plugin reloads the entire page when a CSS file changes.

tiny-lr has support for liveCSS to reload the CSS in place.

Any clues on how I can take advantage of that?

[0x80]

For me the whole page seems to be reloaded no matter if I use inline css or the extract-text plugin. Have you managed to get live reload working properly without extracted css?

[rstacruz]

For me the whole page seems to be reloaded no matter if I use inline css or the extract-text plugin.

Yes, that's what I'm getting. What I'm expecting to happen, though, is that the CSS reloads in-page without needing a full page reload.

Have you managed to get live reload working properly without extracted css?

Yep, but I haven't tried with CSS! JS works fine though

[statianzo]

@rstacruz I was unaware of tiny-lr's liveCSS support. Looks useful for projects using the extract-text plugin.

My guess as to what's causing a full refresh is that livereload-plugin is notifying about all files rather than just those that have changed. include should only be of files with a new hash.

LiveReloadPlugin.prototype.done = function done(stats) {
  var hash = stats.compilation.hash;
  var childHashes = (stats.compilation.children || []).map(child => child.hash);
  var files = Object.keys(stats.compilation.assets);
  var include = files.filter(function(file) {
    return !file.match(this.ignore);
  }, this);

  if (this.isRunning && (hash !== this.lastHash || !arraysEqual(childHashes, this.lastChildHashes)) && include.length > 0) {
    this.lastHash = hash;
    this.lastChildHashes = childHashes;
    setTimeout(function onTimeout() {
      this.server.notifyClients(include);
    }.bind(this));
  }
};

[defmech]

I was having the same issue as you @rstacruz. What I ended up doing was moving the livereload to a npm script. I've also just discovered you can chain tasks in npm scripts. Example.
"scripts": { "build": "webpack --progress --watch", "reload": "livereload dist/ --port 35729", "dev": "npm run -s reload & npm run -s build" },

So npm run dev will start webpack and the livereload.

Apologies as this isn't directly related to the this project. Hopefully might be useful.

[kayue]

@defmech May I know how do you compile you SCSS? I am trying your method but the entire page is refreshed even I just changed some SCSS. Also the compile time is long because it attempt to recompile all the JSs.

[defmech]

@kayue Webpack by default packs it into the javascript. I'm extracting the CSS using the ExtractTextPlugin. Here's a snippet of my webpack.config.js.

module: {
    loaders: [{
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'babel-loader',
      query: {
        presets: [
          ["es2015", {
            "modules": false
          }]
        ]
      }
    }, {
      test: /\.scss$/,
      loader: ExtractTextPlugin.extract('css-loader!postcss-loader!sass-loader')
    }]
  },
  plugins: [
    // css optimize
    new OptimizeCssAssetsPlugin(),
    // sass
    new ExtractTextPlugin({
      filename: '../css/main.css',
      allChunks: true
    }),
    // uglify js
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      },
      output: {
        comments: false
      },
      sourceMap: true
    }),
    // env plugin
    new webpack.DefinePlugin({
      'proccess.env': {
        NODE_ENV: JSON.stringify(nodeEnv)
      }
    })
  ],

[kayue]

@defmech I have very similar setup and using ExtractTextPlugin too, but how do you prevent entire page being refreshed?

I have an import statement in my JS (import './bootstrap.scss';), maybe this makes Webpack think I am changing some JS? But if I don't import CSS in my JavaScript, then Webpack won't monitor CSS file for changes at all...

Thank you for your time.

[defmech]

@kayue I've uploaded my build system https://github.com/defmech/WebPack-2-Build-System so you see how I've set up my environment. Hopefully that helps.

[pmowrer]

Looks like the current implementation, referenced in @statianzo's #28 (comment), reports all chunks to LiveReload on each compilation, no matter what has changed.

Replacing this logic with the a changedFiles array from the plugin example docs, I easily was able to make live CSS reloading work. I'll put together a PR next week unless someone jumps on it.

[statianzo]

changedFiles looks like the right source. Thanks for taking on the PR!

[pmowrer]

Sure thing! I'll remove the hash logic as well unless there's a good reason to keep it?

(Referencing:)
(hash !== this.lastHash || !arraysEqual(childHashes, this.lastChildHash))

[statianzo]

The logic was there so a reload would only get triggered when there was a change. If your solution keeps that behavior, then feel free to rip out the hash comparison code.

[pmowrer]

I'm afraid I'll have to punt on this for now. Looks like live reloading of <style> tags isn't supported, which makes this a pointless endeavor for us.

[statianzo]

Ahh, yes. It'll only work for <link> or @import based on the href attribute. CSS in JS and raw <style> tags would cause a full refresh.
https://github.com/livereload/livereload-js/blob/03b09762e930f6c6c67ee270c208d1c11de0247f/src/reloader.coffee#L149-L179

[tbranyen]

Posted a PR fix here: #33 it works perfectly with this configuration:

    }, {
      test: /\.css$/,
      use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: {
          loader: 'css-loader',
          options: 'url=false&sourceMap',
        }
      })
    }]