PhpStorm: Nest or Group generated CSS files under source LESS file

Question

Can PhpStorm hide generated CSS files under the LESS file?

Here is a screenshot of a WordPress theme:

I've found myself opening the .css file instead of the .less one on numerous occasions. Is there some way to group these files together so I never see the .css file? A bit like a closed folder, have to click the arrow to view generated file?

(I remember seeing a similar feature somewhere, not sure if it was in PhpStorm or another editor)

I did have LESS files in their own folder, but I still found myself opening the .css file from time to time by accident. It would be good to hide them completely.

Thanks!

Answer 1

Never mind, it seems to be (kinda?) working:

style.less nests style.css correctly, not sure why the others are not showing.

Answer 2

It is called File Nesting and it's available from the gear icon in the Project browser.