gulp watch not working for theme main.css

• Type: Bug
• Status: Closed
• Resolution: Won't Fix
• Affects Version/s: 7.0.2 CE GA3, 7.0.0 DXP FP4, 7.0.3 CE GA4, 7.0.X EE, 7.0.4 CE GA5, Master
• Fix Version/s: None
• Component/s: Themes Infrastructure
• Labels: None
• Fix Priority: 3
• Sprint: S01E03-"One-Eyed"Willy's hoard

Liferay 7 supports gulp watch and live-reload for faster development cycles.
Alas, it doesn't work for themes and especially main.css, editing _custom.scss does not trigger an automatic reload of the css on the page.

Steps to reproduce:

1) Install LiveReload browser plugin
2) Create a new theme
3) Start "gulp watch"
4) Add theme to a page and open said page in the browser
5) Edit _custom.scss, add something really visible like:

*{background:red;}

gulp watch now hot-deploys the theme and triggers a reload of "main.css" (and aui.css)

Expected behavior: Page becomes red without any user interaction
Actual behavior: Page doesn't change

At first I thought that it doesn't work at all, but something more subtle happens. gulp watch actually triggers a reload of main.css but this doesn't reload the theme main.css but the first link to a css file "main.css"

The first css in the head of a page is this one:

<link href="/o/dynamic-data-mapping-form-renderer/css/main.css" rel="stylesheet" type = "text/css" />

So instead of reloading theme/css/main.css this dynamic data mapping css is reloaded whenever _custom.scss is edited.

Possible fixes:
1) Rename theme main.css into something like theme.css
2) Put theme main.css into the first line of the page head.
3) Rename dynamic-data-mapping-form-renderer main.css

Workaround:
Put the following line into the head part of portal_normal.ftl
<link href="${css_folder}/theme-dev.css" rel="stylesheet" type="text/css">

Create a file /mytheme/src/css/theme-dev.css and put your styles there.
Result: Any changes to theme-dev.css instantly refreshes the browser window as expected.