css hot reload

[elayabharath]

I think it would be really useful to have css changes reflected in webdev serve --hot-reload

[jakemac53]

For angular this will just happen (they are actually inlined in dart code), otherwise as you have noticed we don't attempt to do anything with css. There is a potential problem with scope creep here (what about images, fonts, etc?). Although I think it is safe to say that css changes a lot more often so supporting just that would probably provide most of the value.

Are there known solutions for handling this (the actual reloading of the css?). It seems like you would have to add in some layer of abstraction around css itself to get this working but I could be wrong.

[jakemac53]

One potential option would be adding a query string to the href of all link[rel="stylesheet"] tags (or if we want to get smart just the changed ones).

It looks like something as simple as this almost works (you can try it in your own app, by putting it in your main.dart file, or whatever is the root of your application).

int _reloadNum = 0;
void hot$onDestroy() {
  var nodes = document.styleSheets
      .where((sheet) => sheet.ownerNode != null)
      .map((sheet) => sheet.ownerNode)
      .cast<LinkElement>();
  for (var node in nodes) {
    var oldUri = Uri.parse(node.href);
    var newQueryParams = Map.of(oldUri.queryParameters);
    newQueryParams['hotReloadNum'] = '$_reloadNum';
    node.href = oldUri.replace(queryParameters: newQueryParams).toString();
  }
}

The problem is you will have to also edit at least one dart file in some way to see the updates (otherwise this function never gets called), but we could come up with a solution for that.

[natebosch]

I think we're unlikely to find something satisfying here. This really needs to be baked in to a framework to work effectively.

[jakemac53]

I think the above would work for a lot of scenarios - if we provided a more general hot restart/reload hook then a separate package could implement this (that is what seems to be the case for webpack for instance, they don't ship with it out of the box).

I agree it probably isn't something we should ship for all apps.