Automatically clean static content css files when source less files change

[Vinai]

Implement cleaning of specific static content when files are changed.

First, .less file changes can trigger removal of the obsolete copy of the .less file in var/view_preprocessed and the generated .css files in pub/static.

The second type of static files that could automatically be removed when a file is changed are the js-translation.json files. The browser local storage still would need to be cleaned manually, but at least the server side would be taken care of automatically.

Related: Issue #15.

[Vinai]

On second thought, automatically cleaning .css files on .less changes maybe isn't such a good idea, since most developers use gulp or grunt or whatever to recompile those, instead of the bundled PHP compiler.
For the js-translation.json files however it makes sense to clean them automatically though.

[DanieliMi]

How about a --watch-less parameter? Or just --less so everyone could decide to watch them or not?

[JosephLeedy]

I like having the option, and I also think that all static content should cleared from pub/static and var/view_preprocessed. This would solve issues that I've been having with CSS, JS and UI template HTML changes not showing up immediately.

[stollr]

Why not comparing the mtime of the files and only delete the static ones if they are older than the source files?

[Vinai]

In case of LESS it's not straight forward to map static files to source files.
For requirejs-config.js, images and JS files the mapping straight forward, but also not useful, as they are handled already in developer mode.

[Vinai]

@JosephLeedy JS and UI template changes not showing up immediately usually is related to the browser cache being active.

[Vinai]

Since quite a few 👍 have been added to this issue, I think it's time to implement it with a command line switch to turn it on.

[Vinai]

I must admit that I have been quite successfully in avoiding frontend related work that involves theming…

Maybe someone who has some more experience can help me out.

Is there a way to know easily which .css files are affected by changes in a .less file?

[Vinai]

After some discussion, it seems the answer is that the only way to know that would be to do static analysis to build the import tree, and I don't want to that.
Deleting all .css files whenever any .less file is changes seems to be "good enough".

[Vinai]

Thoughts on naming: ideally the name for the command line switch could cover more static assets than just .less files in future, but to be honest, that probably won't happen.
Probably nobody but me cares, but if someone has preferences I would appreciate feedback :)
Possible names for the switch:

• --watch-less
• --less
• --watch-static
• --static
• --css (this would allow for watching .sass etc in addition to .less)

[JosephLeedy]

I think that “—watch-less” would suffice.

[riconeitzel]

If the only option is to delete all *.css files I think it still helps people who do not use the grunt process. Still it's painfully slow as the php less compiler is not very performant.

If it doesn't take too much time to implement a POC I'd say: go for it and we'll test.

[Morgy93]

I was just looking for this one as well.
I'm quite happy with cache-clean.js --watch and the [F]rontend hotkey, but it would be awesome if it could be tracked automatically.

But it should be possible to enable it manually like already discussed here.

--watch --static-frontend or as alias --watch-static-frontend (watch + static frontend)
Could make sense if you're able to run --watch and --static-frontend independently.

Same applies for less, css, or whatever. Since I'm currently flushing static content area for frontend I choosed that name. 🙂

[DanieliMi]

Hi @Vinai, is there any news about this feature?

[Vinai]

@DanieliMi No news currently. Since Luma is dying and neither Hyvä nor any of the other alternatives require less file compilation, I don't really feel like putting time into this.